Style Text with elm-ui Headlines, Typographies, and Fonts
We will style the heading of viewCards to look more like a real heading. If you inspect the console right now, you'll find that the el element we are using for our text corresponds to a div in HTML.
We will go further away than using only text to display our content and introduce the modules Element.Font and Element.Region to fix the headlines and other text of our dashboard, adding an additional "breakdown" heading that is going to serve as a divider between sections.
Instructor: [0:00] You might have noticed that our element text, which contains the title, doesn't look like it's a heading. It looks like regular text. In fact, if we check this out in the HTML, we see indeed that this is just a div containing text, because by default an L element in Elm-UI corresponds to the div element on an HTML.
[0:23] How can we fix that to be more semantically correct and add further styling to our titles? We need to go back to our imports, import Element.Region, and call it Region. Now we're going to go ahead to our title and say that we want it to be a Region.heading 3.
[0:45] If we check our element, we see that now everything is inside an h3, and we're going to use the font to make it even bigger, and say font size 18, and now we are going to say that we want the semiBold font type. Nice.
[1:02] Now that we have our titles looking good, let's do one more further transformation and turn them into uppercase.
[1:13] We are going to go up to our dashboard and we are going to create a new element that we are going to collate, breakdown, and it's going to be a row with the text "Breakdown," and the following width = fill, Region.heading 2, font semiBold again and font size 18.
[1:38] We're going to put this breakdown element in the middle of our columns like this because we want to have a separation between the categories and the overall view, and we are going to further tile this element.
[1:49] This is how you use a region and the font module to handle headlines, typographies, and fonts in Elm-UI.