Tutorial n°5 : Style your project from Figma design

Step 7 : Style your page elements #2

Let's repeat the operation with the Title (h1) : In the Figma project, click the "Glad to see you again !" and copy the CSS that appears on the right (except the Font-family that will be set up after).

Come back in the Studio, search for the "Style" component in the palette and drag & drop it directly in the h1 field in the App Viewer.
Open the style component in the H1 field in the treeview, double click to open it and paste your CSS. (Don't forget the "--" before at the beginning of every line).

Repeat the operation for the subtitle (paragraph) : Click it on FIgma, copy the CSS (except the font-family), Drag & drop a style component in the paragraph, open it and paste your CSS. (Don't forget the "--" before at the beginning of every line).

Then search in the palette for the "FormatLayout" component and drag & drop it in the main "Grid" in the Treeview. This FormatLayout will center the elements in the page.
Click the FormatLayout and, in its properties, search for "Alignment" and set it up to "ion-text-center".

Success !

You successfully completed this step, please click the Next Step button to go to next tutorial step
Close
You did not complete all the actions required in this step, are you sure you want to go to the next step ?