Style Test page

Paragraph format — full element and style matrix

This body exercises every toolbar item and every Styles-dropdown option enabled for the Paragraph text format, using only tags on that format's allowed_html list.

1. Headings (h2–h6)

Heading 2 — with an id anchor

Heading 3 — with an id anchor

Heading 4 — with an id anchor

Heading 5 — with an id anchor

Heading 6 — with an id anchor

2. Inline formatting

Bold (strong), italic (em), underline (u), deleted (del), italic via the i tag, inline code, and a citation (cite). A soft line break follows this sentence.
This line sits after a <br>.

Special characters from the Special characters button: € £ ¥ © ® ™ § ¶ † ‡ • – — ‘ ’ “ ” ½ ¼ ¾ ° ± × ÷ ≤ ≥ ≠ ≈ ∞ → ← ↑ ↓ α β γ Ω ✓ ✗ ★ ♥ ¡ ¿ ñ é ü ç Å æ ø.

Bare URL for the URL filter to auto-link (truncated at 72 characters): https://www.nipissingu.ca/academics/faculty-arts-and-science/undergradu…

3. Text alignment

Left aligned paragraph — <p class="text-align-left">.

Centre aligned paragraph — <p class="text-align-center">.

Right aligned paragraph — <p class="text-align-right">.

Justified paragraph — <p class="text-align-justify">. Nipissing University is a public university in North Bay, Ontario, offering undergraduate and graduate programs across the Faculty of Arts and Science, the Schulich School of Education, and the Faculty of Applied and Professional Studies, so this sentence is long enough for justification to be visible.

Centred Heading 2 — alignment applied to a heading

4. Horizontal line

A horizontal rule follows.

5. Styles — paragraph styles

Lead text — <p class="lead">. Larger intro copy in the primary colour.

Featured text — <p class="paragraph-alert">. A tinted notice row with a secondary border.

More Link — a "read more" style link with a trailing arrow icon

Book icon — <p class="book">. A row with a book icon in a tinted square. NOTE: this style is currently only defined for the editor (.ck-content), not for the front end (.text-formatted).

Article icon — <p class="article">. A row with a document icon in a tinted square. Same caveat as the Book icon style.

Heading Style

LG-text Style

6. Styles — buttons

Button link (btn btn-default)

Button success (btn btn-success)

Button link pointing at an external URL

7. Styles — heading variants

H3 Sub-head — <h3 class="small">

H4 Sub-head — <h4 class="small">

H2 Watercolour — <h2 class="section-header">

H3 Watercolour — <h3 class="section-header">

H4 Watercolour — <h4 class="section-header">

8. Styles — spacing overrides

The three headings below use "Remove space above"; the three after them use "Remove space after".

H2 Remove space above

H3 Remove space above

H4 Remove space above

H2 Remove space after

Paragraph immediately after an H2 with "Remove space after".

H3 Remove space after

Paragraph immediately after an H3 with "Remove space after".

H4 Remove space after

Paragraph immediately after an H4 with "Remove space after".

9. Lists

Bulleted list, including a nested level (Indent)

• First bullet
• Second bullet, with a nested list
  • Nested bullet one
  • Nested bullet two
    • Third-level bullet
• Third bullet with bold, italic and a link

Bulleted list with a list-style type

• Square marker — <ul type="square">
• Second item

Numbered list with a start index and a list-style type

5. Starts at 5, lower-alpha markers
6. Second item
7. Third item
8. Upper-roman markers
9. Second item

Multi-block list item (multiBlock: true)

1. First paragraph inside a single list item.

   Second paragraph inside the same list item.

2. A list item containing a nested numbered list:
   1. Nested item one
   2. Nested item two

Styles — List unstyled

• No bullet marker and no left padding
• Second item
• Third item

Styles — 2 column list

• Anthropology
• Biology
• Business
• Computer Science
• Criminal Justice
• English Studies
• Geography
• History
• Mathematics
• Nursing
• Psychology
• Sociology

Both list styles combined

• Unstyled and two-column together
• Second item
• Third item
• Fourth item

10. Description list (Source editing)

Description term

Description definition, added through Source editing since there is no toolbar button for <dl>.

Second term

Second definition with bold and a link.

11. Block quote

A block quote with a single paragraph. Nipissing University sits on the traditional territory of the Anishinaabeg.

A block quote with a cite attribute and two paragraphs.

The second paragraph, closing with an inline citation — Nipissing University.

12. Tables

Default table with caption, header row, footer row and merged cells

Styles — Borderless table

Styles — Striped table

Styles — Blue Heading table

All three table styles combined

13. Code block

$body = $paragraph->get('field_text_body')->first();
$rendered = check_markup($body->value, $body->format);

.text-formatted a.btn.btn-success {
  background-color: var(--secondary-500);
}

Plain text code block — no syntax highlighting.

14. Media embed (Drupal media)

An image media entity embedded with a caption and centre alignment. The Paragraph format restricts embeds to image media rendered in the Thumbnail view mode.

The same media, right aligned and without a caption:

15. Entity embed (Node)

A node embedded with the "Node - title, summary, link" button, rendered in the Search index view mode.

16. Links

An internal link created with Linkit: Headings test page.

An external link: About Nipissing University. The nofollow filter is enabled for this format, so rendered external links should carry rel="nofollow".

A link on a fragment: back to the top of this section.