Heading Rule with Text Component

---

In HTML the <hr> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. In the WYSIWYG you have the Horizontal Line button to create a simple line to break content. This component is a more advanced version of that button, but allows you to include some text with your horizontal rule and offers options to style the text or increase the size.

 Do not use this component as a replacement for headings using the WYSIWYG dropdown. Doing so can negatively affect search engine optimization as well as accessibility.

 

Component Fields

---

Text

The text to be displayed over the horizontal rule.  E.g. "or", "and", "more", "Examples"

 

Size

The size of the text over the horizontal rule. Since this component is intended to break up sub sections below the heading 2 level, the largest size available is a Heading 3. Remember, these are not a replacement for headings, but a visual break in sub content.

• Small (ParagraphSize)
• Medium (Heading 5)
• Large (Heading 4)
• X-Large (Heading 3)

 

Color

The color of the text.  By default the text appears as the secondary style light gray, but for more important breaks use WKU Red.

• Light Gray (Default)
• WKU Red

 

Text Alignment

Controls the alignment of the text over the line.

• Left
• Center (Default)
• Right

 

Bold (Optional)

Applies the semi-bold font style to the text.

• Yes
• No (Default)

 

Italics (Optional)

Italicizes the text.

• Yes
• No (Default)

 

 

Examples

---

Example 1

This example uses the default options to create a divider for two sets of content.  It is common to see this component used for instructions where text like 'or' & 'and' may be helpful to demonstrate multiple options or paths to take.

---

Text: or
Size: Small (Paragraph Size)
Color: Light Gray (Default)
Text Alignment: Center (Default)
Bold: No
Italics: No

 

 

Example 2

This example demonstrates the different sizes available.  Heading level only conveys the size of the text, remember to use the WYSIWYG dropdown instead if you need an real heading.

Text: Name of Size, see options above
Size: Example of each, see options above
Color: Light Gray (Default)
Text Alignment: Center (Default)
Bold: No
Italics: No

 

 

Example 3

This example shows the available alignment options.  The component text can be left, center, or right aligned.

Text: Name of Text Alignment, see options above
Size: Small (Paragraph Size)
Color: Light Gray (Default)
Text Alignment: Example of each, see options above
Bold: No
Italics: No

 

 

Example 4

This example demonstrates the available color, bold, and italic styles for the text.  All of these options as well size can be combined.

Text: Example of each, see options above
Size: Small (Paragraph Size)
Color: Example of each, see options above
Text Alignment: Center (Default)
Bold: Example of each, see options above
Italics: Example of each, see options above