Content Formatting: Structure and Layout

On this page, we'll talk about the tools available to help structure a page.

Text Alignment and increase/decrease indent

Use Align Text text alignment icon, Indent indent icon and Outdent outdent icon  to apply formatting as expected.

The Justified justification icon and Center-aligned align center icon text formats are inaccessible and should not be used.

Back to top

Horizontal Rule

The Horizontal Rule horizontal rule icon button can be used to visually separate content sections by inserting a horizontal line into the page. Use these sparingly and never in place of headings.

Back to top

Headings

The Heading dropdown menu allows you to add headings to your content. Headings provide a clear structure that helps readers quickly scan content and improve accessibility for screen readers. Use the heading drop-down (see below) to select the desired heading as follows: 

  • Start the page content with H2
  • Follow a logical hierarchy: Title, H2 (major sections), H3 (subsections), etc.

heading dropdown tool

Best Practices

  • Never skip a heading level
  • Keep headings short and descriptive
  • Never use basic formatting to denote headings (bold, font size, etc.)
  • When in doubt, ask your learning designer!

Back to top

Accordions

Accordions accordion icon are used to save space, reduce scrolling, improve page scannability, and make interfaces less overwhelming. Unfortunately, they also essentially 'hide' content from students and make the content unsearchable unless the row is open, so accordions should be used strategically and sparingly. If you would like to use an accordion, contact your learning designer to set it up. They will make sure it meets current federal accessibility requirements and follows pedagogical best practices. Once the accordion has been created, you will be able to edit it as needed.

Example of an open accordion with content in it. The text inside is irrelevant.
Credit: Drupal, 2026

To edit an Accordion,

  • Place your cursor in the Row Title or Row Content.
  • Edit the field contents as you normally would using the editor.
  • Add or delete a row, click in the text field, and select Insert row above, Insert row below, or Delete row from the pop-up window. 
    insert row menu (above, below, delete)

Note: The pop-up window appears at the top of the accordion, not the row where your cursor is. You need to click the title or row where you want to add or delete, scroll to the top or bottom of the accordion, and make your selection. 

Back to top

Lists

Use the Bulleted List button bulleted list icon and Numbered List button numbered list icon  in the toolbar rather than using numbers and letters from the keyboard. Using the buttons ensures accessibility for screen readers – and it’s much easier to do.

Best Practices

  • Keep list items short and parallel in structure
  • Avoid deeply nested lists (limit to 3 levels)
  • Ask your learning designer about alternative numbering styles if needed

Back to top

Blockquote

Use Blockquote blockquote icon for true quotations only. Do not use Blockquote to add emphasis or for formatting reasons. Talk to your learning designer about accessible and responsive options for adding emphasis, like a text box.

Back to top

Getting help

Your learning designer is your partner in building effective and engaging online courses. Whether it’s navigating Drupal or refining your content, we’re here to assist. Please don’t hesitate to contact us with questions.

Back to top