Automatic spacing
Use component classes to space reset automatically on :first-child
and :last-child
.
Syntax | Mixin | Variants | Description | |
---|---|---|---|---|
Utility | .xt-mt-auto | xt-mt-auto | responsive | Reset margin top on :first-child |
Utility | .xt-mb-auto | xt-mb-auto | responsive | Reset margin bottom on :last-child |
Utility | .xt-my-auto | xt-my-auto | responsive | Reset margin top on :first-child and bottom on :last-child |
Variant
Use Tailwind CSS to assign styles (e.g. text-color, text-opacity).
Text styles on parent elements are applied when inerithed.
See link variant to style links.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Headers
You can use headers classes or tags with customizable styles.
To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Tags
h1...h6
are automatically styled when they don't have[class]
. You can customize components check xtendui/src/typography.css.js for default styles.
Syntax | Mixin | Variants | Description | |
---|---|---|---|---|
Utility | h1 or .xt-h1 | xt-h1 | responsive | Tag styles |
Utility | h2 or .xt-h2 | xt-h2 | responsive | Tag styles |
Utility | h3 or .xt-h3 | xt-h3 | responsive | Tag styles |
Utility | h4 or .xt-h4 | xt-h4 | responsive | Tag styles |
Utility | h5 or .xt-h5 | xt-h5 | responsive | Tag styles |
Utility | h6 or .xt-h6 | xt-h6 | responsive | Tag styles |
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Use Tailwind CSS to assign custom headers (e.g. font-size, line-height, letter-spacing).
Remember to override text line height with responsive leading.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Paragraph
You can use paragraph classes or tags with customizable styles.
To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Tags
p
are automatically styled when they don't have[class]
. You can customize components check xtendui/src/typography.css.js for default styles.
Syntax | Mixin | Variants | Description | |
---|---|---|---|---|
Utility | p or .xt-p | xt-p | responsive | Tag styles |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Text
Text tags are styles by Tailwind CSS or component classes.
Example highlight text.
Example deleted text.
Example underline text.
Example small text.
Example bold text.
Example italic text.
Example code text
.
Example abbreviation text.
Example Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce maximus ligula turpis, sed sollicitudin tortor rutrum at. Aenean dui leo, volutpat ut tellus sed, vestibulum sollicitudin ante. Duis gravida pretium dapibus. In pulvinar vulputate tellus, nec congue est rutrum id. Integer ut nunc egestas, dapibus leo a, aliquet nisi. Aliquam suscipit hendrerit fermentum. Nullam ex ex, semper sed elementum non, volutpat vel arcu. Mauris sit amet lacinia nisi, eget euismod nunc. Mauris porta lectus a molestie finibus.
"This line rendered as blockquote title.“
This line rendered as blockquote text.
List
You can use lists classes or tags with customizable styles.
To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Tags
ul
andol
are automatically styled when they don't have[class]
. You can customize components check xtendui/src/typography.css.js for default styles.
Syntax | Mixin | Variants | Description | |
---|---|---|---|---|
Utility | ul or .xt-ul | xt-ul | responsive | Tag styles |
Utility | ol or .xt-ol | xt-ol | responsive | Tag styles |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur. Maecenas pulvinar mauris eget pharetra elementum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur. Maecenas pulvinar mauris eget pharetra elementum.
Definition List
You can use definition lists classes or tags with customizable styles.
To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Tags
dl
are automatically styled when they don't have[class]
. You can customize components check xtendui/src/typography.css.js for default styles.
Syntax | Mixin | Variants | Description | |
---|---|---|---|---|
Utility | dl or .xt-dl | xt-dl | responsive | Tag styles |
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis vestibulum sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna aliquam pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at, pretium nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo hendrerit enim, sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis non diam. Ut at rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis leo. Mauris justo elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a aliquet ligula.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in laoreet tellus, nec commodo massa. Aenean ut ex at ex pellentesque efficitur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis vestibulum sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna aliquam pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at, pretium nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo hendrerit enim, sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis non diam. Ut at rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis leo. Mauris justo elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a aliquet ligula.
Other
You can use figure and figcaption and hr classes or tags with customizable styles.
To have custom styles use Tailwind CSS, this styles are for automatically styling blank html tags, for example coming from cms or wysiwyg editors. Tags
figure
andfigcaption
are automatically styled when they don't have[class]
. You can customize components check xtendui/src/typography.css.js for default styles.
Syntax | Mixin | Variants | Description | |
---|---|---|---|---|
Utility | figure or .xt-figure | xt-figure | responsive | Tag styles |
Utility | figcaption or .xt-figcaption | xt-figcaption | responsive | Tag styles |
Utility | hr or .xt-hr | xt-hr | responsive | Tag styles |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit, velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis vitae magna eget, vehicula scelerisque elit.
These are typography's component utilities.
Syntax | Mixin | Variants | Description | |
---|---|---|---|---|
Utility | .xt-text-reset | xt-text-reset | responsive | Reset text styles |
Utility | .xt-lowercase-capitalize | xt-lowercase-capitalize | responsive | Text transform lowercase and capitalize first letter |