Pre

Displays preformatted text

<pre>This is preformatted text</pre>

Import

@import "@webtui/css/components/pre.css";

Usage

<pre>This is preformatted text</pre>

Examples

Sizing

<pre size-="small">Small pre</pre>
<pre>Default pre</pre>
<pre size-="large">Large pre</pre>

body {
  display: flex;
  flex-direction: column;
  gap: 1lh;
}

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"] { /* ... */ }