Text Area
There are lots of options in a Text Area, with many tools to choose from. Use a Text Area where the other paragraph types do not quite fit your content. Learn more about the toolbar Format and Styles options and more below.
Normal Text style
The Normal Text style looks like this. This is the default text style in the Text Area Paragraph, your standard paragraph text style for the body of text throughout long lengths of text content. We designed this paragraph text style to be easy to read from a comfortable distance between your eyes to your screen—the font size is bigger than in the past, and the line spacing is wider, to make it easy for your eyes to track from the end of one line to the beginning of the next line.
Display Text Style
Display Text looks like this.
Intro Text Style
Intro Text look like this.
The Intro Text style is found under the "Styles" menu in the editing tool. We recommend you use the Intro Text style to begin the text content on any page that begins with a Text Area Paragraph. This increases the ease of scanning content for your users.
Heading Styles
Headings are important as visual indicators for your sighted users to scan content, but they are also important to the structure, SEO, and accessibility of your site.
Learn more about how to create and use headings
This is your heading 2 style
This is your heading 3
This is your heading 4
This is your heading 5
Tips on headings and images: In our text areas, headings always appear on separate lines. This ensures legibility across screen sizes and devices. A heading will NOT wrap around an image. Your heading can go above or below your image.
Link styles
Creating a Link
- In order to create a link, first, select the text you wish to link inside the editing tool.
- Then click the link icon.
- If you want to style your link as a button, secondary button or action link:
- From the Styles menu, scroll down the the text styles section.
- Select your link style from there.
- Note: If this section is grayed out, you must first create your link and highlight it, then choose from the Style menu.
Heading Link style
This is the Heading Link style that will automatically appear after you have selected the header text and turned it into a link. Use the Heading Link style inside bodies of text or as a link by itself. The Heading Link style appears as an Action link.
This is your linked heading 2 style
This is your linked heading 3
This is your linked heading 4
This is your linked heading 5
Normal Text Link style
This is the Normal Text Link style that will automatically appear after you have selected text and turned it into a link. Use the Normal Text Link style inside bodies of text, or as a link by itself.
Action Link style
After — and only after you have created a text link, you can also apply the Action Link style for additional visual indication of a link, that is not inside a body of the text:
Action Link style with a caret
The Action Link style is meant to increase the visual indication of a link to a user, and is meant to be used on a line by itself, like the above, or as a list of links, like this:
Button link
The Button link style can be applied to any link you have already created and can be found in the "Styles" dropdown in the editing tool. Use the Button link style to call out a link prominently on the screen.
Big Button link
The Big Button link style can be applied to any link you have already created and can be found in the "Styles" dropdown in the editing tool. Use the Big Button link style to call out a link even more prominently on the screen. We recommend reserving the use of this button to links that require significant visual contrast. Maybe one or two instances on your site could solicit the need for this button style:
Secondary Button link
The Secondary Button link style can be applied to any link you have already created and can be found in the "Styles" dropdown in the editing tool. Use the Secondary Button style for any link that requires prominence, but not as much as a solid-color button. A Secondary Button could be one that provides a second option to users that may not be the primary user task. An example of this could be listing an "Apply" button using the default Button link style, followed by a "Learn more about admissions" button using the Secondary Button link style.
Horizontal dividing border
A horizontal dividing border displayed above can be used to separate the content of any kind. A horizontal dividing border can be created using the horizontal border icon in the editing tool.
Image styles
An unordered list
Can be applied with the unordered list icon in the editing tool:
- list item
- list item
- list item
An ordered list
Apply an ordered list with the ordered list icon in the editing tool:
- ordered list item
- ordered list item
- ordered list item
Table
| Column Header | Column Header | Column Header | |
|---|---|---|---|
| Row Header | Item 1 | Item 2 | Item 3 |
| Row Header | Item 4 | Item 5 | Item 6 |
Quote style
"Use the quote style... for quotes!"
There are 4 styles for Quotes.
You can find these under the Styles menu.
Splash style
This is a style you can use for the text that you want to over-emphasize. We recommend using this style for short lengths of copy, like big numbers (seen below) or big words in strings of 2-3. Overuse of this style can make your page difficult to read and parse visually.
1026
Drop Cap First Letter style
This is a style that can be used to grab readers attention. We recommend using this style at the beginning of a page to add personality to the text.
Sed libero. Vivamus consectetuer hendrerit lacus. Phasellus magna. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Fusce a quam.
Code style
Sed libero. Vivamus consectetuer hendrerit lacus. Phasellus magna. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Fusce a quam.