Creating Components - ariel-fer/Araena GitHub Wiki
Following the example in Fig 2, the basic elements identified there are:
What can be seen is that on the left side, there is a title, a paragraph and a button. Also on top there is a caption or small title with a special treatment.
For the vertical spacing between these elements, remember that as mentioned in , each title and text will be wrapped with certain classes that will provide also some spacing. If this spacing needs to be overwritten, then move on to the next section for Add spacing between elements.
On the right side, only an image that must cover the whole area.
Most of the elements included here should already be covered by the style guide, hence there should not be a need to start styling things like sizes and color. If needed, then move ahead to the Handle particular requirements section.
Here is where a recursive process comes in. Similarly to what was done with grids and flexboxes to separate the section's content in 2 parts, the same will be done here.
As it can be seen, all elements are separated with gaps that are equal unless specified by design. These gaps can be achieved using a flexbox, in this case with a vertical alignment. The flexbox will be assigned to a class that is parent of all elements added, and child of the main flexbox.
