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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!