Facebook Pixel Heading Rule with Text Component | Western Kentucky University Skip to main content

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

 

 




Need Assistance?

The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 11/6/20