Skip to main content

Formats

Lorem ipsum

dolor sit amet

Consectetur adipiscing elit. Proin lobortis fringilla convallis. Duis consectetur volutpat dolor eu bibendum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in tortor lorem. Vestibulum in velit ex. Mauris vitae nulla nibh. Donec placerat turpis at mattis facilisis. Nulla non dui sodales lorem sodales varius nec vel purus.

Lorem ipsum

Format H1

Format H2

Format H3

Format H4

Format H5
Format H6

This will be a paragraph

link

Title

Subtitle

Lead Paragraph

Small Paragraph

Pre Title

Normal Paragraph

Headings

Use headings to divide text into chunks, allowing users to scan the content on a page and find what they are looking for. Headings should be used hierarchically, with the <h2>s representing the most important ideas on the page, and sub-sections organised with <h3> level headings. Avoid skipping heading ranks as this can be confusing. Ideally, make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.
The headings will automatically scale up or down, depending on the size of the block they are in.

[Top level heading (h2)]

[Second level heading (h3)]

 

Paragraphs

Use the paragraph styles for your site’s base content. Write in plain English, using short sentences, avoiding jargon and formal language, and using the active voice. Use the lead paragraph to draw more attention to a segment of text without introducing hierarchy for screen readers. Smaller paragraph format can be used for annotations or text of lesser importance.

[LEAD PARAGRAPH] Velit ut tortor pretium viverra suspendisse potenti nullam. Vitae ultricies leo integer malesuada nunc. Cras ornare arcu dui vivamus arcu felis bibendum ut. A diam sollicitudin tempor id eu nisl. Tincidunt id aliquet risus feugiat in ante metus.

[SMALL PARAGRAPH] Velit ut tortor pretium viverra suspendisse potenti nullam. Vitae ultricies leo integer malesuada nunc. Cras ornare arcu dui vivamus arcu felis bibendum ut. A diam sollicitudin tempor id eu nisl. Tincidunt id aliquet risus feugiat in ante metus.

[PRE TITLE] Velit ut tortor pretium viverra suspendisse potenti nullam. Vitae ultricies leo integer malesuada nunc. Cras ornare arcu dui vivamus arcu felis bibendum ut. A diam sollicitudin tempor id eu nisl. Tincidunt id aliquet risus feugiat in ante metus.

 

Buttons and links

To use a link or button format, select some text, and insert the link using the option in the editor’s toolbar. After that, you’ll be able to apply any of the below formats to that link.
Use specific language for links, (for example ‘register now’) not ‘click here’, ‘read more’ or ‘more…’. Make sure the link text makes sense out of context.
Button colours will automatically adjust to the block and container’s background colour.

[button primary]

[BUTTON OUTLINE]

[Call to action]

 

 

Visually hidden format

This format will allow you to hide text from sighted users, but keep it visible for screen reader users. This is useful for adding additional link text when the space is limited. The hidden text should only be added at the end of link text.

[VISUALLY HIDDEN FORMAT] Auctor urna nunc id cursus metus aliquam eleifend.

Buy tickets for The Wallflowers on Friday, May 31 at 8:00 PM

 

Other formatting options

[B and em tags] Ipsum a arcu cursus vitae congue.

  • [NESTED LISTS] Eget lorem dolor sed viverra ipsum nunc aliquet.
    1. Congue eu consequat ac felis donec.
    2. Sit amet tellus cras adipiscing enim eu turpis egestas.
  • Vivamus at augue eget arcu dictum varius duis at consectetur.
    • Eget lorem dolor sed viverra ipsum nunc aliquet.
  • Congue eu consequat ac felis donec.
  • Sit amet tellus cras adipiscing enim eu turpis egestas.
  1. Vivamus at augue eget arcu dictum varius duis at consectetur.
  2. Nunc sed id semper risus in hendrerit gravida rutrum quisque.
    1. Arcu dui vivamus arcu felis bibendum ut tristique.
    2. Et odio pellentesque diam volutpat commodo.
    3. Accumsan lacus vel facilisis volutpat est velit egestas dui.
  3. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu.
    • Id eu nisl nunc mi ipsum faucibus vitae.
    • Sit amet mattis vulputate enim nulla aliquet.
  4. Volutpat ac tincidunt vitae semper quis lectus nulla at.

[BLOCKQUOTE] Aliquet bibendum enim facilisis gravida neque. Tellus mauris a diam maecenas sed enim. Commodo quis imperdiet massa tincidunt.

[ALIGNMENT OPTIONS] Habitant morbi tristique senectus et.

Sed turpis tincidunt id aliquet risus feugiat in.

Sed sed risus pretium quam vulputate dignissim suspendisse.

[LINK, no format] Diam phasellus vestibulum lorem sed risus.

[STRIKETHROUGH] Malesuada proin libero nunc consequat interdum varius sit amet.

[HR]

[TEXT COLOUR] Ipsum dolor sit amet consectetur.

[INDENT] Risus sed vulputate odio ut enim blandit volutpat maecenas. In eu mi bibendum neque egestas congue quisque egestas. In fermentum posuere urna nec.

Porta lorem mollis aliquam ut. Proin nibh nisl condimentum id venenatis a condimentum. Morbi tristique senectus et netus et malesuada fames ac.

Nisl pretium fusce id velit. Interdum posuere lorem ipsum dolor sit amet. Consequat semper viverra nam libero justo.

Purus gravida quis blandit turpis cursus in.

[SPECIAL CHARACTERS] ¾♠♦↔