## Overview

`sd-display` – Used to provide larger text sizes that are not used as headlines.

## API

### Examples

Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:

- sd-display/size
- sd-display/inverted

## Guidelines

### Use Cases

- Provide an oversized introductory line without displacing the headline’s structural role.
- Present short marketing slogans, taglines, or key promotional messages.

### Rules

### Hierarchy and Content

- Don’t use display text to replace actual headings, which remain the primary tools for structuring and labeling content.
- Keep display text short—often a line or two—so that large formatting remains readable and doesn’t overwhelm the layout.

### Background and Styling

- Use with light background options of white, neutral-100 and primary-100 or if inverted with background primary.
- Make use of the different sizes for a versatile styling of text elements.

### Accessibility

- Verify that the heading hierarchy is logical and consistent throughout the page for better accessibility.
- Retain proper heading tags (<code>&lt;h1&gt;, &lt;h2&gt;</code>) for page structure. Large display text should not replace actual headings to ensure screen readers can navigate content effectively.

### Related Templates

- mark--docs

Use the templates tool (with `template` arg) to retrieve the full code for any of these templates.