Longform Heading
Longform headings provide a full-width headline, summary, and byline for use in immersive stories.
This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template
Examples and Code
Section titled “Examples and Code”
Open Full Example
<div class="longform-heading">
<div class="longform-heading__background"><img src="/test-image-background.png" alt="Test Image" /></div>
<h1 class="longform-heading__title">Longform Title</h1>
<div class="longform-heading__author">By Firstname Lastname</div>
<div class="longform-heading__summary">This is the longform summary paragraph.</div>
</div>Guidance
Section titled “Guidance”Usage Guidance
Section titled “Usage Guidance”- Use at the start of immersive stories
- Don’t use mid-page: This component is intended for the lead-in for a story.
- Don’t use for font-styling: Fonts should be styles using the typography utility classes.
- Don’t use on non-full-width pages: These styles are intended to go full width, using on pages with a sidebar will result in awkward design.
Accessibility Guidance
Section titled “Accessibility Guidance”- Ensure Text Contrast: If you are using a background image, ensure the text over it has proper contrast.
- Ensure Proper Heading Levels: Longform headings use H1 level headings in the template defaults. Ensure this is the correct heading level to use when adding them to the page, and adjust as needed.
Elements
Section titled “Elements”| Element | Description | Usage | Required | Multiple |
|---|---|---|---|---|
| Background | A background image for the section | Use this to give texture to the heading | No | No |
| Title | The title of the story | This should be the H1 and match the page title | Yes | No |
| Author | The story’s author | Use to provide attribution to the story | No | No |
| Summary | The story’s teaser | Keep to 3-4 sentences | No | No |