Design Components – Typography
Paragraph
The most common typography block you'll use to create any single line or group of sentences.
Headings (This is a H2)
Make sure to never use the /heading component to add the H1 element to the page. Those are reserved for the page title.
Start each new section with the Heading 2 (h2) component. Never skip a heading level, this will cause accessibility audit issues. With the use of headings, it's like any use proper use of headings in a research document. When you start a new topic, return to the H2 element. When you have sub-topics, start with the H3 and work your way down. Again, never skip (e.g. H2 followed by a H4).
Heading 3 – use, if you have a sub these after the H2
Use, if you have a sub-topic after using the H2 element.
Heading 4
Use, if you have a sub-topic after using the H3 element.
Heading 5
Use, if you have a sub-topic after using the H4 element.
Heading 6
Use, if you have a sub-topic after using the H5 element.
Lists
Unordered and Ordered lists are created when selecting the /list block component.
Unordered Lists
- Item
- Item
Ordered Lists
- item
- item
- indent leve 1
- indent leve 1
- indent level 2 (i)
- indent level 2 (ii)
- indent level 3 (a.)
- indent level 3 (b.)
- item
- item
- item
- Item when you need to start counting from a number other than 1
- Item
- Item
Description Lists
Create a new block area and the find the Description Lists block using /description list. The Description Lists (DL element) are used to have a list that needs a Topic (DT element) and a Description (DD element) associated with the topic. The DT will be bold and the description will display like a regular paragraph. In each Description Sets, you are are given a single Topics and Descriptions field. You can then add as many new sets as you wish. While each set can contain multiple topics and descriptions, it's best to keep each set to one topic and one description
- First Topic or Event
Description of the first topic or event.
- Second Topic or Event
Description of the second topic or event.
- Third Topic or Event
Description of the third topic or event.
Accordions
Accordions can be used to help pages with large amount of content to hide the content until the user wants or needs to see the content. Each /accordion block should be created separately and not nested, for better accessibility and usability. If you hide multiple levels of content in a single accordion, it can be difficult for users to find the content they need quickly.
First Topic in the Accordion
Information contained in the first accordion.
Second Accordion block with Topic
Information contained in the second accordion
Separation Lines
Separator lines and dots (like the one below this paragraph) can also be added using the /separator block.
Blockquote
When using the Blockquote component, try to avoid large amounts of text (especially when using the default style). The Blockquote does require a citation of the person you are quoting. Visually, it adds lines above and below the quote.
This is an example of the /quote block in the Default style. Use it for short quotes.
Jane Doe
This is an example of the /quote block using the Large style. Use this when you have a longer quote, since the text is smaller than the default.
John Doe
Special Typography Components
Paragraphs
Introduction paragraph that makes text large at the beginning of a page or section
The Section Header Component
When using the Section Header component, it's recommended to add text for both the Section Header Title and Section Header Text. While you can only use the component for the Section Header Title, do not use this component for only the Section Header Text — use the Introduction Paragraph component instead.
Section Header Title
Section header text.
Link List Item
Use the Link List Item component to design a list of links that can be more visually appealing that using the List component. It's best to use this link in conjunction with the Columns component, when you have two or more List Item Links next to each other. Link List Items can link to:
- an internal page,
- a file,
- or external site.
Buttons
Currently, you can link to both internal and external pages by using buttons.
Buttons on a dark background
The Primary button does not have a fill color, so the background color shows through. If the background is set to black, the color changes to white.
Group Link Components
Group links are useful when you need two or more links next to each other.
Jump To Links
Use the jump to links at the beginning of a page for in-page navigation. Set Anchor (ID) names on a Group element or Heading element. It's best to keep this list to only four links, if possible.
Button Set
Use buttons to link to pages to a URL (external site or a document). Note: It's best. to only use 2 buttons for a set, as a third could move to the line under the first two
Table
If you're not using WPDataTables, you can use the Table component. However, use only the Stripes style
| Header Label Column 1 | Header Label Column 2 | Header Label Column 3 |
|---|---|---|
| Row 1 Data for Column 1 | Row 1 Data for Column 2 | Row 1 Data for Column 3 |
| Row 2 Data for Column 1 | Row 2 Data for Column 2 | Row 2 Data for Column 3 |
| Row 3 Data for Column 1 | Row 3 Data for Column 2 | Row 3 Data for Column 3 |