6.2 KiB
6.2 KiB
| extends | title |
|---|---|
| _layouts.documentation | Style & Decoration |
Text Style & Decoration
Utilities for controlling the style of text.
@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => true, 'hover' => true, 'focus' => false ])
@include('_partials.work-in-progress')
| Class | Properties | Description |
|---|---|---|
| .italic | font-style: italic; | Italicizes the text within an element. |
| .roman | font-style: normal; | Sets the text to roman (disables italics) within an element. |
| .uppercase | text-transform: uppercase; | Makes all text uppercase within an element. |
| .lowercase | text-transform: lowercase; | Makes all text lowercase within an element. |
| .capitalize | text-transform: capitalize; | Capitalizes the text within an element. |
| .normal-case | text-transform: none; | Disables any text transformations previously applied to an element. |
| .underline | text-decoration: underline; | Underlines the text within an element. |
| .line-through | text-decoration: line-through; | Adds a line through the text within an element. |
| .no-underline | text-decoration: none; | Disables any text decorations previously applied to an element. |
| .antialiased |
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; |
Set the font smoothing of an element to antialiased. |
| .subpixel-antialiased |
-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; |
Set the font smoothing of an element to subpixel antialiasing (the default). |
Hover
In addition to the standard responsive variations, text style utilties also come in hover: variations that apply the given text style on hover.
@component('_partials.code-sample', ['class' => 'text-center']) Link @endcomponent
Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the hover: prefix.
<a href="#" class="... md:no-underline md:hover:underline ...">Link</a>