1.7 KiB
| extends | title | description | features | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| _layouts.documentation | Text Sizing | Utilities for controlling the text size of an element. |
|
@include('_partials.work-in-progress')
@include('_partials.class-table', [
'rows' => [
[
'.text-xs',
'font-size: .75rem;',
'Set the text size to .75rem (12px).',
],
[
'.text-sm',
'font-size: .875rem;',
'Set the text size to .875rem (14px).',
],
[
'.text-base',
'font-size: 1rem;',
'Set the text size to 1rem (16px).',
],
[
'.text-lg',
'font-size: 1.125rem;',
'Set the text size to 1.125rem (18px).',
],
[
'.text-xl',
'font-size: 1.25rem;',
'Set the text size to 1.25rem (20px).',
],
[
'.text-2xl',
'font-size: 1.5rem;',
'Set the text size to 1.5rem (24px).',
],
[
'.text-3xl',
'font-size: 1.875rem;',
'Set the text size to 1.875rem (30px).',
],
[
'.text-4xl',
'font-size: 2.25rem;',
'Set the text size to 2.25rem (36px).',
],
[
'.text-5xl',
'font-size: 3rem;',
'Set the text size to 3rem (48px).',
],
]
])
Customizing
@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'text sizing', 'property' => 'textSizes', ], 'variants' => [ 'responsive', ], ])