Displays preformatted text
| 1 |
<pre>This is preformatted text</pre> |
Import
@import "@webtui/css/components/pre.css";
Usage
<pre>This is preformatted text</pre>
Examples
Sizing
| 1 |
<pre size-="small">Small pre</pre> |
| 2 |
<pre>Default pre</pre> |
| 3 |
<pre size-="large">Large pre</pre> |
| 1 |
body { |
| 2 |
display: flex; |
| 3 |
flex-direction: column; |
| 4 |
gap: 1lh; |
| 5 |
} |
Reference
Properties
--pre-background: Background color of the pre element
#my-pre {
--pre-background: var(--background1);
}
Extending
To extend the Pre stylesheet, define a CSS rule on the components layer
@layer components {
pre, [is-~="pre"] {
&[size-="thicc"] {
height: 3lh;
padding: 1lh 8ch;
}
/* ... */
}
}
Scope
- All
<pre> elements
- All elements with the
is-~="pre" selector
pre, [is-~="pre"] { /* ... */ }