Custom Formats
Custom formats are predefined styles that can be applied to various types of content. These styles are defined in ÈËÆÞÓÕ»ó’s template, and using them appropriately will keep our pages consistent and easy to read.
How to Apply Custom Formats
- Select the content you wish to format. For example, highlight a paragraph or click on an image.
- Click Formats > Custom, then select one of the available formats.
The custom formats visible in this menu will depend on what content you select in step one. For example, if you select an image, custom formats that only apply to text will not be available. See the “apply to” notes below to learn which content can use which formats.
Applying Multiple Formats
Some custom formats come with extra “optional” formats that allow you to tweak the style. Buttons can be various sizes and colors, lead paragraphs can have a watermark, etc. These optional formats, described below, will be listed next to their base formats in the menu. To apply them in addition to the base format, re-open the Formats menu and select an appropriate optional format. A gray bar appears next to formats that have been applied to the currently selected content (see screenshot above).
Removing Formats
You can remove custom formats by repeating the same process you used to apply them. Select the content on the page, then click Formats > Custom. A gray bar appears next to formats that have been applied to the currently selected content (see screenshot above). Click the format to remove it.
Buttons
Best Use: “Call To Action”(CTA) links
Apply the button format to draw attention to an important link. Use sparingly to ensure it retains its force. This format adds a box around the link along with some color to make it pop. Here are some examples:
Button Primary (outlined) with Button Style: Large
Button formats can be applied through the Formats menu (as described above) but they can also be applied in the Insert/Edit Link dialog box itself.
Eyebrow Text
Best Use: A very short, single line of text above a lead paragraph that gives your readers a high-level summary of the content that follows.
This is Eyebrow Text
Apply Eyebrow Text to provide a brief, scannable phrase that sums up the nature of the content on your page. See our “ÈËÆÞÓÕ»ó” page for a good example.
Lead (or Intro) Paragraphs
Best Use: Short, introductory paragraph at the top of a page
This is a lead paragraph.
Apply the Lead format to a lead paragraph (sometimes referred to as an intro paragraph) at the top of the page to draw your reader into your page content. This format makes the font much larger than regular paragraphs, so it should be used sparingly for optimum impact. Apply it to a paragraph of no more than three sentences.
Watermark
Best Use: Behind the lead paragraph to anchor content on a busy page.
The lead paragraph format offers an optional detail: an oversized ÈËÆÞÓÕ»ó griffin that sits behind the paragraph like a watermark. Apply both the lead and watermark custom formats to get this look (see Applying Multiple Formats above).
Heading Styles
Best Use: When needed for headings, important links, short paragraphs
Our Accessibility Best Practices page covered the importance of using correct heading levels throughout your page. Each heading level has a predefined font size, from Heading 1 (biggest) to Heading 6 (smallest); used appropriately, this system helps your readers understand the hierarchy of information on your page. It also helps Google understand your content better, which helps users find what they need more efficiently.
But there may be situations where the font size for the correct heading level is too big or too small for the space, as can sometimes happen when use of the Grid component results in a heading being too wide for the grid. This set of custom formats allows you to make that font size smaller without changing the actual heading level. Here we’ve selected a Heading 2 (H2) that we want to be the size of a Heading 3 (H3). We prefix these format names with “Style” to differentiate them from the actual heading formats in the Headings menu.
Quote
Best Use: A sentence or short paragraph attributable to a person
This is a quote.
Apply the quote format to convert a sentence or short paragraph to a centered statement with a large font and a stylized quotation mark above it. When used sparingly, this format can visually break up a page of otherwise dense text, making content easier to read. Add the speaker’s name below the quote, applying a regular paragraph format to the name, and use the text alignment button to center it.
Float Left or Right
Best Use: To vary the placement of images on the page.
An image is said to be “floating” when other content, like text, wraps around it. These two formats allow you to float an image left (text wraps around to the right) or right (text wraps around to left) on the page.
Router List
Best Use: A bulleted list of links
The router list format is similar to the Router component, but since it’s a format it can be used inside other components. When applied to a bulleted list of links, it creates an attractive grid of links (with the bullets removed), giving you another option for showing your readers more content to which they can navigate. To apply this format, first create a regular bulleted list, add up to nine links (more can be overwhelming), then apply the router list format.
The router list format has two variations: “router list large” makes the font larger; “router list vertical” makes the list stack vertically instead of in a grid. The latter is best to use inside of a Grid or Feature Panel component where horizontal space is limited.
Text Columns
Apply to: a paragraph or list
Split any paragraph or unordered/ordered list into two columns. On mobile, it will revert to a single column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- List item 1
- List item 2
- List item 3
- List item 4
Table
Apply to: tables
The table format can be applied to any table to add cell padding and, optionally, grid lines (“table bordered”) or a background color on alternating rows (“table striped”). To apply either or both of these options, first apply the regular table format, then add the optional ones.
| Column 1 | Column 2 |
|---|---|
| Value | Value |
| Value | Value |