Advanced HTML markup

Displaying advanced markup within the rich text editor is possible using the methods described below. Some advanced markup is not allowed for security reasons.

Contents

Accordions

In general, the best way to display accordion-style content is through the Flex List component. If that doesn’t fit content display, you can use the HTML details/summary element in rich-text:

Showing use of HTML details/summary elements to create accordion-like content

Accordion-like content created with HTML details/summary elements

Use the following markup as a model:

<details>
  <summary>Item 1</summary>
  Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor.
</details>

<details>
  <summary>Item 2</summary>
  Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor.
</details>

Inner Rail

To display a text block embedded within other paragraph text, use the “Inner Rail” style. Images placed inside an Inner Rail will fill 100% of the width of the Inner Rail and not extend beyond it.

An Inner Rail example with a heading

An Inner Rail example with a heading and floated right

An Inner Rail example without a heading

An Inner Rail example without a heading and floated left

To create an inner rail, switch into the text editor’s “Source” mode, then paste HTML based on the following examples within existing text.

Floating an inner rail to the left (default):

<aside class="inner-rail">
<h3>Inner rail with title</h3>
This is inner rail text. Neque porro quisquam est, qui dolorem ipsum quia dolor amet.</aside>

An inner rail floated left without a heading:

<aside class="inner-rail">
This is inner rail text. Neque porro quisquam est, qui dolorem ipsum quia dolor amet.</aside>

Floating an inner rail to the right:

<aside class="inner-rail right">
<h3>Inner rail with title</h3>
This is inner rail text. Neque porro quisquam est, qui dolorem ipsum quia dolor amet.</aside>

Styling Tables

HTML tables should include the <th> element to add a table header to meet accessibility standards and leverage the Tablesaw library. This library will:

  • apply basic CSS styling to the table

  • cause the table to display the full width of its containing HTML element

  • make the table content stack on devices with smaller screens.

To add a table header row to a table:

  1. Create the table using the table icon on the rich text editor toolbar.

  2. Click any table cell to reveal a popup for table editing. Options include adding/deleting rows or columns, merging or splitting cells, and adding or removing the table caption.

  3. To add a header row, click the top table row to reveal the option for adding a “Header row” as shown below.

  4. To add borders to the table, select the table and choose a border option in the “Styles” dropdown for adding a table border. (Learn more about Using the Styles dropdown menu.)

Screenshot showing where the option is for adding a table header row to a table.

Note

Use the <th> element in your HTML tables so people using screen readers can have the row and column headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells, so the reader doesn’t lose context.