Typography

The Typography components provide a set of text elements for your UI. These components are designed to be used in conjunction with other components to create a consistent and accessible design system.

Since aura is designed to be a application ui library, it does not provide a lot of text variants. This allows you to create a more consistent design system by using the same text elements throughout your application.

Attributes

aura:h1 - aura:h4
- align - The text alignment. Can be left, center, right, or justify.
aura:p
- align - The text alignment. Can be left, center, right, or justify.
- color - The text color. Can be gray, muted, red, yellow, green, blue, indigo, purple, or pink.
- weight - The text weight. Can be bold, medium, or light.
All components
- class - Additional classes to apply to the element.
- text - The text content.
- slot - The slot to place the content in if text is not provided.

Basic Usage

The components, when placed inside a container, will automatically space themselves vertically. This allows you to create a consistent vertical rhythm in your design.

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph

Copy to clipboard

<aura:h1 text="Heading 1" />
<aura:h2 text="Heading 2" />
<aura:h3 text="Heading 3" />
<aura:h4 text="Heading 4" />
<aura:p text="Paragraph" />

Paragraph styles

The paragraph component provides a set of text styles that can be used to create a consistent design system. These styles can be used to create a consistent visual hierarchy in your design.

Weight

The paragraph component provides three weight variants: bold, medium, and light. These variants can be used to create a visual hierarchy in your design.

paragraph bold

paragraph medium (default)

paragraph light

Copy to clipboard

<aura:p bold text="bold" />
<aura:p medium text="medium" />
<aura:p light text="light" />

Color

The paragraph component provides a set of color variants that can be used to create a consistent design system. These variants can be used to create a visual hierarchy in your design.

paragraph gray (default)

paragraph muted

paragraph red

paragraph yellow

paragraph green

paragraph blue

paragraph indigo

paragraph purple

paragraph pink

Copy to clipboard

<aura:p gray text="gray" />
<aura:p muted text="muted" />
<aura:p red text="red" />
<aura:p yellow text="yellow" />
<aura:p green text="green" />
<aura:p blue text="blue" />
<aura:p indigo text="indigo" />
<aura:p purple text="purple" />
<aura:p pink text="pink" />

Alignment

To align typography elements, you can use the left, center, right, and justify attributes.

left aligned

center aligned

right aligned

This is a very long paragraph that will be justified. This is a very long paragraph that will be justified. This is a very long paragraph that will be justified.

Copy to clipboard

<aura:p left text="left aligned" />
<aura:p center text="center aligned" />
<aura:p right text="right aligned" />
<aura:p justify text="justified..."/>

Home