Use typography to present your design and content as clearly and efficiently as possible.
Too many type sizes and styles at once can spoil any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.
Below you can view various demos with example markup.
The Typography component makes it easy to apply a default set of font weights and sizes in your application.
<.typography variant="h1">
h1. Heading
</.typography>
<.typography variant="h2">
h2. Heading
</.typography>
<.typography variant="h3">
h3. Heading
</.typography>
<.typography variant="h4">
h4. Heading
</.typography>
<.typography variant="p">
p. Body
</.typography>
p. body
The Typography component makes it easy to switch styles to specific html elements.
<.typography element="p" variant="h1">
p. body
</.typography>
<.typography element="h1" variant="p">
h1. Heading
</.typography>
p. body
The Typography component makes it easy to apply a default set of font weights and sizes in your application.
<.typography align="left" variant="h2">
Left Alignment
</.typography>
<.typography align="center" variant="h2">
Center Alignment
</.typography>
<.typography align="right" variant="h2">
Right Alignment
</.typography>
The Typography component makes it easy to apply a default set of font weights and sizes in your application.
<.typography color="primary" variant="h1">
Primary
</.typography>
<.typography color="secondary" variant="h2">
Secondary
</.typography>
<.typography color="success" variant="h3">
Success
</.typography>
<.typography color="danger" variant="h4">
Danger
</.typography>
<.typography color="warning" variant="p">
Warning
</.typography>
<.typography color="info" variant="p">
Info
</.typography>
Warning
Info
The Typography component makes it easy to apply a default set of font weights and sizes in your application.
<.typography margin={true}>
With Margin (default)
</.typography>
<.typography margin={false}>
Without Margin
</.typography>
With Margin (default)
Without Margin
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Alert
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| align | :center | :inherit | :justify | :left | :right | :inherit | Set the text-align on the component. |
| color | any framework-provided color | :slate | The text color to use. |
| element | Any HTML Element | :p | HTML element to use. |
| extend_class | string | Adds additional classes. | |
| margin | bool | true | If true, the text will have margin. |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| variant | :h1 | :h2 | :h3 | :h4 | :p | :p | The links to use. |