In this example, we will still be using the basic page content type. First, we will add a new page. Then, inside the editing form, we will search for the "Components" field. The position of this field and others is determined in "Manage form display," where fields can be rearranged by dragging them.
Once we locate the field, the "Select a Component" option will allow us to choose a component to add. The components shown in this list are determined in the "Manage Form Display" section and are the ones checked under "Component List.
In this example we will be adding the card component, first we choose the component and then clic the "+Add component" button.
Then we can see that the component has been added.
We can expand the component by clicking on its name. This will display all of the fields that comprise the component.
We will add all the required information for this example. All the fields will be populated. However, it's worth mentioning that only the fields with a red asterisk (*) are mandatory.
In this component almost all fields are for content except the "Image alignment" this element give us the option to choose in which side our image will be shown. Left is the default value.
Once we add all the information and clic the "save" button. Then we can see the component with the image to the left
And then we can see the same component with the image on the right side.
It is worth mentioning that the components shown here all have a distinct look that is provided by a theme and it will look different in your project.
Luckily the theme is contributed is free to use if you want to, its name is Mockup and can be found here.
If you want to add more components the process it's the same just choose your component and added to your page.
You can arrange or rearrange components in the editing form by dragging them around. You can do this by dragging the arrows.
Hold the arrow and move it, above the positon of the other arrow that you want to move to.
Once changes have been made a message will appear "* You have unsaved reorder changes" the you just have to save to see the changes, to see the new order of the components.