# Envision Docs

> Documentation for the Envision UI framework.

## Colors – Basic colors
URL: https://envisionui.io/colors/basic-colors/
Description: The “Basic colors” section defines general colors for backgrounds, text, links, and borders.

There are a few general colors that are used for
larger sections or less defined parts of components.
For example, `--env-section-background-color`
is used as background color for Modal dialogs.

- `--env-background-color` - Theme/body background color
- `--env-section-background-color` - Used for larger content sections.
- `--env-section-background-color-05`
- `--env-font-color` - Base text color
- `--env-link-font-color` - Base link color
- `--env-link-hover-font-color` - Base link:hover color
- `--env-border-color` - Base border color
- `--env-border-color-05` - Alternative border color

`--env-section-background-color-05` is calculated from `--env-section-background-color`.

`--env-border-color-05` is calculated from `--env-border-color`.

## Accessibility

Font and link colors should have at least a 4.5:1 contrast ratio on `--env-background-color` and `--env-section-background-color`.

Depending on design and usage, it's recommended to try to get at least a 4.5:1 contrast ratio on `--env-section-background-color-05` as well.

## Examples

`--env-background-color` is used outside the centered boxes.

```html
<div class="example-fill example-basic-colors  env-p--xx-large">
   <div
      class="env-ui-section env-border env-border--05 env-p--large env-m-block-end--large"
   >
      <div class="env-text">
         Base text on section background with a border 05 and
         <a href="javascript:void(0)" class="env-link">a link</a>.
      </div>
   </div>
   <div class="env-ui-section-05 env-border env-p--large">
      <div class="env-text">
         Base text on section background 05, standard border and
         <a href="javascript:void(0)" class="env-link">a link</a>.
      </div>
   </div>
</div>
```

## Legacy colors <span class="doc-badge doc-badge--danger">Deprecated</span>

The following colors are deprecated and will be removed.

- env-bg-color--brand
- env-bg-color--success
- env-bg-color--info
- env-bg-color--warning
- env-bg-color--danger
- env-bg-color--hover
- env-bg-color--base
- env-bg-color--darker
- env-bg-color--dark
- env-bg-color--normal
- env-bg-color--light
- env-bg-color--lighter
- env-bg-color--lightest
- env-color--brand
- env-color--success
- env-color--info
- env-color--warning
- env-color--danger
- env-color--hover
- env-color--base
- env-color--darker
- env-color--dark
- env-color--normal
- env-color--light
- env-color--lighter
- env-color--lightest
- env-border-color-light

---

## Colors – Block colors
URL: https://envisionui.io/colors/block-colors/
Description: The “Block colors” section offers preset color combinations for large content areas.

Preset color combinations, use for larger blocks of content.

```html
<div class="example-grid" id="blocks">
   <div class="example-grid__col example-grid__col--33">
      <div class="env-block env-block--border">
         <div class="example-variant">
            <h2 class="env-text-h4">Default</h2>
            <p>
               Bacon <a href="#blocks" class="env-link">ipsum</a> dolor
               <a href="#blocks">amet beef</a> cupim brisket pork
               <a href="#blocks" class="env-link-secondary">turducken</a>.
            </p>
         </div>
      </div>
   </div>
   <div class="example-grid__col example-grid__col--33">
      <div class="env-block-primary env-block-primary--border">
         <div class="example-variant">
            <h2 class="env-text-h4">Primary</h2>
            <p>
               Bacon <a href="#blocks" class="env-link">ipsum</a> dolor
               <a href="#blocks">amet beef</a> cupim brisket pork
               <a href="#blocks" class="env-link-secondary">turducken</a>.
            </p>
         </div>
      </div>
   </div>
   <div class="example-grid__col example-grid__col--33">
      <div class="env-block-secondary env-block-secondary--border">
         <div class="example-variant">
            <h2 class="env-text-h4">Secondary</h2>
            <p>
               Bacon <span href="#blocks" class="env-link">ipsum</span> dolor
               <a href="#blocks">amet beef</a> cupim brisket pork
               <a href="#blocks" class="env-link-secondary">turducken</a>.
            </p>
         </div>
      </div>
   </div>
</div>
```

---

## Colors – Brand colors
URL: https://envisionui.io/colors/brand-colors/
Description: The “Brand Colors” section defines primary brand hues with contrast-friendly shades for accessibility.

An Envision theme uses one base brand color and one matching contrast color.

- **Brand color** is the primary color for the theme.
- **Brand contrast color** is the text/icon color used on top of the brand color.
- From the base brand color, Envision generates a palette of lighter and darker variants.
- Each palette color has a matching contrast color verified against **WCAG 2 AA**.

[The default theme](/colors/brand-colors/#default-brand-color-palette) uses a neutral brand color.

## Palette rules

The brand palette follows these rules:

- `--env-ui-color-brand` is the base brand color.
- `--env-ui-color-brand-{n}` are generated variants of the base brand color.
- The scale is ordered from lighter to darker variants in a normal theme.
- Each palette value has a matching contrast variable that meets **WCAG 2 AA** requirements.

In dark themes, where the font color is lighter than the section background color, the scale is reversed:

- `05` is the darkest variant
- `100` is the lightest variant

## Usage

Use the generated brand palette (CSS variables or utility classes) for components and UI states that should follow the active theme branding.

Typical branded usage includes:

- buttons
- badges
- dropdown triggers
- popovers
- progress indicators
- highlighted UI sections

## Example branding of components

The following examples are visual demonstrations and do not define the color system.

<div class="env-theme-example-brand">

<button type="button" class="env-button env-button--brand">Brand button</button>

<div class="env-m-block--large">
<span class="env-badge env-badge--brand">Badge</span>
</div>

<div id="example4" class="env-dropdown">
   <button
      id="example4-button"
      class="env-button env-button--brand env-button--icon env-button--icon-small env-button--icon-after"
      aria-expanded="false"
      aria-haspopup="true"
      data-dropdown
      type="button"
      data-target="#example4"
   >
      Dropdown
      <svg class="env-icon">
         <use href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
   </button>
   <ul
      class="env-dropdown__menu env-dropdown__menu--large"
      aria-labelledby="example4-button"
   >
      <li>
         <a href="#" class="env-dropdown__item">Action</a>
      </li>
      <li>
         <a href="#" class="env-dropdown__item">Properties</a>
      </li>
      <li>
         <a href="#" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>

<div class="env-theme-example-brand">
<div class="env-popover example-static-popover env-m-block--large" data-popper-placement="top">
   <div class="env-popover__arrow"></div>
   <div class="env-popover__content">
      <h2 class="env-ui-text-sectionheading env-popover__header__title">Section heading</h2>
      <img
         class="env-card__image env-profile-image env-profile-image--small"
         src="https://envisionui.io/placeholders/profile/200x200/01.webp"
         alt="Example profile image"
      />
      <h2 class="env-ui-text-subheading">Subheading</h2>
      <p class="env-ui-text-caption">Caption</p>
   </div>
</div>
</div>

<div class="example-progress">
   <p class="env-ui-text-sectionheading env-m-block-end--large">
      Section heading
   </p>
   <div class="env-progress-poll" title="Number of votes: 5">
      <div
         class="env-progress-poll__bar"
         role="progressbar"
         aria-label="Example progress bar"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="10"
         style="width: 10%;"
      ></div>
      <div class="env-progress-poll__label">Branded poll label 1</div>
      <div class="env-progress-poll__value">10 %</div>
   </div>
   <div
      class="env-progress-poll env-progress-poll--highlighted"
      title="Number of votes: 29"
   >
      <div
         class="env-progress-poll__bar"
         role="progressbar"
         aria-label="Example progress bar"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="58"
         style="width: 58%;"
      ></div>
      <div class="env-progress-poll__label">Branded poll label 2 (highlighted)</div>
      <div class="env-progress-poll__value">60 %</div>
   </div>
   <div class="env-progress-poll" title="Number of votes: 16">
      <div
         class="env-progress-poll__bar"
         role="progressbar"
         aria-label="Example progress bar"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="32"
         style="width: 32%;"
      ></div>
      <div class="env-progress-poll__label">
         Branded poll label 3
         <svg
            xmlns="http://www.w3.org/2000/svg"
            class="env-progress-poll__icon"
         >
            <title>Your vote</title>
            <use
               href="/sitevision/envision-icons.svg#icon-check-done"
            ></use>
         </svg>
      </div>
      <div class="env-progress-poll__value">30 %</div>
   </div>
</div>

<div class="example-brand-color-palette">

<h3 class="doc-heading-3">Example brand color palette</h3>

<ol class="example-brand-color-list">
   <li class="example-section-brand"><div>Brand color</div></li>
   <li class="example-section-brand-05"><div>Brand 05</div></li>
   <li class="example-section-brand-10"><div>Brand 10</div></li>
   <li class="example-section-brand-15"><div>Brand 15</div></li>
   <li class="example-section-brand-20"><div>Brand 20</div></li>
   <li class="example-section-brand-25"><div>Brand 25</div></li>
   <li class="example-section-brand-30"><div>Brand 30</div></li>
   <li class="example-section-brand-35"><div>Brand 35</div></li>
   <li class="example-section-brand-40"><div>Brand 40</div></li>
   <li class="example-section-brand-45"><div>Brand 45</div></li>
   <li class="example-section-brand-50"><div>Brand 50</div></li>
   <li class="example-section-brand-55"><div>Brand 55</div></li>
   <li class="example-section-brand-60"><div>Brand 60</div></li>
   <li class="example-section-brand-65"><div>Brand 65</div></li>
   <li class="example-section-brand-70"><div>Brand 70</div></li>
   <li class="example-section-brand-75"><div>Brand 75</div></li>
   <li class="example-section-brand-80"><div>Brand 80</div></li>
   <li class="example-section-brand-85"><div>Brand 85</div></li>
   <li class="example-section-brand-90"><div>Brand 90</div></li>
   <li class="example-section-brand-95"><div>Brand 95</div></li>
   <li class="example-section-brand-100"><div>Brand 100</div></li>
</ol>

</div>

</div>

## Default brand color palette

The default theme uses this neutral brand palette.

<ol class="example-brand-color-list env-m-block--large env-theme-default-brand">
   <li class="example-section-brand"><div>Brand color</div></li>
   <li class="example-section-brand-05"><div>Brand 05</div></li>
   <li class="example-section-brand-10"><div>Brand 10</div></li>
   <li class="example-section-brand-15"><div>Brand 15</div></li>
   <li class="example-section-brand-20"><div>Brand 20</div></li>
   <li class="example-section-brand-25"><div>Brand 25</div></li>
   <li class="example-section-brand-30"><div>Brand 30</div></li>
   <li class="example-section-brand-35"><div>Brand 35</div></li>
   <li class="example-section-brand-40"><div>Brand 40</div></li>
   <li class="example-section-brand-45"><div>Brand 45</div></li>
   <li class="example-section-brand-50"><div>Brand 50</div></li>
   <li class="example-section-brand-55"><div>Brand 55</div></li>
   <li class="example-section-brand-60"><div>Brand 60</div></li>
   <li class="example-section-brand-65"><div>Brand 65</div></li>
   <li class="example-section-brand-70"><div>Brand 70</div></li>
   <li class="example-section-brand-75"><div>Brand 75</div></li>
   <li class="example-section-brand-80"><div>Brand 80</div></li>
   <li class="example-section-brand-85"><div>Brand 85</div></li>
   <li class="example-section-brand-90"><div>Brand 90</div></li>
   <li class="example-section-brand-95"><div>Brand 95</div></li>
   <li class="example-section-brand-100"><div>Brand 100</div></li>
</ol>

## Brand color variables

The following CSS variables are available:

### Base colors

- `--env-ui-color-brand`  
  Primary brand color

- `--env-ui-color-brand-contrast`  
  Text/icon color used on top of the brand color

- `--env-ui-color-brand-dark`  
  A predefined darker variant of the brand color, separate from the numeric scale, typically used for hover and emphasis states

### Generated palette

The brand palette is available as a numeric scale:

- `--env-ui-color-brand-{n}`
- `--env-ui-color-brand-{n}-contrast`

Where `{n}` is one of:

`05`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `45`, `50`, `55`, `60`, `65`, `70`, `75`, `80`, `85`, `90`, `95`, `100`

Each `{n}` value defines a color and its corresponding contrast color.

### Notes

- Lower values (`05`) are lighter variants
- Higher values (`100`) are darker variants
- Each `{n}` value has a matching `-contrast` color that meets WCAG 2 AA

---

## Colors – Element colors
URL: https://envisionui.io/colors/element-colors/
Description: The “Element Colors” section defines specific shades for buttons, icons, and interactive elements.

Element colors are used for elements and components. See usage examples below.

<div class="example-grid">
  <div class="example-grid__col">
    <div class="example-element-color example-element-color--default">
      <p>Default</p>
      <div class="example-element-color-variants">
        <div class="example-element-color-variant example-element-color-variant--light">Light</div>
        <div class="example-element-color-variant example-element-color-variant--dark">Dark</div>
      </div>
    </div>
  </div>
  <div class="example-grid__col">
    <div class="example-element-color example-element-color--primary">
      <p>Primary</p>
      <div class="example-element-color-variants">
        <div class="example-element-color-variant example-element-color-variant--light">Light</div>
        <div class="example-element-color-variant example-element-color-variant--dark">Dark</div>
      </div>
    </div>
  </div>
  <div class="example-grid__col">
    <div class="example-element-color example-element-color--secondary">
      <p>Secondary</p>
      <div class="example-element-color-variants">
        <div class="example-element-color-variant example-element-color-variant--light">Light</div>
        <div class="example-element-color-variant example-element-color-variant--dark">Dark</div>
      </div>
    </div>
  </div>
  <div class="example-grid__col">
    <div class="example-element-color example-element-color--success">
      <p>Success</p>
      <div class="example-element-color-variants">
        <div class="example-element-color-variant example-element-color-variant--light">Light</div>
        <div class="example-element-color-variant example-element-color-variant--dark">Dark</div>
      </div>
    </div>
  </div>
  <div class="example-grid__col">
    <div class="example-element-color example-element-color--warning">
      <p>Warning</p>
      <div class="example-element-color-variants">
        <div class="example-element-color-variant example-element-color-variant--light">Light</div>
        <div class="example-element-color-variant example-element-color-variant--dark">Dark</div>
      </div>
    </div>
  </div>
  <div class="example-grid__col">
    <div class="example-element-color example-element-color--danger">
      <p>Danger</p>
      <div class="example-element-color-variants">
        <div class="example-element-color-variant example-element-color-variant--light">Light</div>
        <div class="example-element-color-variant example-element-color-variant--dark">Dark</div>
      </div>
    </div>
  </div>
  <div class="example-grid__col">
    <div class="example-element-color example-element-color--info">
      <p>Info</p>
      <div class="example-element-color-variants">
        <div class="example-element-color-variant example-element-color-variant--light">Light</div>
        <div class="example-element-color-variant example-element-color-variant--dark">Dark</div>
      </div>
    </div>
  </div>
</div>
<div class="example-grid">
  <div class="example-grid__col example-grid__col--100">
    <div class="example-grid__box example-grid">
      <div class="example-element-header example-grid__col example-grid__col--100">
        <h2 class="doc-heading-2">Primary & default</h2>
        <p>All elements use the same color setting.</p>
      </div>
      <div class="example-grid__col example-grid__col--50">
        <div class="example-element">
          <div class="example-element-label">Buttons:</div>
          <button type="button" class="env-button">Default</button>
          <button type="button" class="env-button env-button--primary">
            Primary
          </button>
          <button
            type="button"
            class="env-button env-button--primary env-button--ghost"
          >
            Ghost
          </button>
          <br />
        </div>
        <div class="example-element">
          <div class="example-element-label">Badge:</div>
          <span class="env-badge">Primary</span>
        </div>
        <div class="example-element">
          <div class="example-element-label">Radio button:</div>
          <div class="env-form-control">
            <input class="env-radio" id="radio1" type="radio" name="radios" checked />
            <label for="radio1" class="env-form-label">Alternative</label>
          </div>
        </div>
        <div class="example-element">
          <div class="example-element-label">Checkbox:</div>
         <div class="env-form-control">
            <input id="checkbox1" class="env-checkbox" type="checkbox" checked name="options" />
            <label for="checkbox1" class="env-form-label">Checked</label>
          </div>
        </div>
        <div class="example-element">
         <div class="example-element-label">Switch:</div>
<div class="env-form-control">
            <input id="switch1" class="env-switch" type="checkbox" checked name="options" />
            <label for="switch1" class="env-form-label">On</label>
          </div>
        </div>
      </div>
      <div class="example-grid__col example-grid__col--50">
        <div class="example-element">
          <div class="example-element-label">Menu:</div>
          <nav>
            <ul class="env-nav env-nav--menubar env-nav--fill">
            <li class="env-nav__item">
              <a class="env-nav__link" href="javascript:void(0)">Item</a>
            </li>
            <li class="env-nav__item">
              <a class="env-nav__link env-nav__link--active" href="javascript:void(0)">Item</a>
            </li>
            <li class="env-nav__item">
              <a class="env-nav__link" href="javascript:void(0)">Item</a>
            </li>
          </ul>
         </nav>
        </div>
        <div class="example-element">
          <div class="example-element-label">Pagination:</div>
          <nav aria-label="Pagination example">
            <ul class="env-pagination">
              <li class="env-pagination__item">
                <a class="env-pagination__link" href="javascript:void(0)">Previous</a>
              </li>
              <li class="env-pagination__item">
                <a class="env-pagination__link" href="javascript:void(0)">1</a>
              </li>
              <li class="env-pagination__item">
                <a class="env-pagination__link" aria-current="true" href="javascript:void(0)"
                >2 <span class="env-assistive-text">Current</span></a
                >
              </li>
              <li class="env-pagination__item">
                <a class="env-pagination__link" href="javascript:void(0)">3</a>
              </li>
              <li class="env-pagination__item">
                <a class="env-pagination__link" href="javascript:void(0)">Next</a>
              </li>
            </ul>
          </nav>
        </div>
        <div class="example-element">
          <div class="example-element-label">Progress bar:</div>
          <div class="example-progress">
            <div class="env-progress">
              <div
                class="env-progress__bar"
                role="progressbar"
                aria-label="Example progress bar"
                style="width: 25%"
                aria-valuenow="25"
                aria-valuemin="0"
                aria-valuemax="100"
              >
                25%
              </div>
            </div>
          </div>
        </div>
        <div class="example-element">
          <div class="example-element-label">Tabs:</div>
          <div class="env-tabs example-tabs" role="presentation">
            <ul
              class="env-tabs__nav env-tabs__nav--border-bottom"
              role="tablist"
            >
              <li class="env-tabs__item" role="presentation">
                <a
                  id="tab1"
                  class="env-tabs__link env-tabs__link--active"
                  href="#panel1"
                  role="tab"
                  aria-controls="panel1"
                  aria-selected="true"
                  tabindex="0"
                >Tab 1</a
                >
              </li>
              <li class="env-tabs__item" role="presentation">
                <a
                  id="tab2"
                  class="env-tabs__link"
                  href="#panel2"
                  role="tab"
                  aria-controls="panel2"
                  aria-selected="false"
                  tabindex="0"
                >Tab 2</a
                >
              </li>
            </ul>
            <div id="panel1" role="tabpanel" aria-labelledby="tab1" hidden></div>
            <div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden></div>
          </div>
        </div>
        <div class="example-element example-element--left">
          <div class="example-element-label">Range slider:</div>
             <div class="env-range-slider example-range-slider">
               <div class="env-range-slider__range"></div>
               <div class="env-range-slider__handle" tabindex="0"></div>
               <div class="env-range-slider__handle" tabindex="0"></div>
               <div class="env-range-slider__values">
                  <span
                     class="env-range-slider__values__value env-range-slider__values__value--from env-text"
                  ></span>
                  <span class="env-range-slider__values__separator env-text">-</span>
                  <span class="env-range-slider__values__value env-text"></span>
               </div>
            </div>
        </div>
      </div>
    </div>
  </div>
  <div class="example-grid__col example-grid__col--50">
    <div class="example-grid__box">
      <div class="example-element-header">
        <h2 class="doc-heading-2">Success</h2>
      </div>
      <div class="example-element">
        <div class="example-element-label">Button:</div>
        <button type="button" class="env-button env-button--success">
          Success
        </button>
      </div>
      <div class="example-element">
        <div class="example-element-label">Badge:</div>
        <span class="env-badge env-badge--success">Success</span>
      </div>
      <div class="example-element">
        <div class="example-element-label">Alert:</div>
        <div class="env-alert env-alert--success" role="alert">
          <strong>Hello!</strong> this is successful alert
        </div>
      </div>
    </div>
  </div>
  <div class="example-grid__col example-grid__col--50">
    <div class="example-grid__box">
      <div class="example-element-header">
        <h2 class="doc-heading-2">Warning</h2>
      </div>
      <div class="example-element">
        <div class="example-element-label">Button:</div>
        <button type="button" class="env-button env-button--warning">
          Warning
        </button>
      </div>
      <div class="example-element">
        <div class="example-element-label">Badge:</div>
        <span class="env-badge env-badge--warning">Warning</span>
      </div>
      <div class="example-element">
        <div class="example-element-label">Alert:</div>
        <div class="env-alert env-alert--warning" role="alert">
          <strong>Hello!</strong> this is warning alert
        </div>
      </div>
    </div>
  </div>
  <div class="example-grid__col example-grid__col--50">
    <div class="example-grid__box">
      <div class="example-element-header">
        <h2 class="doc-heading-2">Danger</h2>
      </div>
      <div class="example-element">
        <div class="example-element-label">Button:</div>
        <button type="button" class="env-button env-button--danger">
          Danger
        </button>
      </div>
      <div class="example-element">
        <div class="example-element-label">Badge:</div>
        <span class="env-badge env-badge--danger">Danger</span>
      </div>
      <div class="example-element">
        <div class="example-element-label">Alert:</div>
        <div class="env-alert env-alert--danger" role="alert">
          <strong>Hello!</strong> this is danger alert
        </div>
      </div>
    </div>
  </div>
  <div class="example-grid__col example-grid__col--50">
    <div class="example-grid__box">
      <div class="example-element-header">
        <h2 class="doc-heading-2">Info</h2>
      </div>
      <div class="example-element">
        <div class="example-element-label">Button:</div>
        <button type="button" class="env-button env-button--info">
          Info
        </button>
      </div>
      <div class="example-element">
        <div class="example-element-label">Badge:</div>
        <span class="env-badge env-badge--info">info</span>
      </div>
      <div class="example-element">
        <div class="example-element-label">Alert:</div>
        <div class="env-alert env-alert--info" role="alert">
          <strong>Hello!</strong> this is info alert
        </div>
      </div>
    </div>
  </div>
</div>

---

## Colors – Status colors
URL: https://envisionui.io/colors/status-colors/
Description: The “Status Colors” section provides distinct hues representing success, warnings, errors, and informational states.

Status colors are UI colors that are used to signal a status,
for example if a user is logged in or when new messages have arrived.

Status colors have a main color and a matching contrast color for text.

Status color text should be used when status color is applied to text on section background.

<div class="example-grid">
  <div class="example-grid__col example-grid__col--25">
    <div class="example-ui-color-status example-ui-color-status--neutral">
      <p>Neutral</p>
    </div>
  </div>
  <div class="example-grid__col example-grid__col--25">
    <div class="example-ui-color-status example-ui-color-status--active">
      <p>Active</p>
    </div>
    <p class="example-ui-color-status-text example-ui-color-status-text--active">Active text</p>
  </div>
  <div class="example-grid__col example-grid__col--25">
    <div class="example-ui-color-status example-ui-color-status--attention">
      <p>Attention</p>
    </div>
    <p class="example-ui-color-status-text example-ui-color-status-text--attention">Attention text</p>
  </div>
   <div class="example-grid__col example-grid__col--25">
    <div class="example-ui-color-status example-ui-color-status--error">
      <p>Error</p>
    </div>
    <p class="example-ui-color-status-text example-ui-color-status-text--error">Error text</p>
  </div>
</div>

## Examples of usage

<div class="example-grid">
  <div class="example-grid__col example-grid__col--50">
      <div class="example-grid__box">
         <h3 class="env-ui-text-caption example-ui-color-status-heading">Badge</h3>
         <span class="env-badge env-badge--neutral">8</span>
         <span class="env-badge env-badge--active">Logged in</span>
         <span class="env-badge env-badge--attention">42</span>
         <h3 class="env-ui-text-caption example-ui-color-status-heading">Custom inline SVG decoration</h3>
         <button type="button" class="env-button env-button--large env-button--icon env-button--link">
            Alerts
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="env-icon env-icon--medium" aria-hidden="true">
               <circle cx="20" cy="4" r="4" class="env-icon--attention"></circle>
               <g transform="matrix(1,0,0,1,0,0)"><path d="M12,24c-1.23,0-2.36-.8-2.72-2.04-.12-.4,.11-.81,.51-.93,.4-.11,.81,.11,.93,.51,.21,.71,.95,1.11,1.66,.91,.44-.13,.78-.47,.91-.91,.12-.4,.54-.62,.93-.51,.4,.12,.62,.53,.51,.93-.27,.93-.99,1.65-1.92,1.92-.27,.08-.53,.11-.8,.11Z"></path><path d="M12,3.75c-.41,0-.75-.34-.75-.75V.75c0-.41,.34-.75,.75-.75s.75,.34,.75,.75V3c0,.41-.34,.75-.75,.75Z"></path><path d="M21,19.5H3c-.29,0-.55-.16-.67-.42-.13-.26-.09-.56,.08-.79,0,0,1.34-1.9,1.34-7.79C3.75,5.95,7.45,2.25,12,2.25c.37,0,.74,.02,1.1,.07,.41,.06,.7,.43,.64,.84-.05,.41-.44,.7-.84,.64-.3-.04-.6-.06-.9-.06-3.72,0-6.75,3.03-6.75,6.75,0,3.95-.57,6.26-1.04,7.5h15.5c-.45-1.16-.92-3.26-.96-6.99,0-.41,.33-.75,.74-.76,.42-.03,.75,.33,.76,.74,.06,5.91,1.24,7.19,1.25,7.2,.25,.2,.33,.52,.22,.82-.11,.3-.41,.49-.73,.49Z"></path></g>
            </svg>
         </button>
         <h3 class="env-ui-text-caption example-ui-color-status-heading">Error message</h3>
   <div class="env-form-field env-form-field--error">
   <label for="error" class="env-form-label">Email</label>
   <input
      type="text"
      class="env-form-input"
      id="error"
      value="wrong @address.com"
      aria-describedby="error-feedback"
      >
   <span id="error-feedback" class="env-form-field-help">Please enter a valid email address</span>
</div>
      </div>
   </div>
   <div class="example-grid__col example-grid__col--50">
      <div class="example-grid__box">
         <h3 class="env-ui-text-caption example-ui-color-status-heading">
            Status badge
         </h3>
         <h4 class="env-ui-text-subheading">Lorem Ipsumsson</h4>
         <p class="env-ui-text-caption">
            <span class="env-status-badge env-status-badge--active">Logged in</span>
         </p>
         <h3 class="env-ui-text-caption example-ui-color-status-heading">Status badge on Profile image</h3>
         <div class="env-profile-image env-profile-image--small">
            <img
               src="https://envisionui.io/placeholders/profile/200x200/01.webp"
               alt="Example profile image" />
            <div class="env-status-badge env-status-badge--active">Logged in</div>
         </div>
         <h3 class="env-ui-text-caption example-ui-color-status-heading">Text</h3>
         <p class="env-text env-text--active">Logged in</p>
         <p class="env-text env-text--attention">New message</p>
         <p class="env-text env-text--error">An error occurred</p>
      </div>
   </div>
</div>

Documentation of examples:

- [Status variant Badge](/components/badge/#status-variants)
- [Custom inline SVG decoration](/components/icons/#attention)
- [Status badge](/components/badge/#status-badge)
- [Status badge on Profile image](/components/profile-image/#status-badge-in-responsive-size-profile-image)
- [Form error message](/forms/form-elements/#validation-error)
- [Text status colors](/typography/basic-text/#status-colors)

---

## Components – Accordion
URL: https://envisionui.io/components/accordion/
Description: The Accordion component toggles the visibility of content sections, allowing users to expand or collapse them.

## Overview

```html
<div id="accordionExample">
   <h2 class="env-ui-text-sectionheading" id="heading1">
      <a
         class="env-link"
         href="#container1"
         aria-expanded="true"
         aria-controls="container1"
         data-env-accordion
      >
         Example 1
      </a>
   </h2>
   <div
      id="container1"
      class="env-accordion env-accordion--show"
      aria-labelledby="heading1"
      data-parent="#accordionExample"
   >
      <p class="env-text-body-02">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
         lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed
         purus quam. Proin eu tincidunt metus.
      </p>
   </div>

   <h2 class="env-ui-text-sectionheading" id="heading2">
      <a
         class="env-link"
         href="#container2"
         aria-expanded="false"
         aria-controls="container2"
         data-env-accordion
      >
         Example 2
      </a>
   </h2>
   <div
      id="container2"
      class="env-accordion"
      aria-labelledby="heading2"
      data-parent="#accordionExample"
   >
      <p class="env-text-body-02">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
         lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed
         purus quam. Proin eu tincidunt metus.
      </p>
   </div>

   <h2 class="env-ui-text-sectionheading" id="heading3">
      <a
         class="env-link"
         href="#container3"
         aria-expanded="false"
         aria-controls="container3"
         data-env-accordion
      >
         Example 3
      </a>
   </h2>
   <div
      id="container3"
      class="env-accordion"
      aria-labelledby="heading3"
      data-parent="#accordionExample"
   >
      <p class="env-text-body-02">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
         lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed
         purus quam. Proin eu tincidunt metus.
      </p>
   </div>
</div>
```

## Methods

You can `show`, `hide` and `toggle` on available collapsible elements.

```javascript
envision.accordion('#container1').then(function (accordions) {
   accordions[0].show();
});
```

```javascript
envision.accordion('#container1').then(function (accordions) {
   accordions[0].hide();
});
```

```javascript
envision.accordion('#container1').then(function (accordions) {
   accordions[0].toggle();
});
```

---

## Components – Alert
URL: https://envisionui.io/components/alert/
Description: The Alert component displays brief, important messages to users, with variations for success, warning, danger, and info alerts.

## Variations

```html
<div class="env-alert env-alert--success" role="alert">
   <strong>Hello!</strong> this is successful alert
   <button
      type="button"
      class="env-alert__close env-button env-button--link env-button--icon env-button--icon-small"
      data-dismiss="alert"
   >
      Close
      <svg class="env-icon env-icon--xx-small">
         <use href="/sitevision/envision-icons.svg#icon-delete"></use>
      </svg>
   </button>
</div>
<div class="env-alert env-alert--warning" role="alert">
   <strong>Hello!</strong> this is warning alert
</div>
<div class="env-alert env-alert--danger" role="alert">
   <strong>Hello!</strong> this is danger alert
</div>
<div class="env-alert env-alert--info" role="alert">
   <strong>Hello!</strong> this is info alert
</div>
```

---

## Components – Badge
URL: https://envisionui.io/components/badge/
Description: Use the Badge component to display small labels for status, notifications, or event counts.

## Overview

```html
<h1 class="env-text-heading-01">Hello <span class="env-badge">New</span></h1>
<h2 class="env-text-heading-02">Hello <span class="env-badge">New</span></h2>
```

## Variants

```html
<span class="env-badge">Primary</span>
<span class="env-badge env-badge--success">Success</span>
<span class="env-badge env-badge--warning">Warning</span>
<span class="env-badge env-badge--danger">Danger</span>
<span class="env-badge env-badge--info">Info</span>
```

### Status variants

```html
<span class="env-badge env-badge--neutral">Neutral</span>
<span class="env-badge env-badge--active">Active</span>
<span class="env-badge env-badge--attention">Attention</span>
```

### Brand

Brand color badges are available by using modifier `env-badge--brand` or `env-badge--brand-{n}`.

Valid values for `{n}` are: `05`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `45`, `50`, `55`, `60`, `65`, `70`, `75`, `80`
, `85`, `90`, `95`, `100`.

<div class="example-badges">
   <div class="env-m-block-end--small">
      <span class="env-badge env-badge--brand">Brand</span>
      <span class="env-badge env-badge--brand-05">Brand 05</span>
      <span class="env-badge env-badge--brand-10">Brand 10</span>
      <span class="env-badge env-badge--brand-15">Brand 15</span>
      <span class="env-badge env-badge--brand-20">Brand 20</span>
      <span class="env-badge env-badge--brand-25">Brand 25</span>
      <span class="env-badge env-badge--brand-30">Brand 30</span>
      <span class="env-badge env-badge--brand-35">Brand 35</span>
      <span class="env-badge env-badge--brand-40">Brand 40</span>
      <span class="env-badge env-badge--brand-45">Brand 45</span>
      <span class="env-badge env-badge--brand-50">Brand 50</span>
      <span class="env-badge env-badge--brand-55">Brand 55</span>
      <span class="env-badge env-badge--brand-60">Brand 60</span>
      <span class="env-badge env-badge--brand-65">Brand 65</span>
      <span class="env-badge env-badge--brand-70">Brand 70</span>
      <span class="env-badge env-badge--brand-75">Brand 75</span>
      <span class="env-badge env-badge--brand-80">Brand 80</span>
      <span class="env-badge env-badge--brand-85">Brand 85</span>
      <span class="env-badge env-badge--brand-90">Brand 90</span>
      <span class="env-badge env-badge--brand-95">Brand 95</span>
      <span class="env-badge env-badge--brand-100">Brand 100</span>
   </div>
</div>

### Status badge

Indicates active/inactive status. May be used on text elements and also in combination with [profile image](/components/profile-image/#status-badge-in-responsive-size-profile-image).

```html
<p class="env-status-badge">Last logged in 5 h</p>
<p class="env-status-badge env-status-badge--active">Logged in</p>
```

---

## Components – Breadcrumb
URL: https://envisionui.io/components/breadcrumb/
Description: Use breadcrumbs to display the user´s location within a site’s hierarchy, enhancing navigation.

Use `env-breadcrumb__separator` in combination with `aria-hidden="true"` to hide the separator character from assistive technology.

```html
<nav aria-label="Breadcrumb">
   <ol class="env-breadcrumb env-text">
      <li class="env-breadcrumb__item">
         <a href="#">Root node</a>
         <span aria-hidden="true" class="env-breadcrumb__separator">/</span>
      </li>
      <li class="env-breadcrumb__item">
         <a href="#">Parent node</a>
         <span aria-hidden="true" class="env-breadcrumb__separator">/</span>
      </li>
      <li class="env-breadcrumb__item" aria-current="page">Current</li>
   </ol>
</nav>
```

---

## Components – Cards
URL: https://envisionui.io/components/cards/
Description: Cards are simple containers for displaying information about pages, groups, or users.

Use Cards to display information about, for example, a page, a group or a user.

A Card is a simple container that may have a header and a footer.
A Card has no colors or shadows of its own. To add colors and shadows
you may instead combine the `env-block` and `env-shadow` classes.

If used inside a [Cardholder](/layout/cardholder/) the Card will stretch
its width and height to make a nice aligned grid of cards.

```html
<div class="example-demo-dark">
   <div
      class="example-card env-card env-ui-section env-border env-shadow-small"
   >
      <div class="env-card__header">
         <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
      </div>
      <div class="env-card__body">
         <p class="env-ui-text-caption">Web Developer</p>
         <p class="env-ui-text-caption">
            <a href="#" class="env-link env-link-secondary">lorem@domain.com</a>
         </p>
         <p class="env-ui-text-caption">
            <a href="#" class="env-link env-link-secondary">012-345 67 89</a>
         </p>
      </div>
      <div class="env-card__footer">
         <p class="env-ui-text-caption">
            <a href="#" class="env-link">Contact</a>
         </p>
      </div>
   </div>

   <div
      class="example-card env-card env-block-primary env-block-primary--border env-shadow-small"
   >
      <div class="env-card__body">
         <img
            class="env-card__image env-profile-image env-profile-image--small"
            src="https://envisionui.io/placeholders/profile/200x200/01.webp"
            alt="Example profile image"
         />
         <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
         <p class="env-ui-text-caption">Job Title</p>
         <p class="env-ui-text-caption">
            <a href="#" class="env-link env-link-secondary">lorem@domain.com</a>
         </p>
         <p class="env-ui-text-caption">
            <a href="#" class="env-link env-link-secondary">012-345 67 89</a>
         </p>
      </div>
   </div>

   <div
      class="example-card env-card  env-block-secondary env-block-secondary--border env-shadow-small"
   >
      <div class="env-card__header">
         <div class="env-media env-media--center">
            <div class="env-media__figure">
               <a href="#">
                  <img
                     class="env-profile-image env-profile-image--small"
                     src="https://envisionui.io/placeholders/profile/200x200/02.webp"
                     alt="Example profile image"
                  />
               </a>
            </div>
            <div class="env-media__body env-text--small">
               <p class="env-ui-text-caption">Open group &bull; 29 members</p>
               <p class="env-ui-text-caption">Latest activity 3 hours ago</p>
            </div>
         </div>

         <h2 class="env-ui-text-subheading">Lorem ipsum dolor</h2>
      </div>
      <div class="env-card__body">
         <p class="env-ui-text-caption">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            eget lobortis dui, in accumsan augue.
         </p>
      </div>
      <div class="env-card__footer env-text--small">
         <a href="#" type="button" class="env-button env-button--link">
            <svg class="env-icon env-icon--small env-m-inline-end--xx-small">
               <use href="/sitevision/envision-icons.svg#icon-phone"></use>
            </svg>
            Administrator
         </a>
      </div>
   </div>
</div>
```

## Card anatomy

A Card may have a header, a body and a footer: `.env-card__header`, `.env-card__body`, `.env-card__footer`.

No matter HTML source order, header will always display first and footer last. The footer
will always stick to the bottom of the Card. Inside a Cardholder, if the Card needs to stretch
vertically, the body of the Card will be the element that stretches.

```html
<div class="example-demo-dark">
   <div class="example-card-parts env-card env-block env-shadow-small">
      <div class="env-card__header">Header</div>
      <div class="env-card__body">Body</div>
      <div class="env-card__footer">Footer</div>
   </div>
</div>
```

---

## Components – Collapse
URL: https://envisionui.io/components/collapse/
Description: The Collapse component is used to show and hide content through a trigger element.

Use Collapse when you want to show or hide a section of content. The component consists of a toggle button and a collapsible content element. The content is hidden by default and becomes visible when the toggle button is activated.

## Basic example

```html
<h4 class="env-ui-text-sectionheading">
   <a
      role="button"
      class="env-link"
      href="#collapse-1"
      data-env-collapse
      aria-expanded="false"
      aria-controls="collapse-1"
   >
      Example 1
   </a>
</h4>
<div class="env-collapse" id="collapse-1">
   <p class="env-text-body-02">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
      lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus
      quam. Proin eu tincidunt metus.
   </p>
</div>
```

## Required markup

The collapsible content element must have:

- `class="env-collapse"`
- a unique `id`

The toggle button element must have:

- Attribute `data-env-collapse`
- Either `href="#id"` or `data-target="#id"`_\*_
- `aria-controls="id"`_\*_
- `aria-expanded="true|false"`

<p class="doc-legend">
   <span style="font-size:1.4em">*</span> = The ID of the collapsible content element.
</p>

When using an `<a>` element as the toggle button, also add `role="button"`.

A `<button type="button">` must use `data-target`.

## Styled toggle button

Use `env-collapse-header` to style the toggle button as an expandable
section header. Add `env-collapse-header--icons` to display expand and collapse
icons.

```html
<h4 class="env-ui-text-sectionheading">
   <a
      class="env-collapse-header env-flex env-flex--justify-content-between"
      role="button"
      href="#collapse-2"
      data-env-collapse
      aria-expanded="false"
      aria-controls="collapse-2"
   >
      <span class="env-m-inline-end--x-large">Example 2</span>
      <span class="env-collapse-header--icons"></span>
   </a>
</h4>
<div class="env-collapse" id="collapse-2">
   <p class="env-text-body-02">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </p>
</div>
```

## Initially expanded

Add `env-collapse--show` to the content element if the content
should be visible when the page loads.

Add `env-collapse--expanded` to the toggle button. Make sure the toggle button uses
`aria-expanded="true"`.

```html
<h4 class="env-ui-text-sectionheading">
   <a
      class="env-collapse-header env-collapse--expanded env-flex env-flex--justify-content-between"
      role="button"
      href="#collapse-3"
      data-env-collapse
      aria-expanded="true"
      aria-controls="collapse-3"
   >
      <span class="env-m-inline-end--x-large">Example 3</span>
      <span class="env-collapse-header--icons"></span>
   </a>
</h4>
<div class="env-collapse env-collapse--show" id="collapse-3">
   <p class="env-text-body-02">This content is visible when the page loads.</p>
</div>
```

## Initialization

Toggle buttons using data-env-collapse are initialized automatically. No manual
JavaScript initialization is required for standard click interactions. The component is
initialized the first time it is used.

## Linking to content inside a collapse <span class="doc-badge doc-badge--info">2026.07.1</span>

If the page loads with a hash pointing to content inside a collapsed section,
the section is automatically expanded so the target content becomes accessible.

The same behavior applies when clicking a same-page anchor link that points to
content inside a collapsed section.

## Methods

The selector argument should target the `.env-collapse` content element, not the
toggle button.

### Show

```javascript
envision.collapse('#myCollapse').then(function (collapses) {
   collapses[0].show();
});
```

### Hide

```javascript
envision.collapse('#myCollapse').then(function (collapses) {
   collapses[0].hide();
});
```

### Toggle

```javascript
envision.collapse('#myCollapse').then(function (collapses) {
   collapses[0].toggle();
});
```

---

## Components – Dialog
URL: https://envisionui.io/components/dialog/
Description: Use Dialog to present modal dialogs with customizable sizes, animations, and focus management.

The Dialog component relies heavily on
[The HTMLDialogElement interface](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement).

The component must be initialized from Javascript. In the Envision scripted component you will find a
few extra features:

- Opener button added as option on initialization
- Close on click outside as an option
- Nice fade-in animation
- Focus trap to keep tab navigation from leaving the dialog

## Default dialog

<div class="example-demo-dialog">
<dialog
   id="demo-dialog"
  class="env-dialog env-dialog--in"
  aria-labelledby="dialogHeader-1" open>
    <h2
      class="env-dialog__title"
      id="dialogHeader-1"
    >
      Dialog Title
    </h2>
    <div class="env-dialog__main">
      <p class="env-text">
        Caticus cuteicus wake up wander around the house making large
        amounts of noise jump on top of your human's bed and fall asleep.
      </p>
    </div>
    <div class="env-dialog__controls">
       <form method="dialog" onsubmit="return false;">
       <button
        type="submit"
        value="ok"
        class="env-button env-button--primary">
        OK
      </button>
      <button
        type="submit"
        value="cancel"
        class="env-button env-button--link">
        Cancel
      </button>
       </form>
    </div>
</dialog>
</div>

### Basic dialog example

```html
<button
   id="example-dialog-1-opener"
   type="button"
   class="env-button env-button--primary env-button--large"
>
   Show dialog
</button>
<dialog
   id="example-dialog-1"
   class="env-dialog"
   aria-labelledby="dialogHeader-1"
>
   <h2 class="env-dialog__title" id="dialogHeader-1">Dialog Title</h2>
   <div class="env-dialog__main">
      <p class="env-text">
         Caticus cuteicus wake up wander around the house making large amounts
         of noise jump on top of your human's bed and fall asleep.
      </p>
   </div>
   <div class="env-dialog__controls">
      <form method="dialog">
         <button
            type="submit"
            value="save"
            class="env-button env-button--primary"
         >
            Save
         </button>
         <button
            type="submit"
            value="cancel"
            class="env-button env-button--link"
         >
            Cancel
         </button>
      </form>
   </div>
</dialog>
```

```javascript
envision.dialog(document.querySelector('#example-dialog-1'), {
   opener: '#example-dialog-1-opener',
});
```

### Button alignment

Use modifier `env-dialog__controls--end` to align controls to the right.

### Optional sizes

Use `env-dialog--large` or `env-dialog--small` to control dialog size.

```html
<button
   id="example-dialog-2-opener"
   type="button"
   class="env-button env-button--primary"
>
   Show large dialog
</button>
<dialog
   id="example-dialog-2"
   class="env-dialog env-dialog--large"
   aria-labelledby="dialogHeader-2"
>
   <h2 class="env-dialog__title" id="dialogHeader-2">Large dialog</h2>
   <div class="env-dialog__main">
      <p class="env-text">
         Caticus cuteicus wake up wander around the house making large amounts
         of noise jump on top of your human's bed and fall asleep.
      </p>
   </div>
   <div class="env-dialog__controls env-dialog__controls--end">
      <form method="dialog">
         <button
            type="submit"
            value="save"
            class="env-button env-button--primary"
         >
            Save
         </button>
         <button
            type="submit"
            value="cancel"
            class="env-button env-button--link"
         >
            Cancel
         </button>
      </form>
   </div>
</dialog>

<button
   id="example-dialog-3-opener"
   type="button"
   class="env-button env-button--primary env-button--ghost"
>
   Show small dialog
</button>
<dialog
   id="example-dialog-3"
   class="env-dialog env-dialog--small"
   aria-labelledby="dialogHeader-3"
>
   <h2 class="env-dialog__title" id="dialogHeader-3">Small dialog</h2>
   <div class="env-dialog__main">
      <p class="env-text">
         Caticus cuteicus wake up wander around the house making large amounts
         of noise jump on top of your human's bed and fall asleep.
      </p>
   </div>
   <div class="env-dialog__controls">
      <form method="dialog">
         <button
            type="submit"
            value="save"
            class="env-button env-button--primary"
         >
            Save
         </button>
         <button
            type="submit"
            value="cancel"
            class="env-button env-button--link"
         >
            Cancel
         </button>
      </form>
   </div>
</dialog>
```

### Scrolling

The element `env-dialog__main` is scrollable when content makes the dialog too large to fit the viewport.

```html
<button
   id="example-dialog-4-opener"
   type="button"
   class="env-button env-button--primary"
>
   Show scrollable dialog
</button>

<dialog
   id="example-dialog-4"
   class="env-dialog"
   aria-labelledby="dialogHeader-4"
>
   <h2 class="env-dialog__title" id="dialogHeader-4">Scrollable dialog</h2>
   <div class="env-dialog__main">
      <p class="env-text">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien
         turpis, aliquam nec porta ultrices, auctor ut mauris. Ut volutpat
         ornare consectetur. Phasellus nec nisi non tellus gravida porttitor a
         in arcu. Aliquam erat volutpat. Phasellus laoreet urna sem. In dui
         arcu, facilisis sed mollis at, bibendum vel purus. In sagittis lobortis
         tellus, sit amet egestas est dignissim vel. Vivamus a consequat nunc.
         Vestibulum eleifend malesuada quam id lacinia. Duis porta mauris et
         justo vehicula, sit amet malesuada tellus sollicitudin. Etiam
         convallis, ipsum non ultrices auctor, elit orci blandit est, vel
         finibus arcu massa eu lorem. Fusce sit amet est non tellus vulputate
         semper in eget est. In tincidunt ligula nec mauris tristique sagittis.
         Pellentesque interdum eleifend eros a viverra. Ut volutpat ut nisi nec
         gravida. Duis non sollicitudin ligula, ac vehicula turpis.
      </p>
      <p class="env-text">
         Duis eget lacus nec neque semper commodo. Nullam nisi nibh, vehicula
         eget condimentum sed, dictum vulputate erat. Quisque ut gravida magna.
         Cras eleifend maximus odio, quis tincidunt enim consectetur eu. Sed nec
         arcu auctor, porttitor eros malesuada, feugiat justo. Nulla ante augue,
         ultricies eu blandit et, vulputate sed nibh. Suspendisse in dapibus
         sapien. Fusce pulvinar, ligula vitae dapibus convallis, urna lectus
         viverra diam, a lobortis magna diam id libero. Duis et venenatis dolor,
         ac semper eros. Nunc tincidunt tempor enim.
      </p>
      <p class="env-text">
         Vivamus eget sagittis velit. Quisque magna libero, egestas a rutrum ac,
         imperdiet ac augue. Fusce nibh magna, sollicitudin sit amet massa in,
         iaculis tempus quam. Ut sodales commodo ante, in rutrum nunc semper
         quis. Vestibulum sed sollicitudin est. Etiam posuere id velit sit amet
         dictum. Nam semper placerat ultrices. Suspendisse in massa porttitor,
         faucibus neque sed, convallis velit. Nulla luctus ipsum a feugiat
         porta.
      </p>
      <p class="env-text">
         Duis ultricies gravida nunc, vitae fringilla sapien convallis ac. Lorem
         ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum
         pellentesque euismod. Cras dictum feugiat nisi, tincidunt imperdiet
         nunc pharetra vitae. Nunc ut neque in metus tristique bibendum. Vivamus
         nec lorem odio. Vestibulum pellentesque cursus diam in tempor.
      </p>
      <p class="env-text">
         Praesent id diam elementum, consequat nisl vitae, congue turpis. Sed
         sit amet cursus quam, vitae sagittis lorem. Morbi erat lectus, tempus
         eget interdum ac, blandit sit amet ante. Praesent scelerisque bibendum
         quam ut ornare. Duis ipsum ex, tincidunt vel volutpat eget, bibendum
         eget odio. Duis vitae tristique eros. Praesent at dui et velit
         porttitor malesuada sit amet a elit.
      </p>
      <p class="env-text">
         Donec at augue quis dolor porta rutrum. Nullam fringilla lobortis
         sapien ac cursus. Ut id egestas odio, mattis ornare dui. Etiam interdum
         venenatis quam id lobortis. Nunc id enim luctus, porta leo vitae,
         tristique lectus. In vel tortor nec lacus facilisis euismod vitae
         porttitor ligula. Vivamus ut mauris id urna dictum vestibulum.
      </p>
      <p class="env-text">
         Mauris interdum fermentum turpis, at ullamcorper sapien accumsan sit
         amet. Phasellus vitae augue volutpat, convallis elit sed, eleifend
         nisl. Sed at lorem dui. Nunc scelerisque nisi sapien, non sollicitudin
         tellus luctus vitae. Vivamus molestie turpis eu enim blandit, rutrum
         egestas nisl hendrerit. Mauris pharetra commodo malesuada. Proin at
         nisl nec turpis lacinia hendrerit non non orci. Cras tempor quam a
         mauris placerat lacinia. Donec eget sem ac tellus porttitor hendrerit.
         Duis congue risus non eros pharetra, ut facilisis risus ullamcorper.
         Vivamus fringilla suscipit lorem eu fermentum. Orci varius natoque
         penatibus et magnis dis parturient montes, nascetur ridiculus mus.
         Mauris tristique, leo et laoreet imperdiet, leo ligula egestas nibh, at
         accumsan lorem nibh ut nulla. Vivamus vitae ornare est. Suspendisse
         convallis tortor et nulla porttitor dictum.
      </p>
   </div>
   <div class="env-dialog__controls">
      <form method="dialog">
         <button
            type="submit"
            value="save"
            class="env-button env-button--primary"
         >
            Save
         </button>
         <button
            type="submit"
            value="cancel"
            class="env-button env-button--link"
         >
            Cancel
         </button>
      </form>
   </div>
</dialog>
```

## Alert dialogs

Quote from [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role):

<i><q>The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow
to communicate an important message and require a response.</q></i>

To make a Dialog an alertdialog, add `role="alertdialog"`, and make sure to use an accessible name and description
for example by adding attributes `aria-labelledby` and `aria-describedby`.

**Note**: The option `backdropClick` will automatically be set to `false` for alertdialogs and cannot be overridden.
Keypress `Escape` will not close the dialog.

Available alertdialog variations: `env-dialog--'error', 'success', 'warning', 'info'`

```html
<button
   id="example-alertdialog-1-opener"
   type="button"
   class="env-button env-button--primary"
>
   Alert Dialog
</button>
<dialog
   role="alertdialog"
   aria-labelledby="example-alertdialog-1-header"
   aria-describedby="example-alertdialog-1-desc"
   id="example-alertdialog-1"
   class="env-dialog"
>
   <div class="env-dialog__icon">
      <svg class="env-icon env-icon--large">
         <use href="/sitevision/envision-icons.svg#icon-check-line"></use>
      </svg>
   </div>
   <h2 class="env-dialog__title" id="example-alertdialog-1-header">
      Alert Dialog
   </h2>
   <div class="env-dialog__main" id="example-alertdialog-1-desc">
      <p class="env-text">
         Caticus cuteicus wake up wander around the house making large amounts
         of noise jump on top of your human's bed and fall asleep.
      </p>
   </div>
   <div class="env-dialog__controls">
      <form method="dialog">
         <button
            type="submit"
            value="ok"
            class="env-button env-button--primary"
         >
            OK
         </button>
         <button
            type="submit"
            value="cancel"
            class="env-button env-button--link"
         >
            Cancel
         </button>
      </form>
   </div>
</dialog>

<button
   id="example-alertdialog-2-opener"
   type="button"
   class="env-button env-button--success"
>
   Success Alert Dialog
</button>
<dialog
   role="alertdialog"
   aria-labelledby="example-alertdialog-2-header"
   aria-describedby="example-alertdialog-2-desc"
   id="example-alertdialog-2"
   class="env-dialog env-dialog--success"
>
   <div class="env-dialog__icon">
      <svg class="env-icon env-icon--large">
         <use href="/sitevision/envision-icons.svg#icon-thumb-up"></use>
      </svg>
   </div>
   <h2 class="env-dialog__title" id="example-alertdialog-2-header">
      Success Dialog Title
   </h2>
   <div class="env-dialog__main" id="example-alertdialog-2-desc">
      <p class="env-text">
         Caticus cuteicus wake up wander around the house making large amounts
         of noise jump on top of your human's bed and fall asleep.
      </p>
   </div>
   <div class="env-dialog__controls env-dialog__controls--end">
      <form method="dialog">
         <button
            type="submit"
            value="ok"
            class="env-button env-button--success"
         >
            OK
         </button>
      </form>
   </div>
</dialog>
<button
   id="example-alertdialog-3-opener"
   type="button"
   class="env-button env-button--danger"
>
   Error Alert Dialog
</button>
<dialog
   role="alertdialog"
   aria-labelledby="example-alertdialog-3-header"
   aria-describedby="example-alertdialog-3-desc"
   id="example-alertdialog-3"
   class="env-dialog env-dialog--error"
>
   <div class="env-dialog__icon">
      <svg class="env-icon env-icon--large">
         <use href="/sitevision/envision-icons.svg#icon-delete"></use>
      </svg>
   </div>
   <h3 class="env-dialog__title" id="example-alertdialog-3-header">
      Error Dialog Title
   </h3>
   <div class="env-dialog__main" id="example-alertdialog-3-desc">
      <p class="env-text">
         Caticus cuteicus wake up wander around the house making large amounts
         of noise jump on top of your human's bed and fall asleep.
      </p>
   </div>
   <div class="env-dialog__controls">
      <form method="dialog">
         <button
            type="submit"
            value="ok"
            class="env-button env-button--block env-button--danger"
         >
            OK
         </button>
      </form>
   </div>
</dialog>
```

## Options

```javascript
// Default options
{
   opener: null,
   backdropClick: true,
   placement: null,
}
```

- `opener` _'string'_ | _Node_
   - A selector as a string or a DOM Node to assign event listener for opening the dialog.
   - Default value: `null`

- `backdropClick` _boolean_
   - Click on backdrop (outside dialog) should close the dialog (not available for alertdialog).
   - Default value: `true`

- `placement` _'string'_
   - Dialog window should be moved in the DOM and open as an immediate child of `<body>`.
   - Allowed values: `'body'`
   - Default value: `null`

## API

Instances of Dialog may be controlled by the methods described below.

```javascript
envision.dialog('#dialog', { opener: '#opener' }).then(function (dialogs) {
   console.log(dialogs[0].el.open);
   // dialogs[0].show(); // Uncomment to show dialog on load
});
```

```javascript
envision.dialog('#dialog').then(function (dialogs) {
   // Custom opener event
   document.querySelector('#opener').addEventListener('click', () => {
      // ... before show ...
      dialogs[0].show();
   });
});
```

### Options

- `el`
   - Access to the [HTMLDialogElement interface](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement), e.g. `open` and `returnValue`.

- `show()`
   - Show the dialog. Uses [HTMLDialogElement showModal()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) to always display the dialog in the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer).

- `close()`
   - Close the dialog.

## Events

Use [native HTMLDialogElement events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement#events).

### Example

```javascript
envision
   .dialog(document.querySelector('#dialog'), {
      opener: '#opener',
   })
   .then((dialogs) => {
      dialogs[0].el.addEventListener('close', () => {
         // ... do something when dialog is closed
         console.log(dialogs[0].el.returnValue);
      });
   });
```

## Legacy documentation

Dialog is a replacement for the deprecated [Modal Dialog](/deprecated/modal-dialog/).

---

## Components – Dropdown
URL: https://envisionui.io/components/dropdown/
Description: Dropdowns displays a list of options that appears upon user interaction.

## Default Dropdown

Attribute `data-dropdown` is required on the button. Dropdown menu must use class `env-dropdown__menu`
and should be located inside the same parent element as the button.

```html
<div class="env-dropdown">
   <button
      id="example0-button"
      class="env-button env-button--primary env-button--icon env-button--icon-small env-button--icon-after"
      type="button"
      aria-expanded="false"
      aria-haspopup="menu"
      aria-controls="example0-menu"
      data-dropdown
   >
      Dropdown
      <svg class="env-icon">
         <use href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
   </button>
   <ul
      id="example0-menu"
      role="menu"
      aria-labelledby="example0-button"
      class="env-dropdown__menu"
   >
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Action</a>
      </li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Properties</a>
      </li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>
```

### Dropdown menu divider

Add an empty list item to menu with the class `env-dropdown--divider` and `role="separator"`.

```html
<div class="env-dropdown">
   <button
      id="example1-button"
      class="env-button env-button--primary"
      type="button"
      aria-expanded="false"
      aria-haspopup="menu"
      aria-controls="example1-menu"
      data-dropdown
   >
      Dropdown
   </button>
   <ul
      id="example1-menu"
      role="menu"
      aria-labelledby="example1-button"
      class="env-dropdown__menu"
   >
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Action</a>
      </li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Properties</a>
      </li>
      <li class="env-dropdown--divider" role="separator"></li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>
```

### Split button dropdown

Use `env-button-group` to split buttons.

```html
<div class="env-dropdown">
   <div class="env-button-group" role="group">
      <button
         class="env-button env-button--ghost env-button--primary"
         type="button"
      >
         Button
      </button>
      <button
         id="example2-button"
         class="env-button env-button--icon env-button--icon-small env-button--primary env-button--ghost"
         type="button"
         aria-expanded="false"
         aria-haspopup="menu"
         aria-controls="example2-menu"
         data-target=".env-dropdown"
         data-dropdown
      >
         <svg class="env-icon">
            <use href="/sitevision/envision-icons.svg#icon-angle-down"></use>
         </svg>
         <span class="env-assistive-text">Toggle Dropdown Menu</span>
      </button>
   </div>
   <ul
      id="example2-menu"
      role="menu"
      aria-labelledby="example2-button"
      class="env-dropdown__menu"
   >
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Action</a>
      </li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Properties</a>
      </li>
      <li class="env-dropdown--divider" role="separator"></li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>
```

### Optional placement

Use `data-container="body"` on `<button>` element
to open dropdown as an immediate child of `<body>`.

```html
<div class="env-dropdown">
   <button
      id="example3-button"
      class="env-button env-button--primary env-button--icon env-button--icon-small env-button--icon-after"
      type="button"
      aria-expanded="false"
      aria-haspopup="menu"
      aria-controls="example3-menu"
      data-container="body"
      data-dropdown
   >
      Dropdown in body
      <svg class="env-icon">
         <use href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
   </button>
   <ul
      id="example3-menu"
      role="menu"
      aria-labelledby="example3-button"
      class="env-dropdown__menu"
   >
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Action</a>
      </li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Properties</a>
      </li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>
```

Default placement is aligned to start of button.
Use `data-placement="end"` on `<button>` element to open dropdown
aligned to end of button.

```html
<div class="example-dropdown-placement">
   <div class="env-dropdown">
      <button
         id="example4-button"
         class="env-button env-button--slim env-button--icon"
         type="button"
         aria-expanded="false"
         aria-haspopup="menu"
         aria-controls="example4-menu"
         data-dropdown
      >
         <svg class="env-icon">
            <use href="/sitevision/envision-icons.svg#icon-menu-dots"></use>
         </svg>
         <span class="env-assistive-text">Default aligned Dropdown Menu</span>
      </button>
      <ul
         id="example4-menu"
         role="menu"
         aria-labelledby="example4-button"
         class="env-dropdown__menu"
      >
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item">Action</a>
         </li>
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item"
               >Properties</a
            >
         </li>
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item">Settings</a>
         </li>
      </ul>
   </div>
   <div class="env-dropdown">
      <button
         id="example5-button"
         class="env-button env-button--slim env-button--icon"
         type="button"
         aria-expanded="false"
         aria-haspopup="menu"
         aria-controls="example5-menu"
         data-placement="end"
         data-dropdown
      >
         <svg class="env-icon">
            <use href="/sitevision/envision-icons.svg#icon-menu-dots"></use>
         </svg>
         <span class="env-assistive-text">End aligned Dropdown Menu</span>
      </button>
      <ul
         id="example5-menu"
         role="menu"
         aria-labelledby="example5-button"
         class="env-dropdown__menu"
      >
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item">Action</a>
         </li>
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item"
               >Properties</a
            >
         </li>
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item">Settings</a>
         </li>
      </ul>
   </div>
</div>
```

---

## Components – Embedded
URL: https://envisionui.io/components/embedded/
Description: The Embedded component displays images and text with flexible layouts and overlay options.

## Example 1

```html
<div class="env-embedded" style="width:20em">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt=""
         src="https://envisionui.io/placeholders/text/640x480.png"
      />
   </div>
   <div class="env-embedded__block">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
         drumstick chuck ball tip biltong shoulder
      </p>
      <button type="button" class="env-button env-button--primary">
         Lorem ipsum
      </button>
   </div>
</div>
```

## Example 2

Uses `env-embedded--horizontal` and `env-embedded__img`. Use `env-embedded__img-container--right` to align image to the right.

```html
<div class="env-embedded env-embedded--horizontal">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt=""
         src="https://envisionui.io/placeholders/text/270x180.png"
      />
   </div>
   <div class="env-embedded__block">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
         drumstick chuck ball tip biltong shoulder porchetta tenderloin short
         loin.
      </p>
   </div>
</div>

<br />

<div class="env-embedded env-embedded--horizontal">
   <div class="env-embedded__img-container env-embedded__img-container--right">
      <img
         class="env-embedded__img"
         alt=""
         src="https://envisionui.io/placeholders/text/270x180.png"
      />
   </div>
   <div class="env-embedded__block">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
         drumstick chuck ball tip biltong shoulder porchetta tenderloin short
         loin.
      </p>
   </div>
</div>
```

## Example 3

```html
<div class="env-embedded">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt=""
         src="https://envisionui.io/placeholders/text/769x180.png"
      />
   </div>
   <div class="env-embedded__block">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
         drumstick chuck ball tip biltong shoulder porchetta tenderloin short
         loin. Jowl pastrami drumstick pig, beef jerky chicken ham hock salami.
      </p>
   </div>
</div>
```

## Example 4

Uses `env-embedded__block--overlay` to position text on top of image. You can align text to left or right with `env-embedded__block--overlay--left` or `*--right`

```html
<div class="env-embedded env-embedded--cover">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt=""
         src="https://envisionui.io/placeholders/text/769x180.png"
      />
   </div>
   <div class="env-embedded__block--overlay">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig
         drumstick chuck ball tip biltong shoulder porchetta tenderloin short
         loin.
      </p>
   </div>
</div>
```

---

## Components – Icons
URL: https://envisionui.io/components/icons/
Description: The Icon component simplifies icon integration with customizable styles.

## Usage

Use the `href` attribute to reference the icon in the included sprite.

The name of the icon is the id of the symbol in the sprite.

```html
<svg class="env-icon env-icon--medium">
   <use href="/sitevision/envision-icons.svg#icon-thumb-up"></use>
</svg>
```

For custom SVG icons, set the class `env-icon` on the SVG element.

```html
<svg class="env-icon env-icon--medium" viewBox="0 0 122.88 106.16">
   <path
      d="M4.03 61.56h27.36c2.21 0 4.02-1.81 4.02-4.02V4.03C35.41 1.81 33.6 0 31.39 0H4.03C1.81 0 0 1.81 0 4.03v53.51c0 2.21 1.81 4.02 4.03 4.02zm59.03 40.14c2.12 10.75 19.72.85 20.88-16.48.35-5.3-.2-11.47-1.5-18.36h25.15c10.46-.41 19.59-7.9 13.14-20.2 1.47-5.36 1.69-11.65-2.3-14.13.5-8.46-1.84-13.7-6.22-17.84-.29-4.23-1.19-7.99-3.23-10.88C105.6-.96 102.86.18 97.54.18H55.07c-6.73 0-10.4 1.85-14.8 7.37v47.31c12.66 3.42 19.39 20.74 22.79 32.11v14.73z"
   />
</svg>
```

## Sizes

Icon size utility classes are named using the format: `env-icon--{size}`

Valid values for _size_

- `xx-small`
- `x-small` (default)
- `small`
- `medium`
- `large`
- `x-large`
- `xx-large`

<div class="icons-demo">
   <ul class="env-list env-list--horizontal">
      <li class="env-list__item">
         <svg class="env-icon env-icon--xx-small">
            <use href="/sitevision/envision-icons.svg#icon-user"></use>
         </svg>
      </li>
      <li class="env-list__item">
         <svg class="env-icon env-icon--x-small">
            <use href="/sitevision/envision-icons.svg#icon-user"></use>
         </svg>
      </li>
      <li class="env-list__item">
         <svg class="env-icon env-icon--small">
            <use href="/sitevision/envision-icons.svg#icon-user"></use>
         </svg>
      </li>
      <li class="env-list__item">
         <svg class="env-icon env-icon--medium">
            <use href="/sitevision/envision-icons.svg#icon-user"></use>
         </svg>
      </li>
      <li class="env-list__item">
         <svg class="env-icon env-icon--large">
            <use href="/sitevision/envision-icons.svg#icon-user"></use>
         </svg>
      </li>
      <li class="env-list__item">
         <svg class="env-icon env-icon--x-large">
            <use href="/sitevision/envision-icons.svg#icon-user"></use>
         </svg>
      </li>
      <li class="env-list__item">
         <svg class="env-icon env-icon--xx-large">
            <use href="/sitevision/envision-icons.svg#icon-user"></use>
         </svg>
      </li>
   </ul>
</div>

## Inactive

An icon can be marked as inactive by adding modifier: `env-icon--inactive` which will lower opacity and add a hover effect.

```html
<div class="env-d--flex env-justify-content--center">
   <svg class="env-icon env-icon--xx-large env-icon--inactive">
      <use href="/sitevision/envision-icons.svg#icon-user"></use>
   </svg>
</div>
```

## Attention

For Envision icons and custom inline SVG images you may use modifier `env-icon--attention`
on the icon or on part of an icon. The modifier will set the color to Status color Attention.

```html
<svg class="env-icon env-icon--small env-icon--attention">
   <use href="/sitevision/envision-icons.svg#icon-bell"></use>
</svg>

<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class="env-icon env-icon--small"
>
   <circle cx="20" cy="4" r="4" class="env-icon--attention"></circle>
   <g transform="matrix(1,0,0,1,0,0)">
      <path
         d="M12,24c-1.23,0-2.36-.8-2.72-2.04-.12-.4,.11-.81,.51-.93,.4-.11,.81,.11,.93,.51,.21,.71,.95,1.11,1.66,.91,.44-.13,.78-.47,.91-.91,.12-.4,.54-.62,.93-.51,.4,.12,.62,.53,.51,.93-.27,.93-.99,1.65-1.92,1.92-.27,.08-.53,.11-.8,.11Z"
      ></path>
      <path
         d="M12,3.75c-.41,0-.75-.34-.75-.75V.75c0-.41,.34-.75,.75-.75s.75,.34,.75,.75V3c0,.41-.34,.75-.75,.75Z"
      ></path>
      <path
         d="M21,19.5H3c-.29,0-.55-.16-.67-.42-.13-.26-.09-.56,.08-.79,0,0,1.34-1.9,1.34-7.79C3.75,5.95,7.45,2.25,12,2.25c.37,0,.74,.02,1.1,.07,.41,.06,.7,.43,.64,.84-.05,.41-.44,.7-.84,.64-.3-.04-.6-.06-.9-.06-3.72,0-6.75,3.03-6.75,6.75,0,3.95-.57,6.26-1.04,7.5h15.5c-.45-1.16-.92-3.26-.96-6.99,0-.41,.33-.75,.74-.76,.42-.03,.75,.33,.76,.74,.06,5.91,1.24,7.19,1.25,7.2,.25,.2,.33,.52,.22,.82-.11,.3-.41,.49-.73,.49Z"
      ></path>
   </g>
</svg>
```

---

## Components – Image viewer
URL: https://envisionui.io/components/image-viewer-2/
Description: Accessible image slideshows and lightbox galleries with flexible layout and predictable motion.

<section id="demo-image-viewer"
class="env-m-block--large"
         aria-label="Photos from Örebro">
   <figure data-href="/placeholders/originals/10.webp" data-zoom>
      <img src="/placeholders/900x400/10.webp" alt="">
      <figcaption class="env-image-viewer-2__viewer__caption">Örebro Castle</figcaption>
   </figure>
   <figure data-href="/placeholders/originals/05.webp" data-zoom>
      <img src="/placeholders/900x400/05.webp" alt="">
      <figcaption class="env-image-viewer-2__viewer__caption">
         Karlslund Manor House
      </figcaption>
   </figure>
   <figure data-href="/placeholders/originals/02.webp" data-zoom>
      <img src="/placeholders/900x400/02.webp" alt="">
      <figcaption class="env-image-viewer-2__viewer__caption">
         Highland cattle at Oset outside Örebro
      </figcaption>
   </figure>
</section>

The component supports mouse, touch, keyboard, and assistive technologies out of the box,
with predictable navigation and motion-safe defaults.

Typical use cases:

- **Lightbox**  
  A gallery of images that opens in a modal viewer when activated.

- **Slideshow**  
  A carousel that displays one image at a time, with navigation controls.

- **Slideshow with lightbox**  
  A slideshow where images also can be opened in a lightbox for a larger view.

## Accessibility

Image Viewer 2 is built with accessibility in mind.

- Full keyboard navigation
- Screen reader support using `aria-live`
- Reduced motion support via `prefers-reduced-motion`
- Explicit labeling of slideshow containers using `aria-label`

Automatic rotation and animated transitions are disabled or simplified
when the user prefers reduced motion.

## Lightbox

To enable the lightbox, add the `data-zoom` attribute to one or more links or buttons
inside a container element. Initialize the container using JavaScript.

Activating any data-zoom element opens the lightbox and enables navigation
between all data-zoom elements in that container.

Use `href` on links or `data-href` on buttons to specify the large version of the image.

```html
<div
   id="example-image-viewer-lightbox-only"
   class="example-imageviewer2-images"
>
   <ul
      class="env-list env-cardholder-grid"
      style="--env-cardholder-grid-column-width: 10em;"
   >
      <li>
         <button
            type="button"
            aria-label="Zoom image: Dry grass in sunlight"
            data-href="/placeholders/originals/03.webp"
            data-zoom
         >
            <img
               loading="lazy"
               src="/placeholders/225x100/03.webp"
               data-figcaption="A strand of grass catching the warm glow of the sun"
               alt="Dry grass in sunlight"
            />
         </button>
         <p class="env-text-caption-01">Dry grass in sunlight</p>
      </li>
      <li>
         <button
            type="button"
            aria-label="Zoom image: Bright green fern leaves"
            data-href="/placeholders/originals/04.webp"
            data-zoom
         >
            <img
               loading="lazy"
               src="/placeholders/225x100/04.webp"
               alt="Bright green fern leaves"
               data-figcaption="Bright green fern fronds filling the frame in soft light"
            />
         </button>
         <p class="env-text-caption-01">Bright green fern leaves</p>
      </li>
      <li>
         <button
            type="button"
            aria-label="Zoom image: Two little snails on a green leaf"
            data-href="/placeholders/originals/08.webp"
            data-zoom
         >
            <img
               loading="lazy"
               src="/placeholders/225x100/08.webp"
               data-figcaption="Two little snails hanging out on a green leaf in the shade"
               alt="Two little snails on a green leaf"
            />
         </button>
         <p class="env-text-caption-01">Two little snails on a green leaf</p>
      </li>
      <li>
         <button
            type="button"
            aria-label="Zoom image: A close-up of a dandelion"
            data-href="/placeholders/originals/09.webp"
            data-zoom
         >
            <img
               loading="lazy"
               src="/placeholders/225x100/09.webp"
               data-figcaption="A close-up of a dandelion ready to spread its seeds on a sunny day"
               alt="A close-up of a dandelion"
            />
         </button>
         <p class="env-text-caption-01">A close-up of a dandelion</p>
      </li>
   </ul>
</div>
```

```javascript
envision.imageViewer2(
   document.querySelector('#example-image-viewer-lightbox-only')
);
```

## Slideshow

Initializing the Image Viewer with the `slides` option turns the container
into a slideshow (carousel).

All immediate child elements of the container are treated as individual slides.
The container element should have an `aria-label` attribute.

```html
<section
   id="example-image-viewer"
   class="env-p--medium"
   aria-label="Photos from Örebro"
>
   <figure data-href="/placeholders/originals/10.webp" data-zoom>
      <img src="/placeholders/900x400/10.webp" alt="" />
      <figcaption class="env-image-viewer-2__viewer__caption">
         Örebro Castle
      </figcaption>
   </figure>
   <figure data-href="/placeholders/originals/05.webp" data-zoom>
      <img src="/placeholders/900x400/05.webp" alt="" />
      <figcaption class="env-image-viewer-2__viewer__caption">
         Karlslund Manor House
      </figcaption>
   </figure>
   <figure data-href="/placeholders/originals/02.webp" data-zoom>
      <img src="/placeholders/900x400/02.webp" alt="" />
      <figcaption class="env-image-viewer-2__viewer__caption">
         Highland cattle at Oset outside Örebro
      </figcaption>
   </figure>
</section>
```

```javascript
envision.imageViewer2(document.querySelector('#example-image-viewer'), {
   slides: {
      auto: 3000,
      buttons: {
         placement: 'top',
         type: 'secondary',
         size: 'slim',
      },
   },
});
```

### Slideshow markup

- Each immediate child element of the container becomes a slide.
- The container should include an `aria-label` describing the slideshow content.

```html noexample
<section aria-label="Slideshow label">
   <img src="example-1.webp" alt="Image description 1" />
   <img src="example-2.webp" alt="Image description 2" />
</section>
```

### Slideshow with lightbox

Add the `data-zoom` attribute to enable the lightbox.
Provide a larger image using `data-href` or `href`.

- Use `data-href` when the slide element is a button or figure
- Use `href` when the slide element is a link

```html noexample
<section aria-label="Slideshow label">
   <img
      src="example-1.webp"
      alt="Image description"
      data-href="example-1-large.webp"
      data-zoom
   />
   <img
      src="example-2.webp"
      alt="Image description"
      data-href="example-2-large.webp"
      data-zoom
   />
</section>
```

Optionally wrap the image in a link pointing to the larger image. The `href` attribute will be used for zoom
and `data-zoom` must be added to the link, not the image.

```html noexample
<section aria-label="Slideshow label">
   <a href="example-1-large.webp" data-zoom>
      <img src="example-1.webp" alt="Image description" />
   </a>
   <a href="example-2-large.webp" data-zoom>
      <img src="example-2.webp" alt="Image description" />
   </a>
</section>
```

### Slideshow captions

To display captions in the slideshow, wrap images in a `figure` element and include
a `figcaption` with the class `env-image-viewer-2__viewer__caption`.

Using `figure` is recommended, but captions can also be added to links.

```html noexample
<section aria-label="Slideshow label">
   <figure data-href="example-1-large.webp" data-zoom>
      <img src="example-1.webp" alt="" />
      <figcaption class="env-image-viewer-2__viewer__caption">
         Image 1 caption
      </figcaption>
   </figure>
   <a href="example-2-large.webp" data-zoom>
      <img src="example-2.webp" alt="" />
      <div class="env-image-viewer-2__viewer__caption">Image 2 caption</div>
   </a>
</section>
```

### Lightbox captions <span class="doc-badge doc-badge--info">2025.09.2</span>

A `figcaption` placed inside a `data-zoom` element is automatically displayed
in the lightbox.

Alternatively, use the `data-figcaption` attribute on an `<img>` to provide
a caption that is only shown in the lightbox.

```html noexample
<section aria-label="Slideshow label">
   <figure data-href="example-1-large.webp" data-zoom>
      <img src="example-1.webp" alt="" />
      <figcaption class="env-image-viewer-2__viewer__caption">
         Image 1 caption
      </figcaption>
   </figure>
   <a href="example-2-large.webp" data-zoom>
      <img src="example-2.webp" alt="" data-figcaption="Image 2 caption" />
   </a>
</section>
```

## Configuration

### Top-level options

```js
{
  slides: false,
  buttons: {
    download: true,
    showText: false
  },
  i18n: 'sv'
}
```

| Option             | Type             | Description                      | Default value |
| ------------------ | ---------------- | -------------------------------- | ------------- |
| `slides`           | bool \| object   | Enable slideshow behavior        | `false`       |
| `buttons.download` | bool             | Show download button in lightbox | `true`        |
| `buttons.showText` | bool             | Show visible button labels       | `false`       |
| `i18n`             | string \| object | Language or custom translations  | `"sv"`        |

### Slides options

```js noexpand
{
   slides: {
     auto: false,
     transition: 'slide',
     draggable: true,
     playing: false,
     autoHeight: false,
     buttons: {
         placement: 'overlay-top',
         size: null,
         type: null,   // only placement top/bottom
         ghost: false, // only placement top/bottom
     }
   }
}
```

| Option                  | Type    | Description                                                    | Default value |
| ----------------------- | ------- | -------------------------------------------------------------- | ------------- |
| `auto`                  | number  | Auto-rotation interval (ms), `false` disables                  | `false`       |
| `transition`_\*_        | string  | `slide`, `slideSlow`, `fade`, `none`                           | `"slide"`     |
| `draggable`             | boolean | Enable mouse drag navigation                                   | `true`        |
| `playing`               | boolean | Start auto-rotation automatically                              | `false`       |
| `autoHeight`_\*_        | boolean | Adjust height to current slide                                 | `false`       |
| `buttons.placement`_\*_ | string  | `top`, `bottom`, `overlay-top`, `overlay-bottom`               | `overlay-top` |
| `buttons.size`          | string  | Any [Button size](/forms/button/#sizes) name in lowercase      | `null`        |
| `buttons.type`_\*\*_    | string  | Any [Element color](/colors/element-colors/) name in lowercase | `null`        |
| `buttons.ghost`_\*\*_   | boolean | Use [ghost button](/forms/button/) type                        | `false`       |

<div>
<p class="doc-legend env-m-block-end--0">
   <span style="font-size:1.4em">*</span> = Option added in 2026.02.1.
</p>
</div>
<div>
<p class="doc-legend env-m-block-end--0">
   <span style="font-size:1.4em">**</span> = Options type and ghost not applicable for overlay placement.
</p>
</div>
<div>
<p class="doc-legend">
   Options speed and overlay were deprecated in 2026.02.1, please use transition and buttons.placement instead.
</p>
</div>

## API functions

Instances of Image viewer may be controlled by the methods described below.

```javascript
envision.imageViewer2('#image-viewer').then(function (imageViewers) {
   imageViewers[0].slider.pause();
   imageViewers[0].lightbox.show(1);
});
```

### Slider

- `slider.pause()`
   - Pause slider automatic rotation.

- `slider.play()`
   - Start slider automatic rotation if available.

- `slider.next()`
   - Show next image.

- `slider.prev()`
   - Show previous image.

- `slider.goTo(index, speed)`
   - Set slider to image at position _index_. Use _speed_ to control how fast image is shown.

- `slider.getPos()`
   - Get index for current image.

### Lightbox

- `lightbox.show(index)`
   - Show lightbox starting at _index_. Defaults to index 0.

- `lightbox.close()`
   - Close the lightbox.

---

## Components – List
URL: https://envisionui.io/components/list/
Description: The List component displays items in vertical or horizontal layouts, with optional dividers.

## Overview

`.env-list` resets defaults to `margin: 0`, `padding: 0`, `list-style: none`

## Vertical list

```html
<ul class="env-list">
   <li class="env-list__item">Item</li>
   <li class="env-list__item">Item</li>
   <li class="env-list__item">Item</li>
</ul>
```

### Dividers

Apply `.env-list-dividers--*` to add dividers between items. Valid values: `top`, `bottom`, `around`

```html
<ul class="env-list env-list-dividers--top">
   <li class="env-list__item">Item</li>
   <li class="env-list__item">Item</li>
   <li class="env-list__item">Item</li>
</ul>
```

For a divider on a specific item, apply `.env-list-item-divider--*`. Valid values: `top`, `bottom`, `around`

```html
<ul class="env-list">
   <li class="env-list__item">Item</li>
   <li class="env-list__item env-list-item-divider--bottom">Item</li>
   <li class="env-list__item">Item</li>
</ul>
```

## Horizontal list

```html
<ul class="env-list env-list--horizontal">
   <li class="env-list__item">Item</li>
   <li class="env-list__item">Item</li>
   <li class="env-list__item">Item</li>
</ul>
```

### Dividers

Apply `.env-list-dividers--*` to add dividers between items. Valid values: `right`, `left`

```html
<ul class="env-list env-list--horizontal env-list-dividers--left">
   <li class="env-list__item">Item</li>
   <li class="env-list__item">Item</li>
   <li class="env-list__item">Item</li>
</ul>
```

### Fixed number of items per row

Use modifiers `env-list--horizontal--fixed env-list--horizontal--fixed--*`. Valid values:
`1-12`

```html
<ul class="env-list env-list--horizontal--fixed env-list--horizontal--fixed--4">
   <li class="env-list__item">
      <div class="example-list-item">1</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item">2</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item">3</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item">4</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item">5</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item">6</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item">7</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item">8</div>
   </li>
</ul>
```

### Responsive horizontal list

```html
<ul class="env-list env-list--horizontal env-list--horizontal--responsive">
   <li class="env-list__item">
      <div class="example-list-item-responsive">1</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item-responsive">2</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item-responsive">3</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item-responsive">4</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item-responsive">5</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item-responsive">6</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item-responsive">7</div>
   </li>
   <li class="env-list__item">
      <div class="example-list-item-responsive">8</div>
   </li>
</ul>
```

### Definition list

#### Default

```html
<dl class="env-definition-list">
   <dt>First item</dt>
   <dd>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed faucibus
      orci, a tincidunt dui.
   </dd>

   <dt>Second item</dt>
   <dd>Pellentesque bibendum augue sit amet pellentesque ultrices.</dd>

   <dt>Third item</dt>
   <dd>Proin non lorem facilisis, tincidunt mi vitae, consequat justo.</dd>
</dl>
```

#### Horizontal

```html
<dl class="env-definition-list env-definition-list--horizontal">
   <dt>First item</dt>
   <dd>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed faucibus
      orci, a tincidunt dui.
   </dd>

   <dt>Second item</dt>
   <dd>Pellentesque bibendum augue sit amet pellentesque ultrices.</dd>

   <dt>Third item</dt>
   <dd>Proin non lorem facilisis, tincidunt mi vitae, consequat justo.</dd>
</dl>
```

---

## Components – Media
URL: https://envisionui.io/components/media/
Description: The Media component is used to present user activity chronologically.

## Types

### Default media object

```html
<div class="env-media">
   <div class="env-media__figure">
      <a href="#" aria-hidden="true">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</div>
```

### Default media object with actions menu

```html
<div class="env-media">
   <div class="env-media__figure">
      <a href="#" aria-hidden="true">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
   <div class="env-media__actions">
      <button
         type="button"
         class="env-button env-button--icon"
         aria-haspopup="true"
         title="More options"
      >
         <svg class="env-icon">
            <use href="/sitevision/envision-icons.svg#icon-arrow-down"></use>
         </svg>
         <span class="env-assistive-text">More options</span>
      </button>
   </div>
</div>
```

### Inline media object

```html
<div class="env-media">
   <div class="env-media__figure">
      <a href="#" aria-hidden="true">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body env-media__body--inline">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</div>
```

### Column media object

```html
<div class="env-media env-media--column">
   <div class="env-media__figure">
      <a href="#" aria-hidden="true">
         <img
            class="env-image"
            src="https://envisionui.io/placeholders/text/200x200.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</div>
```

## Alignment

### Center

```html
<div class="env-media env-media--center">
   <div class="env-media__figure">
      <a href="#" aria-hidden="true">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</div>
```

```html
<div class="env-media env-media--column env-media--center">
   <div class="env-media__figure">
      <a href="#" aria-hidden="true">
         <img
            class="env-image"
            src="https://envisionui.io/placeholders/text/200x200.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</div>
```

Alignment modifiers can also be applied to elements within the media container (`__figure` & `__body`)

```html
<div class="env-media env-media--column env-media">
   <div class="env-media__figure env-media__figure--center">
      <a href="#" aria-hidden="true">
         <img
            class="env-image"
            src="https://envisionui.io/placeholders/text/200x200.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</div>
```

### Bottom

```html
<div class="env-media env-media--bottom">
   <div class="env-media__figure">
      <a href="#" aria-hidden="true">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</div>
```

## Order

### Reverse

```html
<div class="env-media env-media--reverse">
   <div class="env-media__figure">
      <a href="#" aria-hidden="true">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</div>
```

## Nesting

```html
<div class="env-media">
   <div class="env-media__figure">
      <a href="#" aria-hidden="true">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
      <div class="env-media">
         <div class="env-media__figure">
            <a href="#" aria-hidden="true">
               <img
                  class="env-image env-image--small"
                  src="https://envisionui.io/placeholders/text/400x400.png"
                  alt=""
               />
            </a>
         </div>
         <div class="env-media__body">
            <h3 class="env-ui-text-subheading">
               <a href="#" class="env-link-secondary">Emma</a>
            </h3>
            <p class="env-ui-text-caption">
               Cras varius, felis a accumsan accumsan, tellus elit maximus
               purus, id dignissim sem odio at eros. Morbi vel commodo diam.
               Integer hendrerit tellus nec ligula egestas consequat. Curabitur
               sapien mauris, rhoncus non blandit eu, rhoncus ut sem.
               Pellentesque elementum non augue vitae scelerisque.
            </p>
         </div>
      </div>
   </div>
</div>
```

---

## Components – Navigation
URL: https://envisionui.io/components/navigation/
Description: The Navigation component provides customizable menus for site navigation, including menubars and side navigation.

Use `aria-current="page"` on a link to indicate that the user is currently on that page.

## Menubar

### Fill

```html
<nav>
   <ul class="env-nav env-nav--menubar env-nav--fill">
      <li class="env-nav__item">
         <a class="env-nav__link" href="#">Item</a>
      </li>
      <li class="env-nav__item">
         <a class="env-nav__link" aria-current="page" href="#">Item</a>
      </li>
      <li class="env-nav__item">
         <a class="env-nav__link" href="#">Item</a>
      </li>
   </ul>
</nav>
```

### Border

```html
<nav>
   <ul class="env-nav env-nav--menubar env-nav--border">
      <li class="env-nav__item">
         <a class="env-nav__link" href="#">Item</a>
      </li>
      <li class="env-nav__item">
         <a class="env-nav__link" aria-current="page" href="#">Item</a>
      </li>
      <li class="env-nav__item">
         <a class="env-nav__link" href="#">Item</a>
      </li>
   </ul>
</nav>
```

## Sidenav

```html
<nav>
   <ul class="env-nav env-nav--sidenav">
      <li class="env-nav__item">
         <a class="env-nav__link" href="#">Item</a>
      </li>
      <li class="env-nav__item">
         <a class="env-nav__link" aria-current="page" href="#">Item</a>
      </li>
      <li class="env-nav__item">
         <a class="env-nav__link" href="#">Item</a>
      </li>
   </ul>
</nav>
```

---

## Components – News item
URL: https://envisionui.io/components/news-item/
Description: The News Item component presents news content with images and text in a structured layout.

## Types

### Default news item

```html
<div class="env-news-item">
   <div class="env-news-item__media">
      <img
         class="env-image"
         src="https://envisionui.io/placeholders/900x400/01.webp"
         alt="Example image"
      />
   </div>
   <div class="env-news-item__headline">
      <div class="env-news-item__headline__title">
         <h2 class="env-text">
            <a href="#" class="env-link-secondary">Lorem ipsum</a>
         </h2>
         <p class="env-text env-text--muted">Eric Ericsson, aug 12 12:56</p>
      </div>
   </div>
   <div class="env-news-item__preamble">
      <p class="env-text">
         Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin pancetta
         corned beef. Drumstick pork shank, salami turkey t-bone jerky corned
         beef picanha jowl brisket frankfurter shankle. Meatball jowl sausage
         pork belly chicken hamburger, andouille pork loin capicola.
      </p>
   </div>
   <div class="env-news-item__footer">
      <ul class="env-list env-list--horizontal env-list-dividers--left">
         <li class="env-list__item">
            <a href="#" class="env-text">Like</a>
         </li>
         <li class="env-list__item">
            <a href="#" class="env-text">Reply</a>
         </li>
         <li class="env-list__item">
            <span class="env-text">12:56</span>
         </li>
      </ul>
   </div>
</div>
```

### Example: Vertical list

`.env-list`

```html
<ul class="env-list">
   <li class="env-list__item">
      <div class="env-news-item">
         <div class="env-news-item__media">
            <img
               class="env-image"
               src="https://envisionui.io/placeholders/900x400/02.webp"
               alt="Example image"
            />
         </div>
         <div class="env-news-item__headline">
            <div class="env-news-item__headline__title">
               <h2 class="env-text">
                  <a href="#" class="env-link-secondary">Lorem ipsum</a>
               </h2>
               <p class="env-text env-text--muted">
                  Eric Ericsson, aug 12 12:56
               </p>
            </div>
         </div>
         <div class="env-news-item__preamble">
            <p class="env-text">
               Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin
               pancetta corned beef. Drumstick pork shank, salami turkey t-bone
               jerky corned beef picanha jowl brisket frankfurter shankle.
               Meatball jowl sausage pork belly chicken hamburger, andouille
               pork loin capicola.
            </p>
         </div>
         <div class="env-news-item__footer">
            <ul class="env-list env-list--horizontal env-list-dividers--left">
               <li class="env-list__item">
                  <a href="#" class="env-text">Like</a>
               </li>
               <li class="env-list__item">
                  <a href="#" class="env-text">Reply</a>
               </li>
               <li class="env-list__item">
                  <span class="env-text">12:56</span>
               </li>
            </ul>
         </div>
      </div>
   </li>
   <li class="env-list__item">
      <div class="env-news-item">
         <div class="env-news-item__media">
            <img
               class="env-image"
               src="https://envisionui.io/placeholders/900x400/03.webp"
               alt="Example image"
            />
         </div>
         <div class="env-news-item__headline">
            <div class="env-news-item__headline__title">
               <h2 class="env-text">
                  <a href="#" class="env-link-secondary">Lorem ipsum</a>
               </h2>
               <p class="env-text env-text--muted">
                  Eric Ericsson, aug 12 12:56
               </p>
            </div>
         </div>
         <div class="env-news-item__preamble">
            <p class="env-text">
               Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin
               pancetta corned beef. Drumstick pork shank, salami turkey t-bone
               jerky corned beef picanha jowl brisket frankfurter shankle.
               Meatball jowl sausage pork belly chicken hamburger, andouille
               pork loin capicola.
            </p>
         </div>
         <div class="env-news-item__footer">
            <ul class="env-list env-list--horizontal env-list-dividers--left">
               <li class="env-list__item">
                  <a href="#" class="env-text">Like</a>
               </li>
               <li class="env-list__item">
                  <a href="#" class="env-text">Reply</a>
               </li>
               <li class="env-list__item">
                  <span class="env-text">12:56</span>
               </li>
            </ul>
         </div>
      </div>
   </li>
   <li class="env-list__item">
      <div class="env-news-item">
         <div class="env-news-item__media">
            <img
               class="env-image"
               src="https://envisionui.io/placeholders/900x400/04.webp"
               alt="Example image"
            />
         </div>
         <div class="env-news-item__headline">
            <div class="env-news-item__headline__title">
               <h2 class="env-text">
                  <a href="#" class="env-link-secondary">Lorem ipsum</a>
               </h2>
               <p class="env-text env-text--muted">
                  Eric Ericsson, aug 12 12:56
               </p>
            </div>
         </div>
         <div class="env-news-item__preamble">
            <p class="env-text">
               Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin
               pancetta corned beef. Drumstick pork shank, salami turkey t-bone
               jerky corned beef picanha jowl brisket frankfurter shankle.
               Meatball jowl sausage pork belly chicken hamburger, andouille
               pork loin capicola.
            </p>
         </div>
         <div class="env-news-item__footer">
            <ul class="env-list env-list--horizontal env-list-dividers--left">
               <li class="env-list__item">
                  <a href="#" class="env-text">Like</a>
               </li>
               <li class="env-list__item">
                  <a href="#" class="env-text">Reply</a>
               </li>
               <li class="env-list__item">
                  <span class="env-text">12:56</span>
               </li>
            </ul>
         </div>
      </div>
   </li>
</ul>
```

### Example: Horizontal list

`env-list env-list--horizontal--fixed env-list--horizontal--fixed--2`

```html
<ul class="env-list env-list--horizontal--fixed env-list--horizontal--fixed--2">
   <li class="env-list__item">
      <div class="env-news-item">
         <div class="env-news-item__media">
            <img
               class="env-image"
               src="https://envisionui.io/placeholders/225x100/06.webp"
               alt="Example image"
            />
         </div>
         <div class="env-news-item__headline">
            <div class="env-news-item__headline__title">
               <h2 class="env-text">
                  <a href="#" class="env-link-secondary">Lorem ipsum</a>
               </h2>
               <p class="env-text env-text--muted">
                  Eric Ericsson, aug 12 12:56
               </p>
            </div>
         </div>
         <div class="env-news-item__preamble">
            <p class="env-text">
               Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin
               pancetta corned beef. Drumstick pork shank, salami turkey t-bone
               jerky corned beef picanha jowl brisket frankfurter shankle.
               Meatball jowl sausage pork belly chicken hamburger, andouille
               pork loin capicola.
            </p>
         </div>
         <div class="env-news-item__footer">
            <ul class="env-list env-list--horizontal env-list-dividers--left">
               <li class="env-list__item">
                  <a href="#" class="env-text">Like</a>
               </li>
               <li class="env-list__item">
                  <a href="#" class="env-text">Reply</a>
               </li>
               <li class="env-list__item">
                  <span class="env-text">12:56</span>
               </li>
            </ul>
         </div>
      </div>
   </li>
   <li class="env-list__item">
      <div class="env-news-item">
         <div class="env-news-item__media">
            <img
               class="env-image"
               src="https://envisionui.io/placeholders/225x100/07.webp"
               alt="Example image"
            />
         </div>
         <div class="env-news-item__headline">
            <div class="env-news-item__headline__title">
               <h2 class="env-text">
                  <a href="#" class="env-link-secondary">Lorem ipsum</a>
               </h2>
               <p class="env-text env-text--muted">
                  Eric Ericsson, aug 12 12:56
               </p>
            </div>
         </div>
         <div class="env-news-item__preamble">
            <p class="env-text">
               Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin
               pancetta corned beef. Drumstick pork shank, salami turkey t-bone
               jerky corned beef picanha jowl brisket frankfurter shankle.
               Meatball jowl sausage pork belly chicken hamburger, andouille
               pork loin capicola.
            </p>
         </div>
         <div class="env-news-item__footer">
            <ul class="env-list env-list--horizontal env-list-dividers--left">
               <li class="env-list__item">
                  <a href="#" class="env-text">Like</a>
               </li>
               <li class="env-list__item">
                  <a href="#" class="env-text">Reply</a>
               </li>
               <li class="env-list__item">
                  <span class="env-text">12:56</span>
               </li>
            </ul>
         </div>
      </div>
   </li>
   <li class="env-list__item">
      <div class="env-news-item">
         <div class="env-news-item__media">
            <img
               class="env-image"
               src="https://envisionui.io/placeholders/225x100/08.webp"
               alt="Example image"
            />
         </div>
         <div class="env-news-item__headline">
            <div class="env-news-item__headline__title">
               <h2 class="env-text">
                  <a href="#" class="env-link-secondary">Lorem ipsum</a>
               </h2>
               <p class="env-text env-text--muted">
                  Eric Ericsson, aug 12 12:56
               </p>
            </div>
         </div>
         <div class="env-news-item__preamble">
            <p class="env-text">
               Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin
               pancetta corned beef. Drumstick pork shank, salami turkey t-bone
               jerky corned beef picanha jowl brisket frankfurter shankle.
               Meatball jowl sausage pork belly chicken hamburger, andouille
               pork loin capicola.
            </p>
         </div>
         <div class="env-news-item__footer">
            <ul class="env-list env-list--horizontal env-list-dividers--left">
               <li class="env-list__item">
                  <a href="#" class="env-text">Like</a>
               </li>
               <li class="env-list__item">
                  <a href="#" class="env-text">Reply</a>
               </li>
               <li class="env-list__item">
                  <span class="env-text">12:56</span>
               </li>
            </ul>
         </div>
      </div>
   </li>
   <li class="env-list__item">
      <div class="env-news-item">
         <div class="env-news-item__media">
            <img
               class="env-image"
               src="https://envisionui.io/placeholders/225x100/09.webp"
               alt="Example image"
            />
         </div>
         <div class="env-news-item__headline">
            <div class="env-news-item__headline__title">
               <h2 class="env-text">
                  <a href="#" class="env-link-secondary">Lorem ipsum</a>
               </h2>
               <p class="env-text env-text--muted">
                  Eric Ericsson, aug 12 12:56
               </p>
            </div>
         </div>
         <div class="env-news-item__preamble">
            <p class="env-text">
               Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin
               pancetta corned beef. Drumstick pork shank, salami turkey t-bone
               jerky corned beef picanha jowl brisket frankfurter shankle.
               Meatball jowl sausage pork belly chicken hamburger, andouille
               pork loin capicola.
            </p>
         </div>
         <div class="env-news-item__footer">
            <ul class="env-list env-list--horizontal env-list-dividers--left">
               <li class="env-list__item">
                  <a href="#" class="env-text">Like</a>
               </li>
               <li class="env-list__item">
                  <a href="#" class="env-text">Reply</a>
               </li>
               <li class="env-list__item">
                  <span class="env-text">12:56</span>
               </li>
            </ul>
         </div>
      </div>
   </li>
   <li class="env-list__item">
      <div class="env-news-item">
         <div class="env-news-item__media">
            <img
               class="env-image"
               src="https://envisionui.io/placeholders/225x100/10.webp"
               alt="Example image"
            />
         </div>
         <div class="env-news-item__headline">
            <div class="env-news-item__headline__title">
               <h2 class="env-text">
                  <a href="#" class="env-link-secondary">Lorem ipsum</a>
               </h2>
               <p class="env-text env-text--muted">
                  Eric Ericsson, aug 12 12:56
               </p>
            </div>
         </div>
         <div class="env-news-item__preamble">
            <p class="env-text">
               Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin
               pancetta corned beef. Drumstick pork shank, salami turkey t-bone
               jerky corned beef picanha jowl brisket frankfurter shankle.
               Meatball jowl sausage pork belly chicken hamburger, andouille
               pork loin capicola.
            </p>
         </div>
         <div class="env-news-item__footer">
            <ul class="env-list env-list--horizontal env-list-dividers--left">
               <li class="env-list__item">
                  <a href="#" class="env-text">Like</a>
               </li>
               <li class="env-list__item">
                  <a href="#" class="env-text">Reply</a>
               </li>
               <li class="env-list__item">
                  <span class="env-text">12:56</span>
               </li>
            </ul>
         </div>
      </div>
   </li>
   <li class="env-list__item">
      <div class="env-news-item">
         <div class="env-news-item__media">
            <img
               class="env-image"
               src="https://envisionui.io/placeholders/225x100/11.webp"
               alt="Example image"
            />
         </div>
         <div class="env-news-item__headline">
            <div class="env-news-item__headline__title">
               <h2 class="env-text">
                  <a href="#" class="env-link-secondary">Lorem ipsum</a>
               </h2>
               <p class="env-text env-text--muted">
                  Eric Ericsson, aug 12 12:56
               </p>
            </div>
         </div>
         <div class="env-news-item__preamble">
            <p class="env-text">
               Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin
               pancetta corned beef. Drumstick pork shank, salami turkey t-bone
               jerky corned beef picanha jowl brisket frankfurter shankle.
               Meatball jowl sausage pork belly chicken hamburger, andouille
               pork loin capicola.
            </p>
         </div>
         <div class="env-news-item__footer">
            <ul class="env-list env-list--horizontal env-list-dividers--left">
               <li class="env-list__item">
                  <a href="#" class="env-text">Like</a>
               </li>
               <li class="env-list__item">
                  <a href="#" class="env-text">Reply</a>
               </li>
               <li class="env-list__item">
                  <span class="env-text">12:56</span>
               </li>
            </ul>
         </div>
      </div>
   </li>
</ul>
```

---

## Components – Pagination
URL: https://envisionui.io/components/pagination/
Description: The Pagination component provides accessible navigation for multi-page content, with customizable alignment and sizing options.

## Overview

```html
<nav aria-label="Pagination example">
   <ul class="env-pagination">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Previous</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 4">4</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 5">5</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Next</a>
      </li>
   </ul>
</nav>
```

## States

### Current

Use `aria-current="page"` or `aria-current="true"` on a link to indicate that the link is the current page or item.

```html
<nav aria-label="Pagination example">
   <ul class="env-pagination">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Previous</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a
            class="env-pagination__link"
            aria-current="true"
            href="#"
            aria-label="Current Page, Page 2"
            >2</a
         >
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Next</a>
      </li>
   </ul>
</nav>
```

### Disabled

Any element except button without a href attribute is considered disabled. Buttons are disabled using the disabled attribute.
If you must use a link, remove the href attribute and set the `aria-disabled="true"` and `aria-role="link"` attributes.

```html
<nav aria-label="Pagination example">
   <ul class="env-pagination">
      <li class="env-pagination__item">
         <span class="env-pagination__link">Previous</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Next</a>
      </li>
   </ul>
</nav>
```

## Alignment

### Center

```html
<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--center">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Previous</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Next</a>
      </li>
   </ul>
</nav>
```

### End

```html
<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--end">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Previous</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Next</a>
      </li>
   </ul>
</nav>
```

## Sizes

### Small

```html
<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--small">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
   </ul>
</nav>
```

### Large

```html
<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--large">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
   </ul>
</nav>
```

---

## Components – Popover
URL: https://envisionui.io/components/popover/
Description: Popovers displays contextual overlays with customizable content, positioning, and trigger options.

```html nocode
<div class="example-static-popover env-popover" data-popper-placement="bottom">
   <div class="env-popover__arrow"></div>
   <div class="env-popover__header">
      <h4 class="env-ui-text-sectionheading">Popover</h4>
   </div>
   <div class="env-popover__content">
      <p class="env-text">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum
         nunc bibendum laoreet malesuada. Proin eget augue tortor. Sed bibendum
         cursus eros, vitae mattis leo laoreet eget.
      </p>
   </div>
</div>
```

## Configuration and initialization

Initialize from script. Use data-attributes on the opener element or option parameters in JavaScript for settings.

See [available options below](#options).

### Example using data-attributes

```html
<button
   id="example-popover-data"
   class="env-button env-button--primary"
   data-placement="top"
   data-trigger="hover focus"
   data-title="Lorem ipsum"
   data-delay="200"
   data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum nunc bibendum laoreet malesuada. Proin eget augue tortor. Sed bibendum cursus eros, vitae mattis leo laoreet eget."
>
   Hover or focus me!
</button>
```

```javascript
envision.popover('#example-popover-data');
```

### Example using JavaScript

The content will be fetched from a template element and displayed in the popover.

```html
<template id="example-popover-content">
   <div class="env-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>In fermentum <a href="#">nunc bibendum laoreet</a> malesuada.</p>
      <p>
         Proin eget augue tortor. <b>Sed bibendum cursus eros</b>, vitae mattis
         leo laoreet eget.
      </p>
   </div>
</template>
<button id="example-popover-button" class="env-button env-button--primary">
   Click me!
</button>
```

```javascript
const popoverContentEl = document.querySelector('#example-popover-content');
if (popoverContentEl) {
   envision.popover('#example-popover-button', {
      placement: 'bottom',
      title: 'Lorem ipsum',
      content: popoverContentEl,
      escapeContent: false,
      clickOutside: true,
   });
}
```

## Popover menu

Add `type: 'menu'` in JS or `data-type="menu"` in HTML
for a menu-styled popover. Use class `env-popover__item` for the menu items.

<div class="env-m-block--large">
<div class="example-static-popover env-popover" data-popper-placement="bottom">
   <div class="env-popover__arrow"></div>
   <div class="env-popover__header">
      <h4 class="env-ui-text-sectionheading">Popover menu</h4>
   </div>
   <div class="env-popover__menu">
<ul>
      <li>
         <button type="button" class="env-popover__item">
            <svg class="env-icon">
               <use href="/sitevision/envision-icons.svg#icon-file"></use>
            </svg>
            Action
         </button>
      </li>
</ul>
   </div>
</div>
</div>

```html
<template id="example-popover-menu-content">
   <ul>
      <li>
         <button type="button" class="env-popover__item">
            <svg class="env-icon">
               <use href="/sitevision/envision-icons.svg#icon-file"></use>
            </svg>
            Action
         </button>
      </li>
      <li>
         <button type="button" class="env-popover__item">
            <svg class="env-icon">
               <use href="/sitevision/envision-icons.svg#icon-bell"></use>
            </svg>
            Properties
         </button>
      </li>
      <li class="env-popover--divider" role="separator"></li>
      <li>
         <button type="button" class="env-popover__item">
            <svg class="env-icon">
               <use href="/sitevision/envision-icons.svg#icon-check-done"></use>
            </svg>
            Settings
         </button>
      </li>
   </ul>
</template>
<button id="example-popover-menu-button" class="env-button env-button--primary">
   Show popover menu
</button>
```

```javascript
const popoverMenuContentEl = document.querySelector(
   '#example-popover-menu-content'
);
if (popoverMenuContentEl) {
   envision.popover('#example-popover-menu-button', {
      placement: 'top',
      title: 'Popover menu',
      content: popoverMenuContentEl,
      escapeContent: false,
      clickOutside: true,
      type: 'menu',
   });
}
```

## Popover Tooltip

Add `type: 'tooltip'` in JS or `data-type="tooltip"` in HTML
for a Tooltip-styled popover. Common text components will adjust color automatically.

<div class="env-m-block--large">
<div class="example-static-popover env-popover env-popover--tooltip" data-popper-placement="bottom">
<div class="env-popover__arrow"></div>
   <div class="env-popover__header">
      <h4 class="env-ui-text-sectionheading">Popover Tooltip</h4>
   </div>
   <div class="env-popover__content">
      <p class="env-text">
         Lorem ipsum dolor sit amet
      </p>
   </div>
</div>
</div>

```html
<template id="example-popover-tooltip-content">
   <p class="env-text">
      Lorem ipsum dolor sit amet,
      <a href="javascript:void(0)">consectetur adipiscing elit</a>. In fermentum
      nunc bibendum laoreet malesuada.
   </p>
   <p class="env-ui-text-caption">Aliquam diam risus tincidunt.</p>
</template>
<button
   id="example-popover-tooltip-button"
   class="env-button env-button--primary"
>
   Show popover tooltip
</button>
```

```javascript
const popoverTooltipContentEl = document.querySelector(
   '#example-popover-tooltip-content'
);
if (popoverTooltipContentEl) {
   envision.popover('#example-popover-tooltip-button', {
      placement: 'top',
      title: 'Popover tooltip',
      content: popoverTooltipContentEl,
      escapeContent: false,
      clickOutside: true,
      type: 'tooltip',
   });
}
```

## Options

- `placement` _string_
   - Prefered initial placement.
   - Default value: `top`
   - Possible values: `top`, `right`, `bottom`, `left`

- `title` _string_
   - Popover title.
   - Default value: `''`

- `content` _string_ | _HTMLElement_
   - Popover content.
   - Default value: `''`

- `escapeContent` _boolean_
   - Treat option `content` as text or HTML. If popover content is HTML, this needs to be set to `false`.
   - Default value: `true`

- `trigger` _string_
   - Single event or mulitple space separated events for opening the popover.
   - Default value: `click`

- `delay` _number_
   - Milliseconds for delaying the popover closing. When opening on hover, a value of at least `200` is recommended.
   - Default value: `0`

- `clickOutside` _boolean_
   - Close popover on click outside.
   - Default value: `false`

- `type` _string_
   - Popover styling
   - Default value: null
   - Possible values: `menu`, `tooltip`

---

## Components – Profile image
URL: https://envisionui.io/components/profile-image/
Description: The Profile Image component displays images with fixed or responsive sizes.

## Overview

`.env-profile-image` will always give you a centered image. Use modifiers for size:
<br>
<br>
`env-profile-image--xx-large`, `env-profile-image--x-large`, `env-profile-image--large`,
`env-profile-image--medium`, `env-profile-image--small`, `env-profile-image--x-small`, `env-profile-image--xx-small`

### Fixed size

Using the class directly on the IMG tag will make the image fixed size. If the containing
element is smaller, the image will overflow.

```html
<div class="example-profile-images">
   <div data-demo-size-fixed data-demo-size="256px">
      <img
         class="env-profile-image env-profile-image--xx-large"
         src="https://envisionui.io/placeholders/text/xxl.png"
         alt="Example profile image xx-large"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="224px">
      <img
         class="env-profile-image env-profile-image--x-large"
         src="https://envisionui.io/placeholders/text/xl.png"
         alt="Example profile image x-large"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="128px">
      <img
         class="env-profile-image env-profile-image--large"
         src="https://envisionui.io/placeholders/text/l.png"
         alt="Example profile image large"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="96px">
      <img
         class="env-profile-image env-profile-image--medium"
         src="https://envisionui.io/placeholders/text/m.png"
         alt="Example profile image medium"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="64px">
      <img
         class="env-profile-image env-profile-image--small"
         src="https://envisionui.io/placeholders/text/s.png"
         alt="Example profile image small"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="48px">
      <img
         class="env-profile-image env-profile-image--x-small"
         src="https://envisionui.io/placeholders/text/xs.png"
         alt="Example profile image x-small"
      />
   </div>

   <div data-demo-size-fixed data-demo-size="32px">
      <img
         class="env-profile-image env-profile-image--xx-small"
         src="https://envisionui.io/placeholders/text/xxs.png"
         alt="Example profile image xx-small"
      />
   </div>
</div>
```

### Responsive size

Using a wrapper element will make the image resize if the element containing
the image is smaller than the image.

```html
<div class="example-profile-images example-profile-images--resizeable">
   <div
      class="env-profile-image env-profile-image--xx-large"
      data-demo-size-inside
      data-demo-size="256px"
   >
      <img
         src="https://envisionui.io/placeholders/text/xxl.png"
         alt="Example profile image"
      />
   </div>
</div>
```

#### Status badge in responsive size Profile image

A responsive size Profile image may have a [Status badge](/components/badge/#status-badge) inside.
The text will be visually hidden and the badge will adjust its size
relative to the image.

```html
<div class="example-profile-images example-profile-images--resizeable">
   <div class="env-profile-image env-profile-image--xx-large">
      <img
         src="https://envisionui.io/placeholders/profile/400x400/02.webp"
         alt="Example profile image"
      />
      <p class="env-status-badge env-status-badge--active">Logged in</p>
   </div>
</div>
```

---

## Components – Progress indicator
URL: https://envisionui.io/components/progress/
Description: The Progress Indicator component displays progress with customizable colors, labels, and animations.

## Types

```html
<div class="example-progress">
   <div class="env-progress">
      <div
         class="env-progress__bar"
         role="progressbar"
         aria-label="Example progress bar"
         aria-valuenow="0"
         aria-valuemin="0"
         aria-valuemax="100"
      ></div>
   </div>
   <div class="env-progress">
      <div
         class="env-progress__bar"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 50%"
         aria-valuenow="50"
         aria-valuemin="0"
         aria-valuemax="100"
      ></div>
   </div>
   <div class="env-progress">
      <div
         class="env-progress__bar"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 100%"
         aria-valuenow="100"
         aria-valuemin="0"
         aria-valuemax="100"
      ></div>
   </div>
</div>
```

## Styling

### Labels

```html
<div class="example-progress">
   <div class="env-progress">
      <div
         class="env-progress__bar"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 25%"
         aria-valuenow="25"
         aria-valuemin="0"
         aria-valuemax="100"
      >
         25%
      </div>
   </div>
   <div class="env-progress">
      <div
         class="env-progress__bar"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 50%"
         aria-valuenow="50"
         aria-valuemin="0"
         aria-valuemax="100"
      >
         50%
      </div>
   </div>
   <div class="env-progress">
      <div
         class="env-progress__bar"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 75%"
         aria-valuenow="75"
         aria-valuemin="0"
         aria-valuemax="100"
      >
         75%
      </div>
   </div>
</div>
```

### Colors

Use modifiers `--success`, `--warning` or `--danger` to change background color of `env-progress__bar`

```html
<div class="example-progress">
   <div class="env-progress">
      <div
         class="env-progress__bar env-progress__bar--success"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 50%"
         aria-valuenow="50"
         aria-valuemin="0"
         aria-valuemax="100"
      ></div>
   </div>
   <div class="env-progress">
      <div
         class="env-progress__bar env-progress__bar--warning"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 50%"
         aria-valuenow="50"
         aria-valuemin="0"
         aria-valuemax="100"
      ></div>
   </div>
   <div class="env-progress">
      <div
         class="env-progress__bar env-progress__bar--danger"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 50%"
         aria-valuenow="50"
         aria-valuemin="0"
         aria-valuemax="100"
      ></div>
   </div>
</div>
```

### Stripes

Apply modifier `--striped` to enhance the progress bar with stripes

```html
<div class="example-progress">
   <div class="env-progress">
      <div
         class="env-progress__bar env-progress__bar--striped"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 50%"
         aria-valuenow="50"
         aria-valuemin="0"
         aria-valuemax="100"
      ></div>
   </div>

   <div class="env-progress">
      <div
         class="env-progress__bar env-progress__bar--success env-progress__bar--striped"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 50%"
         aria-valuenow="50"
         aria-valuemin="0"
         aria-valuemax="100"
      ></div>
   </div>
</div>
```

Apply `--striped--flip` to flip stripes alignment

```html
<div class="example-progress">
   <div class="env-progress">
      <div
         class="env-progress__bar env-progress__bar--striped env-progress__bar--striped--flip"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 50%"
         aria-valuenow="50"
         aria-valuemin="0"
         aria-valuemax="100"
      ></div>
   </div>
</div>
```

### Animated stripes

Add `--striped--animated` to animate the stripes

```html
<div class="example-progress">
   <div class="env-progress">
      <div
         class="env-progress__bar env-progress__bar--striped env-progress__bar--striped--animated"
         role="progressbar"
         aria-label="Example progress bar"
         style="width: 75%"
         aria-valuenow="75"
         aria-valuemin="0"
         aria-valuemax="100"
      ></div>
   </div>
</div>
```

## Poll

```html
<div class="example-progress">
   <p class="env-text env-m-block-end--large">
      Lorem ipsum lectus molestie vivamus?
   </p>
   <div class="env-progress-poll" title="Number of votes: 5">
      <div
         class="env-progress-poll__bar"
         role="progressbar"
         aria-label="Example progress bar"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="10"
         style="width: 10%;"
      ></div>
      <div class="env-progress-poll__label">Pellentesque rutrum duis</div>
      <div class="env-progress-poll__value">10 %</div>
   </div>
   <div
      class="env-progress-poll env-progress-poll--highlighted"
      title="Number of votes: 29"
   >
      <div
         class="env-progress-poll__bar"
         role="progressbar"
         aria-label="Example progress bar"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="58"
         style="width: 58%;"
      ></div>
      <div class="env-progress-poll__label">Diam bibendum</div>
      <div class="env-progress-poll__value">60 %</div>
   </div>
   <div class="env-progress-poll" title="Number of votes: 16">
      <div
         class="env-progress-poll__bar"
         role="progressbar"
         aria-label="Example progress bar"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="32"
         style="width: 32%;"
      ></div>
      <div class="env-progress-poll__label">
         Nibh urna eu vitae sem donec in sem tellus ipsum
         <svg
            xmlns="http://www.w3.org/2000/svg"
            class="env-progress-poll__icon"
         >
            <title>Your vote</title>
            <use href="/sitevision/envision-icons.svg#icon-check-done"></use>
         </svg>
      </div>
      <div class="env-progress-poll__value">30 %</div>
   </div>
</div>
```

---

## Components – Spinner
URL: https://envisionui.io/components/spinner/
Description: The Spinner component displays loading animations with standard or bounce styles and optional delays.

## Standard

```html
<div class="env-spinner">
   <div class="env-rect1"></div>
   <div class="env-rect2"></div>
   <div class="env-rect3"></div>
   <div class="env-rect4"></div>
   <div class="env-rect5"></div>
</div>
```

## Bounce

```html
<div class="env-spinner-bounce">
   <div class="env-bounce1"></div>
   <div class="env-bounce2"></div>
   <div class="env-bounce3"></div>
</div>
```

## Hide spinner

Use modifier `env-spinner--hide` or `env-spinner-bounce--hide` to hide the spinner. i.e `env-spinner env-spinner--hide`

## Delayed spinner

Delay showing the spinner to avoid spinner flashing when the content loads fast.

Use modifier `env-spinner--fade-in` or `env-spinner-bounce--fade-in` for a delayed spinner.
Data attribute `data-delay="short"` may be used to control delay timing. Allowed values are:

- `short` (0.25s delay)
- `medium` (0.5s)
- `long` (1s)

### Delayed spinner demo

```html nocode
<div id="demo-delayed-spinner" class="demo-delayed-spinner">
   <div class="env-spinner env-spinner--hide">
      <div class="env-rect1"></div>
      <div class="env-rect2"></div>
      <div class="env-rect3"></div>
      <div class="env-rect4"></div>
      <div class="env-rect5"></div>
   </div>
</div>
```

<div class="env-m-block-start--x-small">
   <button class="env-button" id="toggle-spinner-1">Short delay</button>
   <button class="env-button" id="toggle-spinner-2">Medium delay</button>
   <button class="env-button" id="toggle-spinner-3">Long delay</button>
</div>

---

## Components – Tab
URL: https://envisionui.io/components/tab/
Description: The Tab component organizes content into sections, displaying one panel at a time.

## Default Tab

Note: All examples below require tabs to be [initialized from JavaScript](#init).

```html
<div class="env-tabs example-tabs">
   <ul class="env-tabs__nav env-tabs__nav--border-bottom" role="tablist">
      <li role="tab" aria-controls="panel1" aria-selected="true">Tab 1</li>
      <li role="tab" aria-controls="panel2" aria-selected="false">Tab 2</li>
      <li role="tab" aria-controls="panel3" aria-selected="false">Tab 3</li>
   </ul>
</div>
<div id="panel1" class="example-panel" role="tabpanel" aria-hidden="false">
   1
</div>
<div id="panel2" class="example-panel" role="tabpanel" aria-hidden="true">
   2
</div>
<div id="panel3" class="example-panel" role="tabpanel" aria-hidden="true">
   3
</div>
```

## Simple Tab

```html
<div class="env-tabs env-tabs--simple example-tabs1">
   <ul class="env-tabs__nav" role="tablist">
         <li
            id="tab4"
            role="tab"
            aria-controls="panel4"
            aria-selected="false"
            >Tab 4</li
         >
         <li
            id="tab5"
            role="tab"
            aria-controls="panel5"
            aria-selected="true"
            >Tab 5</li
         >
         <li
            id="tab6"
            role="tab"
            aria-controls="panel6"
            aria-selected="false"
            >Tab 6</li
         >
      </li>
   </ul>
</div>

<div
   id="panel4"
   class="example-panel"
   aria-labelledby="tab4"
   role="tabpanel"
   aria-hidden="true"
>
   4
</div>
<div
   id="panel5"
   class="example-panel"
   aria-labelledby="tab5"
   role="tabpanel"
   aria-hidden="false"
>
   5
</div>
<div
   id="panel6"
   class="example-panel"
   aria-labelledby="tab6"
   role="tabpanel"
   aria-hidden="true"
>
   6
</div>
```

## Stacked

Add class modifier `env-tabs--column` to tab stack container to make tabs vertical.

```html
<div class="env-tabs example-tabs3">
   <ul class="env-tabs__nav env-tabs--column" role="tablist">
      <li   id="tab7"
            role="tab"
            aria-controls="panel7"
            aria-selected="true"
            >Tab 7
      </li>
      <li   id="tab8"
            role="tab"
            aria-controls="panel8"
            aria-selected="false"
            >Tab 8
      </li>
      <li   id="tab9"
            role="tab"
            aria-controls="panel9"
            aria-selected="false"
            >Tab 9</a
         >
      </li>
      <li   id="tab10"
            role="tab"
            aria-controls="panel10"
            aria-selected="false"
            >Tab 10
      </li>
      <li   id="tab11"
            role="tab"
            aria-controls="panel11"
            aria-selected="false"
            >Tab 11
      </li>
   </ul>
</div>

<div
   id="panel7"
   class="example-panel"
   aria-labelledby="tab7"
   role="tabpanel"
   aria-hidden="false"
>
   7
</div>
<div
   id="panel8"
   class="example-panel"
   aria-labelledby="tab8"
   role="tabpanel"
   aria-hidden="true"
>
   8
</div>
<div
   id="panel9"
   class="example-panel"
   aria-labelledby="tab9"
   role="tabpanel"
   aria-hidden="true"
>
   9
</div>
<div
   id="panel10"
   class="example-panel"
   aria-labelledby="tab10"
   role="tabpanel"
   aria-hidden="true"
>
   10
</div>
<div
   id="panel11"
   class="example-panel"
   aria-labelledby="tab11"
   role="tabpanel"
   aria-hidden="true"
>
   11
</div>
```

<div id="init"></div>

## Initiation

```javascript
envision.tabs('.example-tabs');
```

---

## Components – Table
URL: https://envisionui.io/components/table/
Description: Use a Table to display data in rows and columns, with customizable styles and responsive layouts.

Default table styling uses the variables and styling from the [Text component](/components/text/).

## Types

### Default

```html
<table class="env-table">
   <caption>
      Default table
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
      <tr>
         <td>John Smith</td>
         <td>johsmi</td>
         <td>Marketing</td>
         <td>john@smith.com</td>
      </tr>
      <tr>
         <td>Jane Smith</td>
         <td>jansmi</td>
         <td>Marketing</td>
         <td>jane@smith.com</td>
      </tr>
   </tbody>
</table>
```

### Zebra

```html
<table class="env-table env-table--zebra">
   <caption>
      Zebra table
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
      <tr>
         <td>John Smith</td>
         <td>johsmi</td>
         <td>Marketing</td>
         <td>john@smith.com</td>
      </tr>
      <tr>
         <td>Jane Smith</td>
         <td>jansmi</td>
         <td>Marketing</td>
         <td>jane@smith.com</td>
      </tr>
   </tbody>
</table>
```

## Borders

`env-table--borders-*` Valid values `around`, `right`, `bottom`, `left`

```html
<table class="env-table env-table--borders-around">
   <caption>
      Table with borders
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
   </tbody>
</table>
```

## Sizing

### Small

```html
<table class="env-table env-table--small">
   <caption>
      Small table
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
   </tbody>
</table>
```

### Large

```html
<table class="env-table env-table--large">
   <caption>
      Large table
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
   </tbody>
</table>
```

## Contextual styling

### Hover effect

```html
<table class="env-table env-table--hover">
   <caption>
      Table with hover effect
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
      <tr>
         <td>John Smith</td>
         <td>johsmi</td>
         <td>Marketing</td>
         <td>john@smith.com</td>
      </tr>
      <tr>
         <td>Jane Smith</td>
         <td>jansmi</td>
         <td>Marketing</td>
         <td>jane@smith.com</td>
      </tr>
   </tbody>
</table>
```

### Colors <span class="doc-badge doc-badge--danger">Deprecated</span>

Table with colored rows and cells is deprecated and will be removed.

---

## Components – Toast
URL: https://envisionui.io/components/toast/
Description: Use the Toast component to display brief, customizable notifications to inform users of system events.

```html
<div class="env-toast env-toast--visible">
   <div class="env-toast__content">Hello, World! This is a Toast message.</div>
   <button class="env-toast__close">
      <span class="env-assistive-text">Close</span>
      <svg class="env-icon env-icon--small" aria-hidden="true">
         <use href="/sitevision/envision-icons.svg#icon-delete"></use>
      </svg>
   </button>
</div>

<div class="env-toast env-toast--success env-toast--visible">
   <div class="env-toast__check">
      <svg class="env-icon env-icon--small" aria-hidden="true">
         <use href="/sitevision/envision-icons.svg#icon-check-done"></use>
      </svg>
   </div>
   <div class="env-toast__content">Hello, World! This is a Toast message.</div>
   <button class="env-toast__close">
      <span class="env-assistive-text">Close</span>
      <svg class="env-icon env-icon--small" aria-hidden="true">
         <use href="/sitevision/envision-icons.svg#icon-delete"></use>
      </svg>
   </button>
</div>

<div class="env-toast env-toast--primary env-toast--visible">
   <div class="env-toast__check">
      <svg class="env-icon env-icon--small" aria-hidden="true">
         <use href="/sitevision/envision-icons.svg#icon-check-done"></use>
      </svg>
   </div>
   <div class="env-toast__content">
      Hello, World! This is a Toast message. This Toast has several lines of
      toasty content!
   </div>
   <button class="env-toast__close">
      <span class="env-assistive-text">Close</span>
      <svg class="env-icon env-icon--small" aria-hidden="true">
         <use href="/sitevision/envision-icons.svg#icon-delete"></use>
      </svg>
   </button>
</div>
```

---

## Components – Tooltip
URL: https://envisionui.io/components/tooltip/
Description: Use Tooltip to display brief, informative messages when users hover over or focus on elements.

```html
<span class="env-tooltip">
   <a class="env-link" href="javascript:void(0)">Hover or focus</a>
   <span role="tooltip">A Tooltip</span>
</span>
```

## Initialization

All elements with classname `env-tooltip` and one child element with `role="tooltip"`
will be automatically initialized on `DOMContentLoaded`.

Elements with other classnames and elements added to the DOM after document was loaded must be initialized from script.
A child element with `role="tooltip"` is required.

```javascript
// Initialize elements added after DOMContentLoaded
envision.tooltip();
```

**Note:** HTML is not allowed inside the tooltip. For advanced content, please use [Popover Tooltip](/components/popover/#popover-tooltip).

## Configuration

Use data-attributes or option parameters in JavaScript for settings.

See [available options below](#options).

### Example using data-attributes

```html
<div class="example-input-fields">
   <div class="env-form-field">
      <label for="password-example" class="env-form-label">
         Password - show tooltip after one second
      </label>
      <div class="env-tooltip" data-placement="bottom-start" data-delay="1000">
         <input
            type="password"
            class="env-form-input"
            aria-describedby="password-example-tooltip"
            id="password-example"
         />
         <span role="tooltip" id="password-example-tooltip">
            Minimum of 8 characters
         </span>
      </div>
   </div>
</div>
```

### Example using JavaScript

```html
<span class="example-custom-init-tooltip">
   <button class="env-button">Show tooltip to the right</button>
   <span role="tooltip">Description of the button</span>
</span>
```

#### Initialization of JavaScript example

```javascript
const tooltipEl = document.querySelectorAll('.example-custom-init-tooltip');
if (tooltipEl) {
   envision.tooltip(tooltipEl, {
      placement: 'right',
      delay: 300,
   });
}
```

## Options

`envision.tooltip` takes two parameters:

```javascript
envision.tooltip(element, options);
```

- `element` - You may pass any selector as a string, a DOM node or node list. Leave empty to initialize all new elements with class `env-tooltip`.

- `options` - _{ placement, delay }_
   - `placement` _string_
      - Prefered initial placement.
      - Default value: `top`
      - Possible values: `top`, `right`, `bottom`, `left`, `auto`,
      - Possible value modifiers: `{value}-start`, `{value}-end`

   - `delay` _number_
      - Milliseconds for delaying the popover opening and closing.
      - Default value: `200`

---

## Dashboard – Basics
URL: https://envisionui.io/dashboard/basics/
Description: Basics of designing a dashboard widget

## Designing a Dashboard Widget

Use Envision components when possible.

When using custom CSS for styling, all colors should use Envision and Dashboard variables.
Other colors and hard coded color values should be avoided.

### Wrapper

Most dashboard widgets should be placed inside a wrapper element with class `env-dashboard-widget`.
This will set the correct background, borders and more for the widget. The wrapper does not set a padding.

<section class="env-dashboard-widget env-p-inline--large env-p-block--small env-m-block-end--large" style="width: fit-content">
   <h2 class="env-ui-text-sectionheading">
   Simple widget   
   </h2>
   <span class="env-ui-text-kpi-number" style="font-size: var(--env-ui-text-kpi-number-font-size-large)">96%</span>
</section>

```html noexample
<section class="env-dashboard-widget">
   <!-- widget content --->
</section>
```

### Widget sizes

There are four available sizes for a widget. The developer may decide which size or sizes a widget should support.
The selected available sizes will be available as a user setting when the widget is added to a dashboard.

The widgets will be placed in a grid with four columns. Depending on the available screen size and the selected widget size,
a widget may use between one and four columns.

A small widget will never use more than one column. An extra large widget will
use as many as available. A small widget will not vary much in size, but a large widget may use anything between
250 and 1440 pixels width.

For adapting a widget to different sizes, see [Responsive widgets](/dashboard/responsive-widgets/).

#### Widget size table

| Widget      | Columns | Sizes (px) |
| :---------- | :-----: | :--------: |
| Small       |    1    |  250–342   |
| Medium      |   1–2   |  250–708   |
| Large       |   1–3   |  250–1074  |
| Extra Large |   1–4   |  250–1440  |

## Widget example

<section class="env-dashboard-widget env-p-inline--large env-p-block--small" style="width: fit-content" role="presentation">
   <h2 class="env-ui-text-sectionheading">
      Chart widget example heading
   </h2>
   <div class="env-m-block--medium">
<p class="env-ui-text-value">
<span class="env-m-inline-end--large"><b class="env-dashboard-color-txt-orange-50">—</b>&nbsp;Legend line 1</span>
<span><b class="env-dashboard-color-txt-cyan-50">—</b>&nbsp;Legend line 2</span>
</p>
</div>
<div id="example-chart">
   <h3 class="env-ui-text-label example-chart-axis-label-y">
      Y axis label
   </h3>
   <ul class="example-chart-axis example-chart-axis--y">
      <li class="env-ui-text-value">1,200</li>
      <li class="env-ui-text-value">1,000</li>
      <li class="env-ui-text-value">800</li>
      <li class="env-ui-text-value">600</li>
      <li class="env-ui-text-value">400</li>
   </ul>
   <img class="env-border example-canvas"
           alt="Example chart" 
           src="https://envisionui.io/placeholders/examples/chart.webp" />
   <h3 class="env-ui-text-label example-chart-axis-label-x">
      X axis label
   </h3>
   <ul class="example-chart-axis example-chart-axis--x">
      <li class="env-ui-text-value">25 nov</li>
      <li class="env-ui-text-value">26 nov</li>
      <li class="env-ui-text-value">27 nov</li>
      <li class="env-ui-text-value">28 nov</li>
      <li class="env-ui-text-value">29 nov</li>
      <li>&nbsp;</li>
   </ul>
</div>
</section>

### Simplified code example

This example shows basic usage of CSS classes for headings, labels and more.

```html noexample
<section class="env-dashboard-widget">
   <h2 class="env-ui-text-sectionheading">Chart widget example heading</h2>
   <p class="env-ui-text-value">
      <span class="env-dashboard-color-txt-orange-50">—</span> Legend line 1
      <span class="env-dashboard-color-txt-cyan-50">—</span> Legend line 2
   </p>
   <h3 class="env-ui-text-label">Y axis label</h3>
   <ul>
      <li class="env-ui-text-value">1,200</li>
      ...
   </ul>
   <canvas
      aria-label="Example chart, this text should tell the chart values for accessibility."
      role="img"
   ></canvas>
   <h3 class="env-ui-text-label">X axis label</h3>
   <ul>
      <li class="env-ui-text-value">25 nov</li>
      ...
   </ul>
</section>
```

---

## Dashboard – Responsive widgets
URL: https://envisionui.io/dashboard/responsive-widgets/
Description: Use CSS container queries to make widgets responsive to different sizes.

Some widgets may need to use a responsive design to fit different widths. Media queries should **not** be used since the width
of the widget may not be relative to the viewport width. To make adaptions for [different widget sizes](/dashboard/basics/), use [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries).

The grid column container where the app will be displayed is a [containment context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries#using_container_queries) named `dashboard-widget`.

### Responsive widget example

<div class="example-responsive-widget-wrapper">
   <section class="env-dashboard-widget example-responsive-widget env-m-block-end--large">
      <div class="example-responsive-widget__resizeable env-p-inline--large env-p-block--small">
         <h2 class="env-ui-text-sectionheading">
            Responsive example widget   
         </h2>
         <p class="env-ui-text-kpi-number">96%</p>
         <p class="env-ui-text-caption env-text-align--right">Resize this widget <span style="font-size: 1.25em;transform: rotate(28deg) translate(0.2em, 0.2em);display: inline-block;">&rarr;</span></p>
      </div>
   </section>
</div>

```html noexample noexpand
<section class="env-dashboard-widget example-responsive-widget">
   <h2 class="env-ui-text-sectionheading">Responsive example widget</h2>
   <p class="env-ui-text-kpi-number">96%</p>
</section>
```

```css noexpand
@container dashboard-widget (max-width: 449px) {
   .example-responsive-widget .env-ui-text-kpi-number {
      font-size: var(--env-ui-text-kpi-number-font-size-small);
      color: var(--env-dashboard-color-pink-50);
   }
}

@container dashboard-widget (min-width: 580px) {
   .example-responsive-widget .env-ui-text-kpi-number {
      font-size: var(--env-ui-text-kpi-number-font-size-large);
      color: var(--env-dashboard-color-light-blue-90);
   }
}
```

---

## Dashboard – Widget colors
URL: https://envisionui.io/dashboard/widget-colors/
Description: The widget color palette provides a set of colors that can be used to style widgets.

Widgets should always use the widget color palette variables. In cases where using a variable is not possible,
for example in an image, the HEX values from the palette should be used.

### Color palette

Make sure color combinations are used that meets the WCAG 2 AA requirements. If unsure about a certain combination,
please use a [color contrast checker](https://webaim.org/resources/contrastchecker/) to validate.

<div class="env-cardholder-grid example-dashboard-color-grid" id="dashboard-color-list" data-display="all">
<!-- Color Palette Generated in JS -->
</div>

<div class="env-cardholder-grid example-dashboard-color-grid" style="margin:var(--env-cardholder-grid-gap) 0">
   <ul class="example-dashboard-color-list">
      <li class="env-dashboard-color-bg-black env-dashboard-color-txt-white" data-wcag-aa="true">
         <div>
            <span>Black
               <svg class="env-icon example-dashboard-color-list-icon"><use href="/images/docs-images.svg#text"></use></svg>*
            </span>
            <span>#202330</span>
         </div>
      </li>
      <li class="env-dashboard-color-bg-white env-border-inline env-border-block-end env-dashboard-color-txt-black" data-wcag-aa="false">
         <div>
            <span>White</span>
            <span>#ffffff</span>
         </div>
      </li>
   </ul>
</div>

<p class="doc-legend env-m-block-end--0">
   <svg class="env-icon example-dashboard-color-list-icon">
      <use href="/images/docs-images.svg#text"></use>
   </svg> = The color will pass WCAG 2 level AA contrast requirements as text on white (widget wrapper) background.
</p>
<p class="doc-legend">
   <span style="font-size:1.4em">*</span> = The color also passes contrast requirements if used as text on gray-05 (theme body) background.
</p>

### Color palette CSS variable names

Color variables are named `--env-dashboard-color-white`, `--env-dashboard-color-black` and `--env-dashboard-color-{colorName}-{variant}`.

Available color names: `red`,
`pink`,`purple`,`deep-purple`,`indigo`,`blue`,`light-blue`,`cyan`,`teal`,`green`,`light-green`,`lime`,`yellow`,`orange`,`brown`,`gray`

Available variants: `05`, `20`, `50`, `90`,

### Color palette utility classes

Simple decoration of areas may be done using CSS classes. Each palette color has a background and a foreground classname.

Available classnames are `env-dashboard-bg-color-{colorName}-{variant}` where `colorName` and `variant` follow the same
patterns as CSS variable names.

```html
<div
   class="env-dashboard-color-bg-purple-20 env-p--medium env-m-block-end--medium"
>
   This is a purple-20 area with default font color.
</div>
<div
   class="env-dashboard-color-bg-purple-50 env-dashboard-color-txt-white env-p--medium"
>
   This is a purple-50 area with white font color.
</div>
```

---

## Dashboard – Widget components
URL: https://envisionui.io/dashboard/widget-components/
Description: Styles for widget components such as labels, values, and badges.

## Values and labels

Additional styles only availble in widgets should be used for labels and values in charts and similar.

```html
<p class="env-ui-text-label">Axis label / Label</p>
<p class="env-ui-text-value">Axis value / Legend</p>
```

### Key performance indicators

For displaying key performance indicators you should use the `env-ui-text-kpi-number` class.
Set different sizes using CSS variables `--env-ui-text-kpi-number-font-size-{x}`.

```html
<span class="env-ui-text-kpi-number example-kpi-x-small">96%</span>
<span class="env-ui-text-kpi-number example-kpi-small">96%</span>
<span class="env-ui-text-kpi-number">96%</span>
<span class="env-ui-text-kpi-number example-kpi-large">96%</span>
<span class="env-ui-text-kpi-number example-kpi-x-large">96%</span>
```

```css
.example-kpi-x-small {
   font-size: var(--env-ui-text-kpi-number-font-size-x-small);
}

.example-kpi-small {
   font-size: var(--env-ui-text-kpi-number-font-size-small);
}

.example-kpi-large {
   font-size: var(--env-ui-text-kpi-number-font-size-large);
}

.example-kpi-x-large {
   font-size: var(--env-ui-text-kpi-number-font-size-x-large);
}
```

## Badges

If a value has changed for the better, the worse or is unchanged it may be displayed using one of the
widget specific badges availble.

```html
<span class="env-badge env-badge--negative">
   <svg class="env-icon env-icon--xx-small">
      <use href="/sitevision/envision-icons.svg#icon-arrow-fill-down"></use>
   </svg>
   Down 18%
</span>

<span class="env-badge env-badge--unchanged">
   <svg class="env-icon env-icon--xx-small">
      <use href="/sitevision/envision-icons.svg#icon-arrow-fill-right"></use>
   </svg>
   No change
</span>

<span class="env-badge env-badge--positive">
   <svg class="env-icon env-icon--xx-small">
      <use href="/sitevision/envision-icons.svg#icon-arrow-fill-up"></use>
   </svg>
   Up 18%
</span>
```

---

## Dashboard – Widget CSS variables
URL: https://envisionui.io/dashboard/widget-css-variables/
Description: Additional CSS variables for styling dashboard widgets.

## Palette Colors

- `--env-dashboard-color-black`
- `--env-dashboard-color-white`
- `--env-dashboard-color-red-05`
- `--env-dashboard-color-red-20`
- `--env-dashboard-color-red-50`
- `--env-dashboard-color-red-90`
- `--env-dashboard-color-pink-05`
- `--env-dashboard-color-pink-20`
- `--env-dashboard-color-pink-50`
- `--env-dashboard-color-pink-90`
- `--env-dashboard-color-purple-05`
- `--env-dashboard-color-purple-20`
- `--env-dashboard-color-purple-50`
- `--env-dashboard-color-purple-90`
- `--env-dashboard-color-deep-purple-05`
- `--env-dashboard-color-deep-purple-20`
- `--env-dashboard-color-deep-purple-50`
- `--env-dashboard-color-deep-purple-90`
- `--env-dashboard-color-indigo-05`
- `--env-dashboard-color-indigo-20`
- `--env-dashboard-color-indigo-50`
- `--env-dashboard-color-indigo-90`
- `--env-dashboard-color-blue-05`
- `--env-dashboard-color-blue-20`
- `--env-dashboard-color-blue-50`
- `--env-dashboard-color-blue-90`
- `--env-dashboard-color-light-blue-05`
- `--env-dashboard-color-light-blue-20`
- `--env-dashboard-color-light-blue-50`
- `--env-dashboard-color-light-blue-90`
- `--env-dashboard-color-cyan-05`
- `--env-dashboard-color-cyan-20`
- `--env-dashboard-color-cyan-50`
- `--env-dashboard-color-cyan-90`
- `--env-dashboard-color-teal-05`
- `--env-dashboard-color-teal-20`
- `--env-dashboard-color-teal-50`
- `--env-dashboard-color-teal-90`
- `--env-dashboard-color-green-05`
- `--env-dashboard-color-green-20`
- `--env-dashboard-color-green-50`
- `--env-dashboard-color-green-90`
- `--env-dashboard-color-light-green-05`
- `--env-dashboard-color-light-green-20`
- `--env-dashboard-color-light-green-50`
- `--env-dashboard-color-light-green-90`
- `--env-dashboard-color-lime-05`
- `--env-dashboard-color-lime-20`
- `--env-dashboard-color-lime-50`
- `--env-dashboard-color-lime-90`
- `--env-dashboard-color-yellow-05`
- `--env-dashboard-color-yellow-20`
- `--env-dashboard-color-yellow-50`
- `--env-dashboard-color-yellow-90`
- `--env-dashboard-color-orange-05`
- `--env-dashboard-color-orange-20`
- `--env-dashboard-color-orange-50`
- `--env-dashboard-color-orange-90`
- `--env-dashboard-color-brown-05`
- `--env-dashboard-color-brown-20`
- `--env-dashboard-color-brown-50`
- `--env-dashboard-color-brown-90`
- `--env-dashboard-color-gray-05`
- `--env-dashboard-color-gray-20`
- `--env-dashboard-color-gray-50`
- `--env-dashboard-color-gray-90`

### Additional UI Text variables

- `--env-ui-text-label-font-family`
- `--env-ui-text-label-font-color`
- `--env-ui-text-label-font-size`
- `--env-ui-text-label-font-weight`
- `--env-ui-text-label-text-transform`
- `--env-ui-text-label-letter-spacing`
- `--env-ui-text-value-font-family`
- `--env-ui-text-value-font-color`
- `--env-ui-text-value-font-size`
- `--env-ui-text-value-font-weight`
- `--env-ui-text-value-text-transform`
- `--env-ui-text-value-letter-spacing`
- `--env-ui-text-kpi-number-font-family`
- `--env-ui-text-kpi-number-font-color`
- `--env-ui-text-kpi-number-font-size`
- `--env-ui-text-kpi-number-font-weight`
- `--env-ui-text-kpi-number-text-transform`
- `--env-ui-text-kpi-number-letter-spacing`
- `--env-ui-text-kpi-number-font-size-x-small`
- `--env-ui-text-kpi-number-font-size-small`
- `--env-ui-text-kpi-number-font-size-medium`
- `--env-ui-text-kpi-number-font-size-large`
- `--env-ui-text-kpi-number-font-size-x-large`

---

## Dashboard – Widget typography
URL: https://envisionui.io/dashboard/widget-typography/
Description: Typography guidelines for dashboard widgets.

The widget theme uses [Inter](https://fonts.google.com/specimen/Inter) font family which has support for nine different weights
100-900. Other font familes should in most cases not be used.

```html nocode
<p class="example-fw-100">Thin 100 — The quick brown fox jumps … 123456789</p>
<p class="example-fw-200">
   Extra Light 200 — The quick brown fox jumps … 123456789
</p>
<p class="example-fw-300">Light 300 — The quick brown fox jumps … 123456789</p>
<p class="example-fw-400">Normal 400 — The quick brown fox jumps … 123456789</p>
<p class="example-fw-500">Medium 500 — The quick brown fox jumps … 123456789</p>
<p class="example-fw-600">
   Semi Bold 600 — The quick brown fox jumps … 123456789
</p>
<p class="example-fw-700">Bold 700 — The quick brown fox jumps … 123456789</p>
<p class="example-fw-800">
   Extra Bold 800 — The quick brown fox jumps … 123456789
</p>
<p class="example-fw-900">Black 900 — The quick brown fox jumps … 123456789</p>
```

```css
/* Available weights 100–900 */
.example-fw-100 {
   font-weight: 100;
}
```

### Headings

Widgets should use [UI Text](/typography/ui-text/) for headings.

```html
<p class="env-ui-text-overline">Overline</p>
<h1 class="env-ui-text-heading">Heading</h1>
<h2 class="env-ui-text-sectionheading">Section heading</h2>
<h3 class="env-ui-text-subheading">Subheading</h3>
<p class="env-ui-text-caption">Caption / description</p>
```

### Dynamic font size in widgets

Widgets already has a containment context which makes them dynamic font containers by default.
Therefore the dynamic font container is **not** required.

Here is an overview of how different size widgets will change size at different Dashboard grid sizes.
The dashboard grid adapts between 1–4 columns depending on available screen space.

| Widget      | 1 column | 2 columns | 3 columns | 4 columns |
| :---------- | -------: | --------: | --------: | --------: |
| Small       |  250–342 |   250–342 |   250–342 |   250–342 |
| Medium      |  250–523 |   524–708 |   534–708 |   524–708 |
| Large       |  250–523 |   524-812 |  813-1071 |  798–1074 |
| Extra Large |  250–523 |   524-812 |  813-1071 | 1072–1440 |

There are additional widget specific boundaries available for Dynamic fonts. Regular boundaries are documented
on the [Dynamic font size page](/typography/dynamic-font-size/#scaling-width-boundaries).
Boundaries are set using modifier classes `env-dynamic-font--from-{value}` and `env-dynamic-font--to-{value}`.

Additional boundaries for **from** values: `524`, `813`, `1072`

Additional boundaries for **to** values: `342`, `523`, `708`, `812`, `1071`, `1440`

---

## Forms – Button group
URL: https://envisionui.io/forms/button-group/
Description: Button Group groups related buttons together, providing a unified interface for multiple actions.

## Types

```html
<div class="env-button-group" role="group">
   <button type="button" class="env-button">Default</button>

   <button type="button" class="env-button env-button--primary">Primary</button>

   <button type="button" class="env-button env-button--success">Success</button>

   <button type="button" class="env-button env-button--danger">Danger</button>
</div>
```

---

## Forms – Button
URL: https://envisionui.io/forms/button/
Description: Buttons provide interactive elements with various styles, sizes, and icon options.

## Standard button types

Buttons in Envision can be used to trigger actions (for example, save, submit, or close) or to
navigate to other pages or routes.

A button can be implemented as either a `<button>` element or an `<a>` element styled as a button,
depending on whether it triggers an action or navigates the user.

```html
<p>
   <button type="button" class="env-button">Default</button>

   <button type="button" class="env-button env-button--brand">Brand</button>

   <button type="button" class="env-button env-button--primary">Primary</button>

   <button type="button" class="env-button env-button--secondary">
      Secondary
   </button>
</p>
<p>
   <button type="button" class="env-button env-button--success">Success</button>

   <button type="button" class="env-button env-button--warning">Warning</button>

   <button type="button" class="env-button env-button--danger">Danger</button>

   <button type="button" class="env-button env-button--info">Info</button>
</p>
<p>
   <button
      type="button"
      class="env-button env-button--primary env-button--ghost"
   >
      Ghost
   </button>

   <button type="button" class="env-button env-button--link">Link</button>
</p>
```

## Call to Action button <span class="doc-badge doc-badge--info">2026.01.1</span>

A call-to-action (CTA) button is a prominently styled button designed to encourage users to take a specific
desired action. It is typically used in marketing-oriented layouts and links to a page, form, or other
important destination.

```html
<p>
   <a href="javascript:void(0)" class="env-cta">Call to Action</a>
</p>
```

### Call to action button color variants

CTA buttons are available in brand and contextual color variants, allowing you to adapt the visual emphasis
to different use cases and content contexts.

Valid modifiers: `brand`, `primary`, `secondary`, `success`, `danger`, `info`, `warning`

```html
<p>
   <a href="javascript:void(0)" class="env-cta env-cta--brand"
      >Call to Action</a
   >
   <a href="javascript:void(0)" class="env-cta env-cta--primary"
      >Call to Action</a
   >
   <a href="javascript:void(0)" class="env-cta env-cta--success"
      >Call to Action</a
   >
</p>
```

## Sizes

Standard buttons are available in four sizes: large, default, small, and slim.

```html
<p>
   <button
      type="button"
      class="env-button env-button--primary env-button--large"
   >
      Large
   </button>
   <button type="button" class="env-button env-button--large">Large</button>
</p>

<p>
   <button type="button" class="env-button env-button--primary">Default</button>
   <button type="button" class="env-button">Default</button>
</p>

<p>
   <button
      type="button"
      class="env-button env-button--primary env-button--small"
   >
      Small
   </button>
   <button type="button" class="env-button env-button--small">Small</button>
</p>

<p>
   <button
      type="button"
      class="env-button env-button--primary env-button--slim"
   >
      Slim
   </button>
   <button type="button" class="env-button env-button--slim">Slim</button>
</p>
```

## Block

A block button spans the full width of its container. All button types and sizes, including CTA buttons,
are available as block buttons.

```html
<p>
   <button type="button" class="env-button env-button--large env-button--block">
      Large
   </button>
</p>

<p>
   <button
      type="button"
      class="env-button env-button--primary env-button--block"
   >
      Default
   </button>
</p>

<p>
   <button
      type="button"
      class="env-button env-button--secondary env-button--small env-button--block"
   >
      Small
   </button>
</p>

<p>
   <button type="button" class="env-button env-button--slim env-button--block">
      Slim
   </button>
</p>

<p>
   <a href="javascript:void(0)" class="env-cta env-cta--block"
      >Call to Action</a
   >
</p>
```

## Standard button icons

For standard buttons, additional modifier classes are used to position icons as desired.

### Icon button types

```html
<button type="button" class="env-button env-button--primary env-button--icon">
   Icon only, assistive text
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>
<button
   type="button"
   class="env-button env-button--primary env-button--ghost env-button--icon env-button--icon-before"
>
   Icon before
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>
<button
   type="button"
   class="env-button env-button--secondary env-button--icon env-button--icon-after"
>
   Icon after
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>
<button
   type="button"
   class="env-button env-button--icon env-button--icon-before env-button--icon-after"
>
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-star"></use>
   </svg>
   Icons before & after
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>
```

### Icon button sizes

```html
<button
   type="button"
   class="env-button env-button--small env-button--primary env-button--icon"
>
   Size small, icon only, assistive text
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>

<button
   type="button"
   class="env-button env-button--small env-button--primary env-button--icon env-button--icon-before"
>
   Small
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>

<button type="button" class="env-button env-button--primary env-button--icon">
   Size medium, icon only, assistive text
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>

<button
   type="button"
   class="env-button env-button--primary env-button--icon env-button--icon-before"
>
   Medium
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>

<button
   type="button"
   class="env-button env-button--large env-button--primary env-button--icon"
>
   Size large, icon only, assistive text
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>

<button
   type="button"
   class="env-button env-button--large env-button--primary env-button--icon env-button--icon-before"
>
   Large
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>
```

### Small icon size

```html
<button
   type="button"
   class="env-button env-button--primary env-button--icon env-button--icon-small"
>
   Size medium, icon only, assistive text
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>

<button
   type="button"
   class="env-button env-button--primary env-button--icon env-button--icon-small env-button--icon-before"
>
   Medium
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>
```

### Icon above

Available in medium and large size.

```html
<button
   type="button"
   class="env-button env-button--primary env-button--icon env-button--icon-above"
>
   Above
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>

<button
   type="button"
   class="env-button env-button--primary env-button--icon env-button--icon-above env-button--large"
>
   Above
   <svg class="env-icon">
      <use href="/sitevision/envision-icons.svg#icon-phone"></use>
   </svg>
</button>
```

## Call to Action button icons

CTA buttons can also include icons, positioned before or after the text. No additional modifier classes
are required for the button itself.

The icons can be sized using the standard icon size modifier classes.

```html
<p>
   <a href="javascript:void(0)" class="env-cta">
      <svg class="env-icon env-icon--small">
         <use href="/sitevision/envision-icons.svg#icon-phone"></use>
      </svg>
      Call to Action
   </a>
   <a href="javascript:void(0)" class="env-cta">
      Call to Action
      <svg class="env-icon env-icon--x-small">
         <use href="/sitevision/envision-icons.svg#icon-phone"></use>
      </svg>
   </a>
</p>
```

## State

### Disabled

The disabled state is available for standard buttons.

```html
<button type="button" class="env-button" disabled>Disabled</button>
```

---

## Forms – Form elements
URL: https://envisionui.io/forms/form-elements/
Description: Form elements structures user inputs with labels, controls, and consistent spacing.

## Basics

Wrap the form in `.env-form`.

Each form field combination of text label and form control may optionally be wrapped in
`.env-form-field` for consistent spacing.
The form field wrapper may also contain a help text using `.env-form-field-help`.

```html
<form class="env-form" action="/">
   <div class="env-form-field">
      <label for="text-1" class="env-form-label">Input text</label>
      <input
         type="text"
         class="env-form-input"
         placeholder="Placeholder text"
         aria-describedby="text-1-help"
         id="text-1"
      />
      <p id="text-1-help" class="env-form-field-help">Form field help</p>
   </div>
   <button class="env-button env-button--primary">Submit</button>
</form>
```

### Form control container

The class `.env-form-control` creates a multipurpose container used to group and enhance form
controls and related elements.

Common elements used inside `.env-form-control` include:

- `.env-form-label`
- `.env-form-input`
- `.env-button`
- `.env-icon`
- `.env-radio`
- `.env-checkbox`
- `.env-switch`

#### Usages

Create an [input group](#input-group) with a label, input and button using a combination of
`.env-form-input`, `.env-button`, and `.env-form-label`.

```html
<div class="env-form-field">
   <label for="text-2" class="env-form-label">Phone number</label>
   <div class="env-form-control">
      <label for="text-2" class="env-form-label" aria-hidden="true">
         <svg class="env-icon env-icon--x-small">
            <use href="/sitevision/envision-icons.svg#icon-phone"></use>
         </svg>
      </label>
      <input
         type="tel"
         class="env-form-input"
         placeholder="+46 19 123 45 67"
         id="text-2"
      />
      <button class="env-button env-button--primary">Submit</button>
   </div>
</div>
```

[Option elements](#option-elements), such as radio buttons, checkboxes and switches should use
the wrapper together with a label for alignment and spacing.

Use `.env-radio`, `.env-checkbox`, or `.env-switch` together with `.env-form-label`.

```html
<div class="env-form-control">
   <input class="env-checkbox" type="checkbox" id="checkbox-1" checked />
   <label class="env-form-label" for="checkbox-1">Checkbox</label>
</div>
```

Add [icons](#input-icons) to input fields using the combination of `.env-form-input` and `.env-icon`.

```html
<div class="env-form-field">
   <label for="search-1" class="env-form-label">Search</label>
   <div class="env-form-control">
      <svg aria-hidden="true" class="env-icon">
         <use href="/sitevision/envision-icons.svg#icon-search"></use>
      </svg>
      <input
         type="search"
         class="env-form-input env-form-input--search"
         placeholder="Placeholder text"
         id="search-1"
      />
   </div>
</div>
```

## Input elements

```html
<div class="env-form-field">
   <label for="text-3" class="env-form-label">Text input</label>
   <input
      type="text"
      class="env-form-input"
      placeholder="Placeholder text"
      id="text-3"
   />
</div>
```

### Search input element

Use `.env-form-input` and `[type="search"]` for search input elements.
Add modifier class `.env-form-input--search` to display a clear button.

```html
<div class="env-form-field">
   <label for="search-2" class="env-form-label">Search input</label>
   <input
      type="search"
      class="env-form-input env-form-input--search"
      placeholder="Placeholder text"
      id="search-2"
   />
</div>
```

### Textarea element

Use `.env-form-input` for a textarea element. Add `rows` attribute to specify the number of visible text lines.
The textarea will be resizable vertically.

```html
<div class="env-form-field">
   <label for="textarea-1" class="env-form-label">Textarea</label>
   <textarea
      class="env-form-input"
      placeholder="Placeholder text"
      id="textarea-1"
      rows="3"
   ></textarea>
</div>
```

### Contenteditable element

Make sure to add `role="textbox"` and `aria-multiline="true"` to the contenteditable element.
The contenteditable element should also have `aria-label` or `aria-labelledby` attribute since a native label element
is not allowed.

An optional placeholder may be added using attribute `aria-placeholder` on the contenteditable element.

```html
<div class="env-form-field">
   <div class="env-form-label" id="contenteditable-header">Contenteditable</div>
   <div class="env-form-control">
      <div
         role="textbox"
         class="env-form-input"
         aria-labelledby="contenteditable-header"
         aria-multiline="true"
         aria-placeholder="Placeholder text"
         contenteditable
      ></div>
   </div>
</div>
```

## Select element and component

**Updated in 2025.05.1.**
With the introduction of [Customizable select elements](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select),
both the Select element and the Select component support a progressively enhanced approach that applies
as much of the Envision styling as possible while maintaining native select element functionality.
This feature is opt-in and can be enabled by adding a `button` with a `selectedcontent` tag inside the select element.

### Select component

A `<select>` element wrapped in an element with the class `.env-form-select` will have the
most consistent appearance across browsers. The dropdown arrow uses the `.env-icon` class and can
be customized.

```html
<div class="env-form-field">
   <label for="select-1" class="env-form-label">Select component</label>
   <div class="env-form-select">
      <select id="select-1">
         <option>Item</option>
         <option>Item 2</option>
         <option>Item 3</option>
         <option>Item 4</option>
      </select>
      <svg aria-hidden="true" class="env-icon">
         <use href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
   </div>
</div>
```

### Customizable select <span class="doc-badge doc-badge--info">2025.05.1</span>

To opt in to the customizable version — which uses theme fonts, colors, and allows icons — add a `button` as
the first child of the `select`, with a `selectedcontent` element inside the `button`. Use the `.env-icon` class to
display icons in the options or in the selected value.

<div className={'doc-code-example'}>
   <div className="env-form-field">
      <label for="select-2" className="env-form-label">
         <>Customizable select component</>
      </label>
      <div className="env-form-select">
         <select id="select-2">
            <button>
               <selectedcontent></selectedcontent>
            </button>
            <option>
               <svg className="env-icon" aria-hidden="true">
                  <use href="/sitevision/envision-icons.svg#icon-file"></use>
               </svg>{' '}
               <>Option 1</>
            </option>
            <option>
               <svg className="env-icon" aria-hidden="true">
                  <use href="/sitevision/envision-icons.svg#icon-files"></use>
               </svg>{' '}
               <>Option 2</>
            </option>
            <option>
               <svg className="env-icon" aria-hidden="true">
                  <use href="/sitevision/envision-icons.svg#icon-image"></use>
               </svg>{' '}
               <>Option 3</>
            </option>
            <option>
               <svg className="env-icon" aria-hidden="true">
                  <use href="/sitevision/envision-icons.svg#icon-images"></use>
               </svg>{' '}
               <>Option 4</>
            </option>
         </select>
         <svg aria-hidden="true" className="env-icon">
            <use href="/sitevision/envision-icons.svg#icon-angle-down"></use>
         </svg>
      </div>
   </div>
</div>

```html noexample
<div class="env-form-field">
   <label for="select-2" class="env-form-label"
      >Customizable select component</label
   >
   <div class="env-form-select">
      <select id="select-2">
         <button>
            <selectedcontent></selectedcontent>
         </button>
         <option>
            <svg class="env-icon" aria-hidden="true">
               <use href="/sitevision/envision-icons.svg#icon-file"></use>
            </svg>
            Option 1
         </option>
         <option>
            <svg class="env-icon" aria-hidden="true">
               <use href="/sitevision/envision-icons.svg#icon-files"></use>
            </svg>
            Option 2
         </option>
         <option>
            <svg class="env-icon" aria-hidden="true">
               <use href="/sitevision/envision-icons.svg#icon-image"></use>
            </svg>
            Option 3
         </option>
         <option>
            <svg class="env-icon" aria-hidden="true">
               <use href="/sitevision/envision-icons.svg#icon-images"></use>
            </svg>
            Option 4
         </option>
      </select>
      <svg aria-hidden="true" class="env-icon">
         <use href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
   </div>
</div>
```

### Select element

Native select element with class `.env-form-input`. Only light styling, might look different in different browsers.

<div className={'doc-code-example'}>
   <div className="env-form-field">
      <label for="select-3" className="env-form-label">
         <>Select element</>
      </label>
      <select className="env-form-input" id="select-3">
         <option>Item</option>
         <option>Item 2</option>
         <option>Item 3</option>
         <option>Item 4</option>
      </select>
   </div>
   <div class="env-form-field">
      <label for="select-4" className="env-form-label">
         <>Customizable select element</>
      </label>
      <select className="env-form-input" id="select-4">
         <button>
            <selectedcontent></selectedcontent>
         </button>
         <option>Item</option>
         <option>Item 2</option>
         <option>Item 3</option>
         <option>Item 4</option>
      </select>
   </div>
   <div class="env-form-field">
      <label for="multiple-select-1" className="env-form-label">
         <>Multiple select</>
      </label>
      <select className="env-form-input" id="multiple-select-1" multiple>
         <option>Item</option>
         <option>Item 2</option>
         <option>Item 3</option>
         <option>Item 4</option>
      </select>
   </div>
</div>

```html noexample
<div class="env-form-field">
   <label for="select-3" class="env-form-label">Select element</label>
   <select class="env-form-input" id="select-3">
      <option>Item</option>
      <option>Item 2</option>
      <option>Item 3</option>
      <option>Item 4</option>
   </select>
</div>
<div class="env-form-field">
   <label for="select-4" class="env-form-label"
      >Customizable select element</label
   >
   <select class="env-form-input" id="select-4">
      <button>
         <selectedcontent></selectedcontent>
      </button>
      <option>Item</option>
      <option>Item 2</option>
      <option>Item 3</option>
      <option>Item 4</option>
   </select>
</div>
<div class="env-form-field">
   <label for="multiple-select-1" class="env-form-label">Multiple select</label>
   <select class="env-form-input" id="multiple-select-1" multiple>
      <option>Item</option>
      <option>Item 2</option>
      <option>Item 3</option>
      <option>Item 4</option>
   </select>
</div>
```

## Option elements

### Radiobutton input element

Related radiobutton elements should be wrapped by a fieldset element to indicate group membership of the contained elements.

Use `.env-form-control` to wrap `.env-radio` and `.env-form-label.

```html
<fieldset class="env-form-fieldset">
   <legend class="env-form-legend">Radio button</legend>
   <div class="env-form-field">
      <div class="env-form-control">
         <input
            class="env-radio"
            type="radio"
            id="radio-1"
            name="radios"
            value="1"
            checked
         />
         <label class="env-form-label" for="radio-1">Alternative 1</label>
      </div>
   </div>
   <div class="env-form-field">
      <div class="env-form-control">
         <input
            class="env-radio"
            type="radio"
            id="radio-2"
            name="radios"
            value="2"
         />
         <label class="env-form-label" for="radio-2">Alternative 2</label>
      </div>
   </div>
</fieldset>
```

### Checkbox input element

Related checkbox elements should be wrapped by a fieldset element to indicate group membership of the contained elements.

Use `.env-form-control` to wrap `.env-checkbox` and `.env-form-label`.

```html
<fieldset class="env-form-fieldset">
   <legend class="env-form-legend">Checkbox</legend>
   <div class="env-form-field">
      <div class="env-form-control">
         <input
            class="env-checkbox"
            type="checkbox"
            id="checkbox-2"
            name="checkboxes"
            checked
         />
         <label class="env-form-label" for="checkbox-2">One option</label>
      </div>
   </div>
   <div class="env-form-field">
      <div class="env-form-control">
         <input
            class="env-checkbox"
            type="checkbox"
            id="checkbox-3"
            name="checkboxes"
         />
         <label class="env-form-label" for="checkbox-3">Another option</label>
      </div>
   </div>
</fieldset>
```

### Switch component

Use `.env-form-control` to wrap an `.env-switch` checkbox and `.env-form-label`.

```html
<div class="env-form-control">
   <input
      class="env-switch"
      type="checkbox"
      id="switch-1"
      name="switches"
      checked
   />
   <label class="env-form-label" for="switch-1">One option</label>
</div>
```

## Range input element <span class="doc-badge doc-badge--info">2026.05.1</span>

Use an input element with class `.env-range` and `[type="range"]`.

For the deprecated two-handle component, see [Range slider](/deprecated/range-slider/).

```html
<div class="env-form-field">
   <label for="range-1" class="env-form-label">Range input</label>
   <input class="env-range" type="range" id="range-1" />
</div>
```

To display step markers below the input, add a `datalist` element and connect it to the input
with the `list` attribute. The `datalist` must contain `option` elements with a `value` attribute.

```html
<div class="env-form-field">
   <label for="range-2" class="env-form-label">Range with markers</label>
   <input
      class="env-range"
      type="range"
      id="range-2"
      value="100"
      min="50"
      max="250"
      step="50"
      list="range-2-markers"
   />
</div>
<datalist id="range-2-markers">
   <option value="50"></option>
   <option value="100"></option>
   <option value="150"></option>
   <option value="200"></option>
   <option value="250"></option>
</datalist>
```

All elements with class `.env-range` and `[type="range"]` are automatically initialized on
`DOMContentLoaded`.

Range elements added to the DOM after the document has loaded must be initialized from script.

```javascript
// Initialize range elements added after DOMContentLoaded
envision.range();
```

<div id="input-icons"></div>

## Icons in input fields

Use `.env-form-control` to wrap `.env-icon` and `.env-form-input`.

```html
<div class="example-input-fields">
   <div class="env-form-field">
      <label for="search-3" class="env-form-label"
         >Input search with cancel button + icon left</label
      >
      <div class="env-form-control">
         <svg aria-hidden="true" class="env-icon">
            <use href="/sitevision/envision-icons.svg#icon-search"></use>
         </svg>
         <input
            type="search"
            class="env-form-input env-form-input--search"
            placeholder="Placeholder text"
            id="search-3"
         />
      </div>
   </div>
   <div class="env-form-field">
      <label for="text-4" class="env-form-label">Input text + icon right</label>
      <div class="env-form-control">
         <input
            type="text"
            class="env-form-input"
            placeholder="Placeholder text"
            id="text-4"
         />
         <svg aria-hidden="true" class="env-icon">
            <use href="/sitevision/envision-icons.svg#icon-star"></use>
         </svg>
      </div>
   </div>
</div>
```

## Input group

Wrap text, input and button with `.env-form-control` to create an input group.
Use `.env-form-control` to wrap `.env-checkbox` and `.env-form-label`.

```html
<div class="example-input-fields">
   <div class="env-form-field">
      <label for="email-1" class="env-form-label">Subscribe</label>
      <div class="env-form-control">
         <label for="email-1" class="env-form-label">@</label>
         <input
            type="email"
            class="env-form-input"
            placeholder="example@domain.com"
            id="email-1"
         />
         <button type="submit" class="env-button env-button--primary">
            Submit
         </button>
      </div>
   </div>
   <div class="env-form-field">
      <label for="search-4" class="env-form-label">Search</label>
      <div class="env-form-control">
         <input
            type="search"
            class="env-form-input env-form-input--search"
            placeholder="Search this site"
            id="search-4"
         />
         <button
            type="submit"
            class="env-button env-button--secondary env-button--icon"
         >
            Search
            <svg aria-hidden="true" class="env-icon">
               <use href="/sitevision/envision-icons.svg#icon-search"></use>
            </svg>
         </button>
      </div>
   </div>
</div>
```

## States

### Disabled & Readonly

Attribute `[disabled]` may be placed on form elements or fieldset elements to disable the form control(s).
Attribute `[readonly]` is also available for input elements.

```html
<form class="env-form" action="/">
   <div class="env-form-field">
      <label for="text-disabled" class="env-form-label"
         >Disabled text input</label
      >
      <input
         type="text"
         class="env-form-input"
         id="text-disabled"
         placeholder="Disabled"
         disabled
      />
   </div>
   <div class="env-form-field">
      <div class="env-form-control">
         <input
            class="env-checkbox"
            type="checkbox"
            name="options"
            id="checkbox-disabled"
            checked
            disabled
         />
         <label for="checkbox-disabled" class="env-form-label">
            Disabled checkbox
         </label>
      </div>
   </div>
   <div class="env-form-field">
      <div class="env-form-control">
         <input
            id="radio-disabled-1"
            class="env-radio"
            type="radio"
            checked
            disabled
         />
         <label for="radio-disabled-1" class="env-form-label">
            Disabled radio button
         </label>
      </div>
   </div>
   <fieldset class="env-form-fieldset" disabled>
      <legend class="env-form-legend">Disabled radio button group</legend>
      <div class="env-form-field">
         <div class="env-form-control">
            <input id="radio-disabled-2" class="env-radio" type="radio" />
            <label for="radio-disabled-2" class="env-form-label">
               Disabled radio button group
            </label>
         </div>
      </div>
      <div class="env-form-field">
         <div class="env-form-control">
            <input
               id="radio-disabled-3"
               class="env-radio"
               type="radio"
               checked
            />
            <label for="radio-disabled-3" class="env-form-label">
               Disabled radio button group
            </label>
         </div>
      </div>
   </fieldset>
   <div class="env-form-field">
      <div class="env-form-control">
         <label for="switch-disabled" class="env-form-label">
            Disabled switch
         </label>
         <input
            class="env-switch"
            type="checkbox"
            name="options"
            id="switch-disabled"
            checked
            disabled
         />
      </div>
   </div>
   <div class="env-form-field">
      <label for="text-readonly" class="env-form-label"
         >Readonly text input</label
      >
      <input
         type="text"
         class="env-form-input"
         id="text-readonly"
         placeholder="Readonly"
         readonly
      />
   </div>
</form>
```

## Validation error

Add modifier `.env-form-field--error` to define error validation state.
The `aria-describedby` attribute should be used to reference the `ID` of the text that describes the element.

Error validation state uses the Status color [Error text](/colors/status-colors/).

```html
<div class="env-form-field env-form-field--error">
   <label for="text-error" class="env-form-label">Error</label>
   <input
      type="text"
      class="env-form-input"
      id="text-error"
      aria-describedby="error-feedback"
   />
   <p id="error-feedback" class="env-form-field-help">Error feedback</p>
</div>
```

## Deprecated

[Deprecated legacy form classes and components can be found here](/deprecated/form/).

---

## Forms – Form layout
URL: https://envisionui.io/forms/form-layout/
Description: Form Layout offers structured classes for creating accessible, consistent, and responsive form layouts.

The class `.env-form-row` creates a multi purpose container used to create form layouts. The class `.env-form-column-{n}` inside a row will control the sizing of the columns.

When using form layouts, generally the `.env-form-field` wrapper is not needed.

### Form columns

Use `.env-form-row` as a wrapper for multiple `.env-form-column-{n}` elements to place form fields horizontally.

Use `.env-form-column-{n}` to specify the width of an element relative to other elements on the row.
Valid values are `1-6`. Default is `1`.

Form fields may optionally be stacked below a certain container width. Use `.env-form-row--stack-{width}` to activate.
Valid values for `{width}` is `s`, `m` and `l`.

```html resizeable
<form class="env-form" action="/">
   <div class="env-form-row env-form-row--stack-m">
      <div class="env-form-column-1">
         <label for="text-5" class="env-form-label">First name</label>
         <input type="text" class="env-form-input" id="text-5" />
      </div>
      <div class="env-form-column-1">
         <label for="text-6" class="env-form-label">Last name</label>
         <input type="text" class="env-form-input" id="text-6" />
      </div>
   </div>
   <div class="env-form-row">
      <button type="submit" class="env-button env-button--primary">
         Submit
      </button>
   </div>
</form>
```

### Horizontal form field

Combine `.env-form-column-{n}` with `.env-form-label` and `.env-form-control` inside an `.env-form-row` element to place
label and control horizontally.

Use `.env-form-column-{n}` on the label or control element to specify the width of
label and control relative to each other. Valid values are `1-6`. Default is `1`.

Stacking is supported using `.env-form-row--stack-{width}`. Valid values for `{width}` is `s`, `m` and `l`.

```html resizeable
<form class="env-form" action="/">
   <div class="env-form-row env-form-row--stack-m">
      <label for="first-name" class="env-form-label env-form-column-1"
         >First name</label
      >
      <div class="env-form-control env-form-column-4">
         <input type="text" class="env-form-input" id="first-name" />
      </div>
   </div>
   <div class="env-form-row env-form-row--stack-m">
      <label for="last-name" class="env-form-label env-form-column-1"
         >Last name</label
      >
      <div class="env-form-control env-form-column-4">
         <input type="text" class="env-form-input" id="last-name" />
      </div>
   </div>
</form>
```

### Inline option elements

Use `.env-form-row` as a wrapper for multiple `.env-form-control` elements containing `.env-radio` or `.env-checkbox`
to create a inline form layout for option inputs with consistent spacing vetically and horizontally.

```html resizeable
<fieldset class="env-form-fieldset">
   <legend class="env-form-legend">Radio buttons inline</legend>
   <div class="env-form-row">
      <div class="env-form-control">
         <input
            class="env-radio"
            type="radio"
            id="radio-inline-1"
            name="inlineradios"
            value="1"
         />
         <label class="env-form-label" for="radio-inline-1"
            >Alternative 1</label
         >
      </div>
      <div class="env-form-control">
         <input
            class="env-radio"
            type="radio"
            id="radio-inline-2"
            name="inlineradios"
            value="2"
            checked
         />
         <label class="env-form-label" for="radio-inline-2"
            >Alternative 2</label
         >
      </div>
      <div class="env-form-control">
         <input
            class="env-radio"
            type="radio"
            id="radio-inline-3"
            name="inlineradios"
            value="2"
         />
         <label class="env-form-label" for="radio-inline-3"
            >Alternative 3</label
         >
      </div>
   </div>
</fieldset>
```

---

## Forms – Tag Select
URL: https://envisionui.io/forms/tag-select/
Description: Tag Select enables customizable multi-select interfaces with cross-browser support and styling.

Tag select is a JS alternative to `<select>` that allows you to create a nice looking multi-select with cross browser
styling.

Tag Select offers an API for creating interaction with the component.

## Configuration and initialization

By default, Tag select will use the HTML markup to generate the data.

```html
<div class="env-form-field">
   <label for="example-tag-select-1" class="env-form-label">Tag select</label>
   <select
      class="env-form-input"
      id="example-tag-select-1"
      aria-label="Tag select"
   >
      <option value="">Select an item ...</option>
      <option value="item-1">Item</option>
      <option value="item-2">Item 2</option>
      <option value="item-3">Item 3</option>
      <option value="item-4">Item 4</option>
   </select>
</div>
```

Initialize from script. You may pass any selector as a string, a DOM node or node list.

```javascript
var tagSelect = envision.select('#example-tag-select-1');
```

**Note:** `envision.select` will return a Promise. Use the instance method `.then()` to access individual controls.

```javascript
tagSelect.then(function (selects) {
   selects[0].addOptions({ value: 'newOption', text: 'New option' });
});
```

## Single select

Create a Single select by using a Tag select and set `maxItems` to `1`.
Note: Clear and remove buttons will not be available in a single select.

Use `allowEmptyOption` and `sortField` to make behaviour similar to native select element.

```html
<div class="env-form-field">
   <label for="example-tag-select-single-1" class="env-form-label">
      Tag select single
   </label>
   <select
      class="env-form-input"
      id="example-tag-select-single-1"
      aria-label="Tag select single"
   >
      <option value="">Select an item ...</option>
      <option value="item-1">Item</option>
      <option value="item-3">Item 3</option>
      <option value="item-2">Item 2</option>
      <option value="item-4">Item 4</option>
   </select>
</div>
```

```javascript
var singleSelectExample = envision.select('#example-tag-select-single-1', {
   maxItems: 1,
   allowEmptyOption: true,
   sortField: [{ field: '$order' }, { field: '$score' }],
});
```

## Options

- `maxItems` _number_
   - The max number of items the user can select.
   - Default value: `null` (unlimited)
   - Set to `1` to create a Single select.

- `create` _boolean_
   - Allow adding new tags
   - Default value: `false`

- `createFilter` _RegExp_ | _'string'_ | _function(input)_
   - Specifies a RegExp or a string containing a regular expression that the current search filter must match to be allowed to be created. May also be a predicate function that takes the filter text and returns whether it is allowed.

- `clearButton` _boolean_
   - Show clear all button
   - Default value: `true`
   - Not available in Single select

- `allowEmptyOption` _boolean_
   - Only available in Single select
   - Option with no value will be selectable if set to true.
   - Default value: `false`

- `placeholder` _'string'_
   - Use a custom placeholder.
   - Default: Will try to use option with empty value or placeholder attribute from HTML first.

- `dropdownParent` _'string'_
   - The element the dropdown menu is appended to.
   - Default: Will be appended as a child of the control.

- `options` _[{ value, text }]_
   - Create a Tag select from custom dataset
   - By default this is populated from the original element.

- `maxOptions` _number_
   - Limits the number of visible options
   - Default value: `null` (unlimited)

- `items` _['value']_
   - An array of the initial selected values.
   - By default this is populated from the original element.

- `i18n` _'sv'_ | _'en'_ | _'no'_ | _{ add, no_results, remove_button, clear_button }_
   - Translation of remove button, clear button, add item and no results.
     Use predefined strings (Swedish, English, or Norwegian) or write your own translation. Default is 'sv'.

- `load` _function(query, callback)_
   - Loads options by invoking the provided function. The function should accept two arguments (query, callback)
     and should invoke the callback with the results once they are available.

- `preload` _boolean_ | _'string'_
   - If true, the load function will be called upon control initialization with an empty search. Alternatively it can be set to 'focus' to call the load function when control receives focus.

- `labelField` _'string'_
   - The name of the property to render as an option / item label when loading remote data.

- `valueField` _'string'_
   - The name of the property to use as the value when loading remote data.

- `searchField` _'string'_ | _['string']_
   - A string or an array of property names to analyze when filtering options in remote data.

- `sortField` _'string'_ | _[object]_ | _function(a, b)_
   - A string, an array of objects or a function to sort available options.
   - By default the the order is based on the current locale.
   - To disable sorting entirely and maintain the original order of options, use:
     `sortField:[{field:'$order'},{field:'$score'}]`

- `render` _object_
   - An object specifications for rendering.
   - Available options:
      - `item` _function(data, escape)_
      - `option` _function(data, escape)_
      - `option_create` _function(data, escape)_
      - `no_results` _function(data, escape)_
      - `loading` _function(data, escape)_
   - The `escape` argument is a function that takes a string and escapes all special HTML characters. This is very important to use to prevent XSS vulnerabilities.

- <code class="language-text">on<i>EventName</i></code> _function()_
   - See Event handlers and Advanced example

## Advanced examples

### Options from JavaScript config

This example sets the options from the config. It will allow adding tags from the Tag Select itself, or from a separate input using the API.

```html
<div class="env-form-field">
   <label for="example-tag-select-2" class="env-form-label"
      >Advanced select</label
   >
   <input
      class="env-form-input"
      id="example-tag-select-2"
      aria-label="Advanced select"
   />
</div>

<div class="env-form-field">
   <label for="example-tag-select-2-tag" class="env-form-label"
      >Add tag using API</label
   >
   <div class="env-form-control">
      <input
         id="example-tag-select-2-tag"
         type="text"
         class="env-form-input"
         aria-label="Add tag using API"
      />
      <button
         id="example-tag-select-2-add"
         type="submit"
         class="env-button env-button--primary"
      >
         Add
      </button>
   </div>
</div>
```

```javascript
envision
   .select('#example-tag-select-2', {
      maxItems: 5,
      placeholder: 'Select or add tags...',
      create: true, // Allow creating tags
      render: {
         item: (data, escape) =>
            `<div>
               <svg class="env-icon env-m-inline-end--x-small"><use href="/sitevision/envision-icons.svg#icon-check-line"></use></svg>
               ${escape(data.text)}
            </div>`,
      },
      items: ['fruit01'], // Preselect one existing option
      options: [
         // Populate options
         {
            value: 'fruit01',
            text: 'Apple',
         },
         {
            value: 'fruit02',
            text: 'Banana',
         },
         {
            value: 'fruit03',
            text: 'Grapefruit',
         },
         {
            value: 'fruit04',
            text: 'Lemon',
         },
         {
            value: 'fruit05',
            text: 'Pear',
         },
      ],
      onOptionAdd: function (value, data) {
         // Event handler, runs when option is added
         console.log('Added:', value, data);
      },
   })
   .then((selects) => {
      document
         .getElementById('example-tag-select-2-add')
         .addEventListener('click', function () {
            var val = document.getElementById('example-tag-select-2-tag').value;
            selects[0].addOptions({
               value: val,
               text: val,
            });
            selects[0].addItem(val);
         });
   });
```

### Options from remote data API

This example fetches repository names from GitHub. It will preload some popular names on page load.
The data does not follow the Tag Select naming standards so value-/label-/search-/sortField must be defined.

```html
<div class="env-form-field">
   <label for="example-tag-select-3" class="env-form-label">Remote data</label>
   <input
      class="env-form-input"
      id="example-tag-select-3"
      aria-label="Remote data"
   />
</div>
```

```javascript
envision.select('#example-tag-select-3', {
   maxItems: 5,
   placeholder: 'Select a GitHub repository...',
   i18n: 'en',
   valueField: 'url',
   labelField: 'name',
   searchField: ['name'],
   sortField: [{ field: 'name', direction: 'desc' }],
   preload: true,
   load: function (query, callback) {
      query = query || 'sitevision';
      var url =
         'https://api.github.com/search/repositories?q=' +
         encodeURIComponent(query);
      fetch(url)
         .then((response) => response.json())
         .then((json) => {
            callback(json.items);
         })
         .catch(() => {
            callback();
         });
   },
});
```

## States

### Disabled

A Tag Select may be disabled by adding the `disabled` attribute in the HTML.
When disabled, the control cannot receive focus.

```html
<div class="env-form-field">
   <label for="example-tag-select-4" class="env-form-label"> Disabled </label>
   <select
      class="env-form-input example-tag-select"
      id="example-tag-select-4"
      aria-label="Disabled"
      multiple
      disabled
   >
      <option value="">Select an item...</option>
      <option value="item1" selected>Item</option>
      <option value="item2">Item 2</option>
   </select>
</div>
```

### Locked

A Tag Select may be locked by adding the class `env-select--locked` to the `<input>` or `<select>`,
or by using functions described in the API section.

Locked disables user input on the control, but the control can still receive focus.

_Note: The `readonly` attribute is not supported or relevant to the Tag Select component. An input with the `readonly` attribute will be locked._

```html
<div class="env-form-field">
   <label for="example-tag-select-6" class="env-form-label"> Locked </label>
   <select
      class="env-select--locked env-form-input example-tag-select"
      id="example-tag-select-6"
      aria-label="Locked"
      multiple
   >
      <option value="">Select an item...</option>
      <option value="item1" selected>Item</option>
      <option value="item2">Item 2</option>
   </select>
</div>

<div class="env-form-field">
   <label for="example-tag-select-5" class="env-form-label">
      Locked (readonly)
   </label>
   <input
      class="example-tag-select env-form-input"
      id="example-tag-select-5"
      value="Item"
      placeholder="Select an item..."
      readonly
   />
</div>
```

## Event handlers

- `onInitialize` _function() { ... }_
   - Invoked once the control is completely initialized.

- `onChange` _function(value) { ... }_
   - Invoked when the value of the control changes.

- `onItemAdd` _function(value, item) { ... }_
   - Invoked when an item is selected.

- `onItemRemove` _function(value, item) { ... }_
   - Invoked when an item is deselected.

- `onClear` _function() { ... }_
   - Invoked when the control is manually cleared via the clear() method.

- `onOptionAdd` _function(value, data) { ... }_
   - Invoked when a new option is added to the available options list.

- `onOptionRemove` _function(value) { ... }_
   - Invoked when an option is removed from the available options.

- `onOptionClear` _function() { ... }_
   - Invoked when all options are removed from the control.

- `onDropdownOpen` _function(dropdown) { ... }_
   - Invoked when the dropdown opens.

- `onDropdownClose` _function(dropdown) { ... }_
   - Invoked when the dropdown closes.

- `onType` _function(str) { ... }_
   - Invoked when the user types while filtering options.

- `onFocus` _function() { ... }_
   - Invoked when the control gains focus.

- `onBlur` _function() { ... }_
   - Invoked when the control loses focus.

- `onLoad` _function(options, optgroup) { ... }_
   - Invoked when new options have been loaded and added to the control via the load option or `load` API method.

## API functions

Instances of Tag Select may be controlled by the methods described below.

```javascript
envision.select('#tag-select').then(function (selects) {
   selects[0].addOptions({ value: 'test' });
   selects[0].addItem('test');
});
```

### Options

- `addOptions(data|data[])`
   - Adds one option object or an array of option objects. If an option already exists, nothing will happen. Note: this does not refresh the options list dropdown (use `refreshOptions()` for that).

- `getOption(value)`
   - Retrieves the DOM element for the option identified by the given value.

- `updateOption(value, data)`
   - Updates an option available for selection. If it is visible in the selected items or options dropdown, it will be re-rendered automatically.

- `removeOption(value)`
   - Removes the option identified by the given value.

- `refreshOptions(triggerDropdown)`
   - Refreshes the list of available options shown in the autocomplete dropdown menu.

- `load(query)`
   - Initiates loading options from the remote data provider for the given query string.

- `clearOptions(clearFilter?)`
   - Removes all unselected options from the control. To clear selection options, call clear() before calling clearOptions().

- `clearFilter(option, value)`
   - Callback used by clearOptions() to decide whether or not an option should be removed. Return true to keep an option, false to remove

### Items

- `getItem(value)`
   - Returns the DOM element of the item matching the given value.

- `addItem(value, silent)`
   - "Selects" an item. Adds it to the list at the current caret position. If `silent` is truthy, no change event will be fired on the original input.

- `clear(silent)`
   - Resets / clears all selected items from the control. If `silent` is truthy, no change event will be fired on the original input.

### Dropdown

- `open()`
   - Shows the autocomplete dropdown containing the available options.

- `close()`
   - Closes the autocomplete dropdown menu.

### Other

- `getValue()`
   - Returns the value of the control. If multiple items can be selected with a "select" input tag (e.g. `<select multiple>`), this returns an array. Otherwise, returns a string (separated by delimiter if "multiple").

- `setValue(value, silent)`
   - Resets the selected items to the given value.

- `lock()`
   - Disables user input on the control. The control can still receive focus.

- `unlock()`
   - Re-enables user input on the control.

- `disable()`
   - Disables user input on the control. The control cannot receive focus.

- `enable()`
   - Re-enables the control.

- `destroy()`
   - Destroys the control and unbinds event listeners so that it can be garbage collected.

- `focus()`
   - Focuses the control.

- `blur()`
   - Blurs the control.

---

## Layout – Cardholder
URL: https://envisionui.io/layout/cardholder/
Description: A Cardholder utilizes CSS grid or flexbox to create a responsive card grid that adapts to available space.

Cardholders may be used to display any type of content, but [Cards](/components/cards/) are recommended.

## Cardholder Grid

Cardholder Grid uses CSS Grid. Cardholder slots are _not_ required.
Columns will always be equal width and aligned.

```html
<div class="example-demo-dark">
   <div class="env-cardholder-grid">

         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/01.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">
                  Lorem Ipsumsson
               </h2>
               <p class="env-ui-text-caption">
                  Utvecklare
               </p>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary"
                     >lorem@domain.com</a
                  >
               </p>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary"
                     >012-345 67 89</a
                  >
               </p>
            </div>
         </div>

         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/02.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">
                  Lorem Ipsumsson
               </h2>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary"
                     >012-345 67 89</a
                  >
               </p>
            </div>
         </div>

         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/04.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">
                  Lorem Ipsumsson
               </h2>
               <p class="env-ui-text-caption">
                  Utvecklare
               </p>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary"
                     >012-345 67 89</a
                  >
               </p>
            </div>
         </div>

      </div>
   </div>
</div>
```

### Cardholder Grid examples

There are several modifiers for the Cardholder Grid that controls the Cardholder columns and gaps:

`.env-cardholder-grid--N` - where N is a number that controls how many slots
the Cardholder will display at most in one row.
Possible values for N are `2`, `3`, `4`, `5`, `6`, `8`.

`.env-cardholder-grid--column-large` - Larger columns (&times;1.25)

`.env-cardholder-grid--column-small` - Smaller columns (&times;0.75)

`.env-cardholder-grid--gap-large` - Larger column gap (&times;2)

`.env-cardholder-grid--gap-small` - Smaller column gap (&times;0.5)

`.env-cardholder-grid--gap-none` - No column gap

To further adjust the size and spacing of the columns there are two CSS variables that may be set:

```css
.your-cardholder-grid-container {
   /*
   column-width is used to auto fit columns.
   */
   --env-cardholder-grid-column-width: 20em;
   --env-cardholder-grid-gap: var(--env-spacing-medium);
}
```

Below are a few examples that you may resize and see how the columns adapt to the given space.

<div class="demo-cardholder-grid">
   <h4 class="doc-heading-4">Default Cardholder Grid</h4>
   <p><code class="language-text">.env-cardholder-grid</code></p>
   <div class="demo-cardholder-grid__resizeable">   
   <div class="env-cardholder-grid">
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
   </div>
   </div>
</div>

<div class="demo-cardholder-grid">
   <h4 class="doc-heading-4">Six columns</h4>
   <p><code class="language-text">.env-cardholder-grid.env-cardholder-grid--6</code></p>
   <div class="demo-cardholder-grid__resizeable">   
   <div class="env-cardholder-grid env-cardholder-grid--6">
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
   </div>
   </div>
</div>

<div class="demo-cardholder-grid">
   <h4 class="doc-heading-4">Small column width</h4>
   <p><code class="language-text">.env-cardholder-grid.env-cardholder-grid--column-small</code></p>
   <div class="demo-cardholder-grid__resizeable">   
   <div class="env-cardholder-grid env-cardholder-grid--column-small">
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
   </div>
   </div>
</div>

<div class="demo-cardholder-grid">
   <h4 class="doc-heading-4">Large column width</h4>
   <p><code class="language-text">.env-cardholder-grid.env-cardholder-grid--column-large</code></p>
   <div class="demo-cardholder-grid__resizeable">   
   <div class="env-cardholder-grid env-cardholder-grid--column-large">
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
   </div>
   </div>
</div>

<div class="demo-cardholder-grid">
   <h4 class="doc-heading-4">Large column gap</h4>
   <p><code class="language-text">.env-cardholder-grid.env-cardholder-grid--gap-large</code></p>
   <div class="demo-cardholder-grid__resizeable">   
   <div class="env-cardholder-grid env-cardholder-grid--gap-large">
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
   </div>
   </div>
</div>

<div class="demo-cardholder-grid">
   <h4 class="doc-heading-4">Small column gap</h4>
   <p><code class="language-text">.env-cardholder-grid.env-cardholder-grid--gap-small</code></p>
   <div class="demo-cardholder-grid__resizeable">   
   <div class="env-cardholder-grid env-cardholder-grid--gap-small">
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
   </div>
   </div>
</div>

<div class="demo-cardholder-grid">
   <h4 class="doc-heading-4">No column gap</h4>
   <p><code class="language-text">.env-cardholder-grid.env-cardholder-grid--gap-none</code></p>
   <div class="demo-cardholder-grid__resizeable">   
   <div class="env-cardholder-grid env-cardholder-grid--gap-none">
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
   </div>
   </div>
</div>

<div class="demo-cardholder-grid">
   <h4 class="doc-heading-4">Combined modifiers</h4>
   <p>Small column width, large column gap, 8 columns max</p>
   <div class="demo-cardholder-grid__resizeable">   
   <div class="env-cardholder-grid env-cardholder-grid--column-small env-cardholder-grid--gap-large env-cardholder-grid--8">
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
      <div class="env-card"></div>
   </div>
   </div>
</div>

## Flexbox Cardholder

A Cardholder will use flexbox to make a grid of Cards that adapt to the given space.
Use one `env-cardholder__slot` to hold each Card. See configuration options below.

```html
<div class="example-demo-dark">
   <div class="env-cardholder env-cardholder--3">
      <div class="env-cardholder__slot">
         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/05.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
               <p class="env-ui-text-caption">Utvecklare</p>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary"
                     >lorem@domain.com</a
                  >
               </p>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary"
                     >012-345 67 89</a
                  >
               </p>
            </div>
         </div>
      </div>
      <div class="env-cardholder__slot">
         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/04.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary"
                     >012-345 67 89</a
                  >
               </p>
            </div>
         </div>
      </div>
      <div class="env-cardholder__slot">
         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/01.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
               <p class="env-ui-text-caption">Utvecklare</p>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary"
                     >012-345 67 89</a
                  >
               </p>
            </div>
         </div>
      </div>
      <div class="env-cardholder__slot">
         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/02.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
               <p class="env-ui-text-caption">Utvecklare</p>
            </div>
         </div>
      </div>
      <div class="env-cardholder__slot">
         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/03.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
               <p class="env-ui-text-caption">Utvecklare</p>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary"
                     >lorem@domain.com</a
                  >
               </p>
            </div>
         </div>
      </div>
   </div>
</div>
```

### Cardholder examples

There are several modifiers for the Cardholder that controls the Cardholder slots:

`.env-cardholder--N` - where N is a number that controls how many slots
the Cardholder can display at most in one row.
Possible values for N are `2`, `3`, `4`, `5`, `6`, `8`.

`.env-cardholder--max` - By default, slots have no max width. This modifier sets a max width.
Slots will be centered in the last row and may not align to the columns. On small screens, the slots
may not fill the entire screen width.

`.env-cardholder--start` - Must be combined with `.env-cardholder--max`. Will align slots to the left.

To control the size and spacing of the columns there are three CSS variables that may be set:

```css
.your-cardholder-container {
   /*
   min-width is used to control when column count breakpoints occur.
   max-width is only used when modifier env-cardholder--max is set.
   */
   --env-cardholder-column-min-width: 240px;
   --env-cardholder-column-max-width: 400px;
   --env-cardholder-column-spacing: var(--env-spacing-medium);
}
```

Below are a few examples that you may resize and see how the columns adapt to the given space.

<div class="demo-cardholder-flex">
   <h4 class="doc-heading-4">Three columns</h4>
   <p><code class="language-text">.env-cardholder.env-cardholder--3</code></p>
   <div class="demo-cardholder-flex__resizeable">   
   <div class="env-cardholder env-cardholder--3">
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
   </div>
   </div>
</div>

<div class="demo-cardholder-flex">
   <h4 class="doc-heading-4">Five columns</h4>
   <p><code class="language-text">.env-cardholder.env-cardholder--5</code></p>
   <div class="demo-cardholder-flex__resizeable">   
   <div class="env-cardholder env-cardholder--5">
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
   </div>
   </div>
</div>

<div class="demo-cardholder-flex">
   <h4 class="doc-heading-4">Five columns, slot max width</h4>
   <p><code class="language-text">.env-cardholder.env-cardholder--5.env-cardholder--max</code></p>
   <div class="demo-cardholder-flex__resizeable">   
   <div class="env-cardholder env-cardholder--5 env-cardholder--max">
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
   </div>
   </div>
</div>

<div class="demo-cardholder-flex">
   <h4 class="doc-heading-4">Five columns, slot max width, aligned left</h4>
   <p><code class="language-text">.env-cardholder.env-cardholder--5.env-cardholder--max.env-cardholder--start</code></p>
   <div class="demo-cardholder-flex__resizeable">   
   <div class="env-cardholder env-cardholder--5 env-cardholder--max env-cardholder--start">
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
      <div class="env-cardholder__slot"><div class="env-card"></div></div>
   </div>
   </div>
</div>

---

## Layout – Container
URL: https://envisionui.io/layout/container/
Description: The Container utility establishes a containment context for applying container query at-rules.

Using the class `env-container` on an element will declare a containment context
that may be targeted with container query at-rules.
A containment context is required when using [Dynamic font size](/typography/basic-text/).

```html noexample
<div class="env-container">
   <div class="example">Container example</div>
</div>
```

```css noexpand
@container (min-width: 250px) {
   .example {
      /* Styles to apply to div.example when container is 250px wide or more */
   }
}
```

---

## Layout – Flexbox
URL: https://envisionui.io/layout/flexbox/
Description: Use the Flexbox utility to provide classes for flexible layouts, including direction, alignment, and wrapping.

## Flex Container

### Direction

Applicable to flex containers (`env-flex`) to set direction of flex items.
Modifier classes are named using the format: `env-flex--direction-{value}`

Valid modifier values

- `row-reverse`
- `column`
- `column-reverse`

Examples

```html
<div class="example-flex env-flex">
   <div class="env-flex__item">Item 1</div>
   <div class="env-flex__item">Item 2</div>
   <div class="env-flex__item">Item 3</div>
</div>

<div class="example-flex env-flex env-flex--direction-row-reverse">
   <div class="env-flex__item">Item 1</div>
   <div class="env-flex__item">Item 2</div>
   <div class="env-flex__item">Item 3</div>
</div>

<div class="example-flex env-flex env-flex--direction-column">
   <div class="env-flex__item">Item 1</div>
   <div class="env-flex__item">Item 2</div>
   <div class="env-flex__item">Item 3</div>
</div>

<div class="example-flex env-flex env-flex--direction-column-reverse">
   <div class="env-flex__item">Item 1</div>
   <div class="env-flex__item">Item 2</div>
   <div class="env-flex__item">Item 3</div>
</div>
```

### Justify content

Applicable to flex containers (`env-flex`). Modifier classes are named using the format: `env-flex--justify-content-{value}`

Valid values

- `end`
- `center`
- `between`
- `around`

Examples

```html
<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--justify-content-center"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--justify-content-end"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--justify-content-around"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--justify-content-between"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>
```

### Align items

Applicable to flex containers (`env-flex`).
Modifier classes are named using the format: `env-flex--align-items-{value}`

Valid values

- `stretch`
- `start`
- `end`
- `center`
- `baseline`

```html
<div
   class="example-flex example-flex--align env-flex env-flex--align-items-stretch"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--align-items-center"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--align-items-start"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--align-items-end"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--align-items-baseline"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>
```

### Flex wrap

Modifiers applicable to flex containers (`env-flex`).

Valid modifiers:

- `env-flex--wrap`
- `env-flex--wrap-reverse`

```html
<div class="example-flex env-flex">
   <div class="env-flex__item env-w--50">1</div>
   <div class="env-flex__item env-w--50">2</div>
   <div class="env-flex__item env-w--50">3</div>
   <div class="env-flex__item env-w--50">4</div>
</div>

<div class="example-flex env-flex env-flex--wrap">
   <div class="env-flex__item env-w--50">1</div>
   <div class="env-flex__item env-w--50">2</div>
   <div class="env-flex__item env-w--50">3</div>
   <div class="env-flex__item env-w--50">4</div>
</div>

<div class="example-flex env-flex env-flex--wrap-reverse">
   <div class="env-flex__item env-w--50">1</div>
   <div class="env-flex__item env-w--50">2</div>
   <div class="env-flex__item env-w--50">3</div>
   <div class="env-flex__item env-w--50">4</div>
</div>
```

### Flex gap <span id="flex-gap"></span><span class="doc-badge doc-badge--info">2025.07.1</span>

Modifiers applicable to flex containers (`env-flex`).

Valid modifiers:

- `env-flex--gap-{value}`
- `env-flex--column-gap-{value}`
- `env-flex--row-gap-{value}`

Valid values

`xxx-small` (0.125em), `xx-small` (0.25em), `x-small` (0.5em), `small` (0.75em), `medium` (1em), `large` (1.5em), `x-large` (2em), `xx-large` (3em), `xxx-large` (4em)

```html
<div class="example-flex env-flex env-flex--gap-medium">
   <div class="env-flex__item env-flex__item--length-1">1</div>
   <div class="env-flex__item env-flex__item--length-1">2</div>
   <div class="env-flex__item env-flex__item--length-1">3</div>
</div>
```

## Flex Items

### Align self

Applicable to direct children within a flex container (`env-flex__item`).
Modifier classes are named using the format: `env-flex__item--align-{value}`

Valid values

- `stretch`
- `start`
- `end`
- `center`
- `baseline`

```html
<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--align-stretch">Aligned</div>
   <div class="env-flex__item">Item</div>
</div>

<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--align-start">Aligned</div>
   <div class="env-flex__item">Item</div>
</div>

<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--align-end">Aligned</div>
   <div class="env-flex__item">Item</div>
</div>

<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--align-center">Aligned</div>
   <div class="env-flex__item">Item</div>
</div>

<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--align-baseline">Aligned</div>
   <div class="env-flex__item">Item</div>
</div>
```

### Flex length (`flex` property)

Applicable to direct children within a flex container (`env-flex__item`).
Used to specify the length of the flex item, relative to the rest of the flex items inside the same container.
Modifier classes are named using the format: `env-flex__item--length-{value}`

Valid values `1-10`

```html
<div class="example-flex env-flex">
   <div class="env-flex__item env-flex__item--length-1">Sidebar</div>
   <div class="env-flex__item env-flex__item--length-2">Main</div>
   <div class="env-flex__item env-flex__item--length-1">Sidebar</div>
</div>
```

### Flex grow (`flex-grow` property)

Applicable to direct children within a flex container (`env-flex__item`).
Used to specify how much the item will grow relative to the rest flex items inside the same container.
Modifier classes are named using the format: `env-flex__item--grow-{value}`

Valid values `1-10`

```html
<div class="example-flex env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--grow-1">Item</div>
</div>
```

## Deprecated

[List of deprecated class names](/deprecated/flexbox/)

---

## Typography – Basic text
URL: https://envisionui.io/typography/basic-text/
Description: The Basic Text utility offers classes for headings, alignment, transformations, status colors, and links.

## Headings

```html
<h1 class="env-text">Heading 1</h1>

<h2 class="env-text">Heading 2</h2>

<h3 class="env-text">Heading 3</h3>

<h4 class="env-text">Heading 4</h4>

<h5 class="env-text">Heading 5</h5>

<h6 class="env-text">Heading 6</h6>
```

```html
<div class="env-text">
   <h1>Heading 1</h1>

   <h2>Heading 2</h2>

   <h3>Heading 3</h3>

   <h4>Heading 4</h4>

   <h5>Heading 5</h5>

   <h6>Heading 6</h6>
</div>
```

```html
<div class="env-text-h1">Looks like heading 1</div>

<div class="env-text-h2">Looks like heading 2</div>

<div class="env-text-h3">Looks like heading 3</div>

<div class="env-text-h4">Looks like heading 4</div>

<div class="env-text-h5">Looks like heading 5</div>

<div class="env-text-h6">Looks like heading 6</div>

<div class="env-text-p">Looks like paragraph</div>

<div class="env-text-small">Looks like small</div>
```

## Transformation

```html
<p class="env-text env-text--uppercase">will be all uppercase</p>

<p class="env-text env-text--lowercase">THIS WILL BE LOWERCASE</p>

<p class="env-text env-text--capitalize">
   every word will start with a capital letter.
</p>

<p class="env-text env-text--strike">This text will be hard to read</p>
```

## Alignment

```html
<div class="env-text">Left aligned (default)</div>
<div class="env-text env-text-align--center">Center aligned</div>
<div class="env-text env-text-align--right">Right aligned</div>
```

### Logical properties

```html
<div class="env-text env-text-align--start">Start aligned</div>
<div class="env-text env-text-align--end">End aligned</div>
```

#### Logical properties, right to left-aligned

```html
<div dir="rtl">
   <div class="env-text">من اليمين الى اليسار</div>
   <div class="env-text env-text-align--start">بدء محاذاة</div>
   <div class="env-text env-text-align--end">محاذاة النهاية</div>
</div>
```

## Status colors

```html
<p class="env-text env-text--attention">Attention text</p>
<p class="env-text env-text--active">Active text</p>
<p class="env-text env-text--error">Error text</p>
```

## Links

<div id="links"></div>

```html
<p class="env-text">
   <a href="#" class="env-link">An example link</a>
</p>

<p class="env-text">
   <a href="#" class="env-link-secondary">A secondary link</a>
</p>
```

### Link icons <span class="doc-badge doc-badge--info">2025.07.1</span>

Link icons are used to indicate the type of link, such as external links or links that open in a new window.
The icons should be used with the `env-link-icon` class.

Available link icons:

`#link-tab`, `#link-external`, `#link-external-tab`

```html
<p class="env-text">
   <a href="#" target="_blank"
      >Link that opens in new window<svg
         class="env-link-icon"
         aria-hidden="true"
      >
         <use href="/sitevision/link-icons.svg#link-tab"></use>
      </svg>
      <span class="env-assistive-text">Opens in new window</span>
   </a>
</p>

<p class="env-text">
   <a href="#"
      >An external link<svg class="env-link-icon" aria-hidden="true">
         <use href="/sitevision/link-icons.svg#link-external"></use>
      </svg>
      <span class="env-assistive-text">External link</span>
   </a>
</p>

<p class="env-text">
   <a href="#" target="_blank"
      >External link, opens in new window<svg
         class="env-link-icon"
         aria-hidden="true"
      >
         <use href="/sitevision/link-icons.svg#link-external-tab"></use>
      </svg>
      <span class="env-assistive-text">External link, opens in new window</span>
   </a>
</p>
```

### File link icons <span class="doc-badge doc-badge--info">2025.07.1</span>

The file link icons may be used to indicate the type of file linked to, such as PDF, Word, Excel, etc.

The icons should be used with the `env-link-icon` class. An additional element using `env-link-meta` may be used to provide file type and size information.

```html
<p class="env-text">
   <a href="#" target="_blank"
      >Link to PDF document, opens in new window<svg
         class="env-link-icon"
         aria-hidden="true"
      >
         <use href="/sitevision/file-icons.svg#file-pdf"></use>
      </svg>
      <span class="env-assistive-text">pdf, 42 kB, opens in new window</span>
   </a>
   <span class="env-link-meta" aria-hidden="true">(pdf, 42 kB)</span>
</p>
```

Available file link icons:

- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#file-ms-word"></use></svg> `#file-ms-word`
- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#file-ms-powerpoint"></use></svg> `#file-ms-powerpoint`
- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#file-ms-excel"></use></svg> `#file-ms-excel`
- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#file-ms-notes"></use></svg> `#file-ms-notes`
- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#file-text"></use></svg> `#file-text`
- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#file-archive"></use></svg> `#file-archive`
- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#file-image"></use></svg> `#file-image`
- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#file-pdf"></use></svg> `#file-pdf`
- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#file-media"></use></svg> `#file-media`
- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#file"></use></svg> `#file`
- <svg class="env-link-icon" aria-hidden="true"><use href="/sitevision/file-icons.svg#folder"></use></svg> `#folder`

## Blockquote <span class="doc-badge doc-badge--info">2025.04.2</span>

<div id="blockquote"></div>

Classname `env-blockquote` or `<blockquote>` element inside an `env-text` wrapper will get theme blockquote styling.

```html
<blockquote class="env-blockquote">
   <p class="env-text-quotation-01">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris.
   </p>
</blockquote>
```

## Mark <span class="doc-badge doc-badge--info">2025.04.2</span>

<div id="mark"></div>

Classname `env-mark` or `<mark>` element inside an `env-text` wrapper will use theme mark highlight colors.

```html
<p>
   Lorem <mark class="env-mark">ipsum dolor</mark> sit amet, consectetur
   adipiscing elit.
</p>
<p class="env-text">
   Sed do eiusmod tempor incididunt ut labore et <mark>ipsum dolor</mark> magna
   aliqua.
</p>
```

---

## Typography – Dynamic font size
URL: https://envisionui.io/typography/dynamic-font-size/
Description: The Dynamic Font Size utility scales an element’s base font size based on container width.

Use Dynamic font size to scale the base font size of an element. Any element children using
relative font sizes will scale proportionally.

A [container element](/utils/container/) is required as a wrapper.
There are set widths for the container where the scaling starts and stops.
The scaling and width parameters may be controlled using modifer classnames as
described below.

The default values are a scaling factor of `1 – 1.25` between widths `400px – 750px`.

<div class="example-dynamic-font-wrapper">
   <div class="example-dynamic-font env-m-block-end--large">
      <div class="example-dynamic-font__resizeable">
         <div class="env-container example-dynamic-container">
            <div class="env-p--medium">
               <div class="env-dynamic-font">
                  <h2 class="env-ui-text-sectionheading">
                     Dynamic font
                     <span class="example-dynamic-font__elfontsize"></span>
                  </h2>
                  <p class="env-text env-m-block-start--small">
                     This text will resize dynamically depending on the width of the containment context.
                     Baseline font-size will go from 1em to 1.25em starting at 400px width up to 750px.
                     The heading will also scale to a factor of 1.25, but starting at 1.25em it will scale up to 1.5625em.
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
            </div>
            <span class="example-dynamic-font__dffontsize"></span>
         </div>
         <p class="example-dynamic-font__resizeable__help">
            Resize container (<span class="example-dynamic-font__width"></span>px)
            <span class="example-dynamic-font__resizeable__help__arrow">&rarr;</span>
         </p>
      </div>
   </div>
</div>

## Required markup

A containment context is required. The easiest way to create one is to use the [container element](/utils/container/).
The containment context determines the width from which the scaling of the dynamic font is calculated.

Inside the container, place one or more dynamic font elements using class `env-dynamic-font`.
Text inside these elements will be dynamically scaled, text outside will not.

```html noexample
<div class="env-container">
   <div class="env-dynamic-font">
      <p class="env-text">This text will resize!</p>
   </div>
</div>
```

Note: When using [Envision for Dashboard Widgets](/dashboard/widget-typography/#dynamic-font-size-in-widgets),
the container element is not required since the widget already is a containment context.

### Additional markup

To not interfere with the width calculations, padding must be used on a
separate element inside the container element. Elements placed inside the container but outside of
`env-dynamic-font` will not scale.

```html noexample
<div class="env-container">
   <div class="env-p--medium">
      <h2 class="env-ui-text-sectionheading">This heading will not resize</h2>
      <div class="env-dynamic-font">
         <p class="env-text">This text will resize ...</p>
      </div>
   </div>
</div>
```

## Controlling the scaling

### Scaling factor

Use modifer `env-dynamic-font--{scale}` where `{scale}` may be one of:

`1_125`, `1_25`, `1_375`, `1_5`, `1_625`, `1_75`, `1_875`, `2`

Default scaling factor is `1.25` which is identical to using the `1_25` modifer.

_Note that dot is replaced by underscore as dot is not allowed in CSS class names._

<div class="example-dynamic-font-wrapper">
   <div class="example-dynamic-font env-m-block-end--large">
      <div class="example-dynamic-font__resizeable">
         <div class="env-container example-dynamic-container">
            <div class="env-p--medium">
               <h2 class="env-ui-text-sectionheading">
                  Scaling factor
               </h2>
               <div class="env-dynamic-font env-dynamic-font--scale-1_125 env-m-block-start--small">
                  <p class="env-text">
                     Scaling factor 1.125
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font">
                  <p class="env-text">
                     Scaling factor 1.25 (default)
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font env-dynamic-font--scale-1_375">
                  <p class="env-text">
                     Scaling factor 1.375
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font env-dynamic-font--scale-1_5">
                  <p class="env-text">
                     Scaling factor 1.5
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font env-dynamic-font--scale-1_625">
                  <p class="env-text">
                     Scaling factor 1.625
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font env-dynamic-font--scale-1_75">
                  <p class="env-text">
                     Scaling factor 1.75
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font env-dynamic-font--scale-1_875">
                  <p class="env-text">
                     Scaling factor 1.875
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>

               <div class="env-dynamic-font env-dynamic-font--scale-2">
                  <p class="env-text">
                     Scaling factor 2
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
            </div>
         </div>
         <p class="example-dynamic-font__resizeable__help">
            Resize container (<span class="example-dynamic-font__width"></span>px)
            <span class="example-dynamic-font__resizeable__help__arrow">&rarr;</span>
         </p>
      </div>

   </div>
</div>

```html noexample
<div class="env-container">
   <div class="env-dynamic-font env-dynamic-font--scale-1_125">
      <p class="env-text">Scaling factor 1.125</p>
   </div>
</div>
```

### Scaling width boundaries

The scaling will occur between two set widths. If the container width is smaller than the from-value,
the scaling will be set to the lowest possible value and vice versa for the to-value.

Boundaries are set using modifier classes `env-dynamic-font--from-{value}` and `env-dynamic-font--to-{value}`.

Allowed **from** values: `250`, `300`, `350`, `400`, `450`, `500`, `550`

Allowed **to** values: `500`, `550`, `600`, `650`, `700`, `750`, `800`, `900`, `1000`

Default boundaries are from 400 to 750.

<img class="example-dynamic-font-chart"
alt="Dynamic font scaling chart"
src="/placeholders/examples/dyn-font.svg" />

<div class="example-dynamic-font-wrapper">
   <div class="example-dynamic-font env-m-block-end--large">
      <div class="example-dynamic-font__resizeable">
         <div class="env-container example-dynamic-container">
            <div class="env-p--medium">
               <h2 class="env-ui-text-sectionheading">
                  Boundaries
               </h2>
               <div class="env-dynamic-font env-dynamic-font--from-250 env-dynamic-font--to-500 env-m-block--small">
                  <p class="env-text">
                     From 250 to 500
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font env-dynamic-font--from-400 env-dynamic-font--to-650 env-m-block--small">
                  <p class="env-text">
                     From 400 to 650
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font env-dynamic-font--from-550 env-dynamic-font--to-800 env-m-block--small">
                  <p class="env-text">
                     From 550 to 800
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
            </div>
         </div>
         <p class="example-dynamic-font__resizeable__help">
            Resize container (<span class="example-dynamic-font__width"></span>px)
            <span class="example-dynamic-font__resizeable__help__arrow">&rarr;</span>
         </p>
      </div>
   </div>
</div>

```html noexample
<div class="env-container">
   <div
      class="env-dynamic-font env-dynamic-font--from-250 env-dynamic-font--to-500"
   >
      <p class="env-text">From 250 to 500</p>
   </div>
</div>
```

Note: When using [Envision for Dashboard Widgets](/dashboard/widget-typography/#dynamic-font-size-in-widgets),
there are additional widget specific boundaries available.

### Downscaling

The default is scaling up from `1 – 1.25`. Scaling may be reversed, so `1` is the highest factor by using
the modifier `env-dynamic-font--downscale`. The lowest factor will then be `1 / {scale}`, which is `0.8`
at default settings.

<div class="example-dynamic-font-wrapper">
   <div class="example-dynamic-font env-m-block-end--large">
      <div class="example-dynamic-font__resizeable">
         <div class="env-container example-dynamic-container">
            <div class="env-p--medium">
               <h2 class="env-ui-text-sectionheading">
                  Upscaling vs downscaling
               </h2>
               <div class="env-dynamic-font env-m-block--small">
                  <p class="env-text">
                     Upscaling factor 1.25 (default)
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font env-dynamic-font--scale-2 env-m-block--small">
                  <p class="env-text">
                     Upscaling factor 2
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font env-dynamic-font--downscale env-m-block--small">
                  <p class="env-text">
                     Downscaling factor 1.25
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
               <div class="env-dynamic-font env-dynamic-font--scale-2 env-dynamic-font--downscale env-m-block--small">
                  <p class="env-text">
                     Downscaling factor 2
                     <span class="example-dynamic-font__elfontsize"></span>
                  </p>
               </div>
            </div>
         </div>
         <p class="example-dynamic-font__resizeable__help">
            Resize container (<span class="example-dynamic-font__width"></span>px)
            <span class="example-dynamic-font__resizeable__help__arrow">&rarr;</span>
         </p>
      </div>
   </div>
</div>

```html noexample
<div class="env-container">
   <div class="env-dynamic-font">
      <p class="env-text">Upscaling factor 1.25 (default)</p>
   </div>
   <div class="env-dynamic-font env-dynamic-font--scale-2">
      <p class="env-text">Upscaling factor 2</p>
   </div>
   <div class="env-dynamic-font env-dynamic-font--downscale">
      <p class="env-text">Downscaling factor 1.25</p>
   </div>
   <div
      class="env-dynamic-font env-dynamic-font--scale-2 env-dynamic-font--downscale"
   >
      <p class="env-text">Downscaling factor 2</p>
   </div>
</div>
```

## CSS settings

For higher precision in setting the values, the following CSS variables may be set.

**Note!** Do not use any units.

```html noexample
<div class="env-container">
   <div class="env-dynamic-font example-custom-dynamic-font-settings">
      <p class="env-text">Scaling factor 1.2345</p>
   </div>
</div>
```

```css noexpand
.example-custom-dynamic-font-settings {
   /* Scaling factor */
   --env-dynamic-font-scale: 1.2345;
   /* Container from- and to widths (px) */
   --env-dynamic-font-from-width: 357;
   --env-dynamic-font-to-width: 579;
}
```

---

## Typography – Text lists
URL: https://envisionui.io/typography/text-list/
Description: Text lists are used for ordered and unordered lists in text content.

Text lists are used for ordered and unordered lists in text content.

The class `env-text-list` is used to style both types of lists and must be applied to the `<ul>` or `<ol>` element.

List style, paddings and margins may be customized [using the text list variables](/utils/css-variables/#text-lists).

Nested lists do not get top or bottom margins, to prevent extra spacing inside the list.

## Examples

### Unordered list

```html
<ul class="env-text-list env-text-body-02">
   <li>100 g butter</li>
   <li>1½ dl milk</li>
   <li>2 eggs</li>
   <li>2 dl granulated sugar</li>
   <li>3 dl all-purpose flour</li>
   <li>1½ tsp baking powder</li>
</ul>
```

### Ordered list

```html
<ol class="env-text-list env-text-body-02">
   <li>Preheat the oven to 175°C.</li>
   <li>Grease and flour a bundt cake pan of about 1.5 liters.</li>
   <li>Melt the butter in a saucepan and add the milk.</li>
   <li>
      Whisk the eggs and sugar until light and fluffy, then add the butter and
      milk mixture.
   </li>
   <li>
      Stir in the flour mixed with baking powder and pour the batter into the
      prepared pan.
   </li>
   <li>Bake in the lower part of the oven for about 35 minutes.</li>
</ol>
```

### Nested lists

```html
<ul class="env-text-list env-text-body-02">
   <li>first item</li>
   <li>
      second item
      <ul class="env-text-list">
         <li>second item first subitem</li>
         <li>
            second item second subitem
            <ol class="env-text-list">
               <li>second item second subitem first sub-subitem</li>
               <li>second item second subitem second sub-subitem</li>
               <li>second item second subitem third sub-subitem</li>
            </ol>
         </li>
         <li>second item third subitem</li>
      </ul>
   </li>
   <li>third item</li>
</ul>
```

---

## Typography – Content text
URL: https://envisionui.io/typography/text/

Text is designed to be used for content text. It is a versatile and flexible
set of site fonts that can be used for a wide range of purposes, from body text to
headings and image captions.

Text is divided into different sets, each with its own unique style and purpose.

```html nocode
<div class="example-content-text-demo">
   <h2 class="env-text-heading-01">Heading</h2>
   <h2 class="env-text-display-01">Display</h2>
   <p class="env-text-summary-01">Summary</p>
   <p class="env-text-body-01">Body</p>
   <p class="env-text-caption-01">Image Caption</p>
   <p class="env-text-quotation-01">Quotation</p>
   <p class="env-text-caption-01">Table Caption</p>
   <p class="env-text-table-data-01">Table</p>
</div>
```

## Variants

Variants of a text style are named 01, 02, 03, etc.

For headings there is no need to assign a certain variant number to the HTML `<H{n}>` element with the same number.
Look at the variant numbers as a size and style indicator rather than a specific element type.

When designing a website you may for example choose to use the 02 variant as a default size for an `<H1>` element and then
use the 01 variant for specific cases where you might want to display a larger heading.

## Heading style sets

The Heading and Display style sets are used for titles and headings.
There are six and three different heading styles available respectively.

```html
<div class="example-content-text-demo">
   <h1 class="env-text-heading-01">Heading / 01</h1>
   <h2 class="env-text-heading-02">Heading / 02</h2>
   <h3 class="env-text-heading-03">Heading / 03</h3>
   <h4 class="env-text-heading-04">Heading / 04</h4>
   <h5 class="env-text-heading-05">Heading / 05</h5>
   <h6 class="env-text-heading-06">Heading / 06</h6>
   <h1 class="env-text-display-01">Display / 01</h1>
   <h2 class="env-text-display-02">Display / 02</h2>
   <h3 class="env-text-display-03">Display / 03</h3>
</div>
```

## Body text style sets

The Body, Summary, Quotation and Table style sets are used for different types of body text.

```html
<div class="example-content-text-demo">
   <p class="env-text-summary-01">Summary / 01</p>
   <p class="env-text-body-01">Body / 01</p>
   <p class="env-text-body-02">Body / 02</p>
   <p class="env-text-body-03">Body / 03</p>
   <p class="env-text-body-04">Body / 04</p>
   <p class="env-text-quotation-01">Quotation / 01</p>
   <p class="env-text-quotation-02">Quotation / 02</p>
</div>
```

## Specialized text style sets

For image captions and table text there are specialized styles available.

```html
<figure>
   <img src="/placeholders/225x100/10.webp" alt="Example image" />
   <figcaption class="env-text-caption-01">Caption / 01</figcaption>
</figure>
```

When using the `env-table` component, the table text styles will be used by default, no further
classes are needed.

```html
<table class="env-table">
   <caption>
      Envision table
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>jane@doe.com</td>
      </tr>
   </tbody>
</table>
```

For other tables, the table text styles can be used by adding the Table text style classes to the
appropriate table elements.

```html
<table class="example-table">
   <caption class="env-text-table-caption-01">
      Custom table using Table text style
   </caption>
   <thead>
      <tr>
         <th class="env-text-table-heading-01">Name</th>
         <th class="env-text-table-heading-01">Username</th>
         <th class="env-text-table-heading-01">Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="env-text-table-data-01">John Doe</td>
         <td class="env-text-table-data-01">johdoe</td>
         <td class="env-text-table-data-01">john@doe.com</td>
      </tr>
      <tr>
         <td class="env-text-table-data-01">Jane Doe</td>
         <td class="env-text-table-data-01">jandoe</td>
         <td class="env-text-table-data-01">jane@doe.com</td>
      </tr>
   </tbody>
</table>
```

## Styling

All variants of a font will have its own set of variables that can be used to style the text. Below is a list of the variables.

- `--env-text-{name}-font-family`
- `--env-text-{name}-font-size`
- `--env-text-{name}-font-weight`
- `--env-text-{name}-font-style`
- `--env-text-{name}-line-height`
- `--env-text-{name}-text-transform`
- `--env-text-{name}-letter-spacing`
- `--env-text-{name}-font-color`
- `--env-text-{name}-margin-block-start`
- `--env-text-{name}-margin-block-end`

Possible values for `{name}`: `heading-01`, `heading-02`, `heading-03`, `heading-04`, `heading-05`, `heading-06`,
`display-01`, `display-02`, `display-03`, `summary-01`, `body-01`, `body-02`, `body-03`, `body-04`,
`caption-01`,`quotation-01`, `quotation-02`, `table-caption-01`, `table-heading-01`, `table-data-01`.

## Links

All sets and styles will in the default settings use the
<a class="env-link" href="/typography/basic-text/#links">&laquo;default link styling&raquo;</a>.

```html
<h2 class="env-text-heading-01">
   <a href="javascript:void(0)">Link in Heading / 01</a>
</h2>
<p class="env-text-summary-01">
   And here is a <a href="javascript:void(0)">link in Summary / 01</a>.
</p>
```

Link color and underline may be adjusted as fit for each style in a set using the following classes where name is the name of the font style:

- `--env-text-{name}-link-font-color`
- `--env-text-{name}-link-text-decoration`
- `--env-text-{name}-link-hover-font-color`
- `--env-text-{name}-link-hover-text-decoration`

## Example

Here is a link to [an example article](/examples/article-text) that uses many of the above the text styles.

---

## Typography – UI Text
URL: https://envisionui.io/typography/ui-text/
Description: UI Text provides standardized styles for headings and text across templates, components, and applications.

UI Text is a set of text styles that should be used for headings and other text in templates, components and applications.

New UI Text style Body available since <span class="doc-badge doc-badge--info">2026.01.1</span>

```html
<p class="env-ui-text-overline">Overline</p>
<h1 class="env-ui-text-heading">Heading</h1>
<h2 class="env-ui-text-sectionheading">Section heading</h2>
<h3 class="env-ui-text-subheading">Subheading</h3>
<p class="env-ui-text-body">Body</p>
<p class="env-ui-text-caption">Caption</p>
```

## Usage example

<div class="env-theme-example-brand">
<div class="env-popover example-static-popover env-m-block--large" data-popper-placement="top">
   <div class="env-popover__arrow"></div>
   <div class="env-popover__content">
      <h4 class="env-ui-text-sectionheading env-popover__header__title">Section heading</h4>
      <img
         class="env-card__image env-profile-image env-profile-image--small"
         src="https://envisionui.io/placeholders/profile/200x200/01.webp"
         alt="Example profile image"
      />
      <h2 class="env-ui-text-subheading">Subheading</h2>
      <p class="env-ui-text-body">Body</p>
      <p class="env-ui-text-caption">Caption</p>
   </div>
</div>
</div>

---

## Utils – Assistive text
URL: https://envisionui.io/utils/assistive-text/
Description: Assistive text provides helpful context, guidance, or feedback for improved accessibility and user understanding.

## Types

```html
<p class="env-assistive-text">
   This text is invisible for the eye but visible to a screenreader
</p>
<a href="#" class="env-assistive-text env-assistive-text--focusable env-link">
   This text is invisible until focused
</a>
```

---

## Utils – Borders
URL: https://envisionui.io/utils/borders/
Description: Use the Borders utility to set or remove borders.

Set or remove borders.

## Set borders

Use `env-border` or `env-border-{p}` to set border on one or more sides.

Valid values for `{p}` are: `block`, `inline`, `block-start`, `block-end`, `inline-start`, `inline-end`.

You can use `env-border--05` to set a muted border color.

```html
<div class="example-borders">
   <span class="env-border"></span>
   <span class="env-border env-border--05"></span>
   <span class="env-border-block"></span>
   <span class="env-border-inline"></span>
   <span class="env-border-block-start"></span>
   <span class="env-border-block-end"></span>
   <span class="env-border-inline-start"></span>
   <span class="env-border-inline-end"></span>
</div>
```

## Remove borders

Use `env-border-none` to remove a border from all sides.

```html
<div class="example-borders">
   <span style="border: 3px dashed red" class="env-border-none"> </span>
</div>
```

## Deprecated

### Physical properties & modifiers

Classnames `env-border-top`, `env-border-right`, `env-border-bottom` and `env-border-left` are deprecated and replaced by logical properties.

Modifiers `env-border--0` and `env-border--{p}-0` are deprecated, where `env-border--0` is replaced by `env-border-none`.

Variable `--env-border-color-light` is deprecated and replaced by `--env-border-color-05`.

---

## Utils – CSS variables
URL: https://envisionui.io/utils/css-variables/
Description: CSS Variables utility offers predefined custom properties for consistent styling across components.

CSS variables ([CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)) are available with the format: `--env-{variable}`

## Example

```html
<div class="example-variables">
   <div class="example-custom-css">Example</div>
</div>

<style>
   .example-custom-css {
      margin: var(--env-spacing-medium) var(--env-spacing-xx-large);
      padding: var(--env-spacing-x-large);
      box-shadow: var(--env-box-shadow);
      background-color: var(--env-block-secondary-background-color);
      color: var(--env-block-secondary-font-color);
      border: 2px dashed var(--env-block-secondary-border-color);
      border-radius: var(--env-border-radius-large);
      font-size: var(--env-font-size-large);
      text-align: center;
   }
</style>
```

## Available CSS variables

### General

#### Font

- `--env-font-family`
- `--env-font-color`
- `--env-font-color-muted`
- `--env-font-size-base`
- `--env-font-size-x-small`
- `--env-font-size-small`
- `--env-font-size-medium`
- `--env-font-size-large`
- `--env-font-size-x-large`
- `--env-font-size-xx-large`
- `--env-font-size-xxx-large`
- `--env-font-size-xxxx-large`

#### Links

- `--env-link-font-color`
- `--env-link-text-decoration`
- `--env-link-hover-font-color`
- `--env-link-hover-text-decoration`
  <br><br>
- `--env-link-secondary-font-color`
- `--env-link-secondary-text-decoration`
- `--env-link-secondary-hover-font-color`
- `--env-link-secondary-hover-text-decoration`

#### Spacing

- `--env-spacing-xxx-small`
- `--env-spacing-xx-small`
- `--env-spacing-x-small`
- `--env-spacing-small`
- `--env-spacing-medium`
- `--env-spacing-large`
- `--env-spacing-x-large`
- `--env-spacing-xx-large`
- `--env-spacing-xxx-large`

#### Shadows

- `--env-box-shadow`
- `--env-box-shadow-large`
- `--env-box-shadow-small`
- `--env-box-shadow-color`

#### Borders

- `--env-border-radius`
- `--env-border-radius-small`
- `--env-border-radius-medium`
- `--env-border-radius-large`
  <br><br>
- `--env-border-color`
- `--env-border-color-05`

### Branding

#### UI Colors

- `--env-ui-color-brand`
- `--env-ui-color-brand-dark`
- `--env-ui-color-brand-contrast`
- `--env-ui-color-brand-{n}`
- `--env-ui-color-brand-{n}-contrast`

Valid values for `{n}` are: `05`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `45`, `50`, `55`, `60`, `65`, `70`, `75`, `80`
, `85`, `90`, `95`, `100`.

#### UI Status Colors

- `env-ui-color-status-neutral`
- `env-ui-color-status-neutral-contrast`
- `env-ui-color-status-active`
- `env-ui-color-status-active-contrast`
- `env-ui-color-status-active-text`
- `env-ui-color-status-attention`
- `env-ui-color-status-attention-contrast`
- `env-ui-color-status-attention-text`
- `env-ui-color-status-error`
- `env-ui-color-status-error-contrast`
- `env-ui-color-status-error-text`

### Typography

#### Text

- `--env-text-{name}-font-family`
- `--env-text-{name}-font-color`
- `--env-text-{name}-font-size`
- `--env-text-{name}-font-weight`
- `--env-text-{name}-font-style`
- `--env-text-{name}-text-transform`
- `--env-text-{name}-letter-spacing`
- `--env-text-{name}-line-height`
- `--env-text-{name}-margin-block-start`
- `--env-text-{name}-margin-block-end`
- `--env-text-{name}-link-font-color`
- `--env-text-{name}-link-text-decoration`
- `--env-text-{name}-link-hover-font-color`
- `--env-text-{name}-link-hover-text-decoration`

Valid values for `{name}` are: `heading-01` – `heading-06`, `display-01` – `display-03`, `summary-01`, `body-01` – `body-04`,
`caption-01`, `quotation-01`, `quotation-02`, `table-caption-01`, `table-heading-01`, `table-data-01`.

#### UI Text

- `--env-ui-text-{name}-font-family`
- `--env-ui-text-{name}-font-color`
- `--env-ui-text-{name}-font-size`
- `--env-ui-text-{name}-font-weight`
- `--env-ui-text-{name}-text-transform`
- `--env-ui-text-{name}-letter-spacing`

Valid values for `{name}` are: `overline`, `heading`, `sectionheading`, `subheading`, `caption`.

#### Text lists <span id="text-lists"></span><span class="doc-badge doc-badge--info">2025.09.1</span>

- `--env-text-list-ul-style-type`
- `--env-text-list-ol-style-type`
- `--env-text-list-margin-block-start`
- `--env-text-list-margin-block-end`
- `--env-text-list-margin-inline-start`
- `--env-text-list-margin-inline-end`
- `--env-text-list-padding-block-start`
- `--env-text-list-padding-block-end`
- `--env-text-list-padding-inline-start`
- `--env-text-list-padding-inline-end`
- `--env-text-list-item-margin-block-start`
- `--env-text-list-item-margin-block-end`
- `--env-text-list-item-margin-inline-start`
- `--env-text-list-item-margin-inline-end`
- `--env-text-list-item-padding-block-start`
- `--env-text-list-item-padding-block-end`
- `--env-text-list-item-padding-inline-start`
- `--env-text-list-item-padding-inline-end`

#### Blockquote <span class="doc-badge doc-badge--info">2025.04.2</span>

- `--env-blockquote-border-block-width`
- `--env-blockquote-border-block-color`
- `--env-blockquote-border-inline-start-width`
- `--env-blockquote-border-inline-start-color`
- `--env-blockquote-border-inline-end-width`
- `--env-blockquote-border-inline-end-color`
- `--env-blockquote-padding-block-start`
- `--env-blockquote-padding-inline-start`
- `--env-blockquote-padding-block-end`
- `--env-blockquote-padding-inline-end`
- `--env-blockquote-margin-block-start`
- `--env-blockquote-margin-block-end`

#### Mark <span class="doc-badge doc-badge--info">2025.04.2</span>

- `--env-mark-font-color`
- `--env-mark-background-color`

### Colors

#### Base

- `--env-background-color`
- `--env-section-background-color`
- `--env-section-background-color-05`

#### Blocks

- `--env-block-font-color`
- `--env-block-font-color-muted`
- `--env-block-background-color`
- `--env-block-border-color`
- `--env-block-link-font-color`
- `--env-block-link-hover-font-color`
- `--env-block-link-text-decoration`
- `--env-block-link-hover-text-decoration`
  <br><br>
- `--env-block-primary-font-color`
- `--env-block-primary-font-color-muted`
- `--env-block-primary-background-color`
- `--env-block-primary-border-color`
- `--env-block-primary-link-font-color`
- `--env-block-primary-link-hover-font-color`
- `--env-block-primary-link-text-decoration`
- `--env-block-primary-link-hover-text-decoration`
  <br><br>
- `--env-block-secondary-font-color`
- `--env-block-secondary-font-color-muted`
- `--env-block-secondary-background-color`
- `--env-block-secondary-border-color`
- `--env-block-secondary-link-font-color`
- `--env-block-secondary-link-hover-font-color`
- `--env-block-secondary-link-text-decoration`
- `--env-block-secondary-link-hover-text-decoration`

### Elements

- `--env-element-font-color`
- `--env-element-background-color`
- `--env-element-background-color-dark`
- `--env-element-background-color-light`
  <br><br>
- `--env-element-primary-font-color`
- `--env-element-primary-background-color`
- `--env-element-primary-background-color-dark`
- `--env-element-primary-background-color-light`
  <br><br>
- `--env-element-secondary-font-color`
- `--env-element-secondary-background-color`
- `--env-element-secondary-background-color-dark`
- `--env-element-secondary-background-color-light`
  <br><br>
- `--env-element-success-font-color`
- `--env-element-success-background-color`
- `--env-element-success-background-color-dark`
- `--env-element-success-background-color-light`
  <br><br>
- `--env-element-warning-font-color`
- `--env-element-warning-background-color`
- `--env-element-warning-background-color-dark`
- `--env-element-warning-background-color-light`
  <br><br>
- `--env-element-danger-font-color`
- `--env-element-danger-background-color`
- `--env-element-danger-background-color-dark`
- `--env-element-danger-background-color-light`
  <br><br>
- `--env-element-info-font-color`
- `--env-element-info-background-color`
- `--env-element-info-background-color-dark`
- `--env-element-info-background-color-light`

#### Focus Outline

- `--env-focus-size`
- `--env-focus-offset`
- `--env-focus-outline-color`
- `--env-focus-inner-color`

### Components

#### Alert

- `--env-alert-font-family`
- `--env-alert-border-radius`
- `--env-alert-background-color`

#### Badge

- `--env-badge-font-family`
- `--env-badge-font-size`
- `--env-badge-border-radius`
- `--env-badge-text-transform`
- `--env-badge-font-weight`
- `--env-badge-letter-spacing`

#### Breadcrumbs

- `--env-breadcrumb-divider-color`

#### Buttons

- `--env-button-font-family`
- `--env-button-border-radius`
- `--env-button-font-weight` <span class="doc-badge doc-badge--info">2026.01.1</span>
- `--env-button-letter-spacing` <span class="doc-badge doc-badge--info">2026.01.1</span>
- `--env-button-text-transform` <span class="doc-badge doc-badge--info">2026.01.1</span>

#### Call to Action buttons <span class="doc-badge doc-badge--info">2026.01.1</span>

- `--env-cta-font-family`
- `--env-cta-font-size`
- `--env-cta-font-weight`
- `--env-cta-letter-spacing`
- `--env-cta-text-transform`
- `--env-cta-border-radius`
- `--env-cta-border-width`
- `--env-cta-padding-inline`
- `--env-cta-padding-block`
- `--env-cta-font-color`
- `--env-cta-background-color`
- `--env-cta-border-color`
- `--env-cta-hover-font-color`
- `--env-cta-hover-background-color`
- `--env-cta-hover-border-color`

#### Cardholder

- `--env-cardholder-column-min-width`
- `--env-cardholder-column-max-width`
- `--env-cardholder-column-spacing`
- `--env-cardholder-grid-column-width`
- `--env-cardholder-grid-gap`

#### Collapse

- `--env-collapse-border-style`
- `--env-collapse-border-width`
- `--env-collapse-icon-color`
- `--env-collapse-icon-width`
- `--env-collapse-icon-height`
- `--env-collapse-toggle-duration`
- `--env-collapse-background-color`
- `--env-collapse-border-color`
- `--env-collapse-expanded-background-color`
- `--env-collapse-expanded-border-color`

#### Form

- `--env-form-font-family`
- `--env-form-input-border-radius`
- `--env-form-input-font-color`
- `--env-form-input-border-color`
- `--env-form-input-background-color`
- `--env-form-label-font-family`
- `--env-form-label-font-weight`

#### Dialog

- `--env-dialog-small-width`
- `--env-dialog-medium-width`
- `--env-dialog-large-width`

#### Pagination

- `--env-pagination-font-family`
- `--env-pagination-border-width`
- `--env-pagination-border-style`

#### Popover

- `--env-popover-width`

#### Progress indicator

- `--env-progress-bar-poll-highlight-color`

#### Profile image

- `--env-profile-image-border-radius`

#### Spinner

- `--env-spinner-color`

#### Tooltip

- `--env-tooltip-font-family`
- `--env-tooltip-font-size`
- `--env-tooltip-font-color`
- `--env-tooltip-font-weight`
- `--env-tooltip-background-color`
- `--env-tooltip-border-radius`

## Legacy variables <span class="doc-badge doc-badge--danger">Deprecated</span>

- `--env-border-success-color`
- `--env-border-warning-color`
- `--env-border-danger-color`
- `--env-border-color-light`
- `--env-color-page-bg`
- `--env-color-element-bg`
- `--env-color-brand`
- `--env-color-brand-light`
- `--env-color-brand-dark`
- `--env-color-warning`
- `--env-color-warning-dark`
- `--env-color-danger`
- `--env-color-success`
- `--env-color-info`
- `--env-color-hover`
- `--env-font-color-light`
- `--env-font-color-lighter`
- `--env-color-base`
- `--env-color-darker`
- `--env-color-dark`
- `--env-color-normal`
- `--env-color-light`
- `--env-color-lighter`
- `--env-color-lightest`
- `--env-focus-background-color`
- `--env-focus-color`
- `--env-modal-small-width`
- `--env-modal-medium-width`
- `--env-modal-large-width`
- `--env-modal-backdrop-background-color`
- `--env-modal-backdrop-opacity`
- `--env-image-control-color`
- `--env-element-common-background-color`

### Removed

- `--env-default-button-color`
- `--env-element-common-background-color-dark`
- `--env-font-color-invert`
- `--env-image-control-inactive-color`
- `--env-page-background-color`

---

## Utils – Display
URL: https://envisionui.io/utils/display/
Description: The Display utility provides classes to set an element’s display property, such as inline, block, flex, inline-block, inline-flex, or none.

Use this utility to set an element's display property. Utility classes are named using the format: `env-d--{value}`

Valid values

- `inline`
- `block`
- `flex`
- `inline-block`
- `inline-flex`
- `none`

Examples

```html
<div class="example-display">
   <div class="env-p--x-small env-d--inline">Inline</div>
   <div class="env-p--x-small env-d--block">Block</div>
   <div class="env-p--x-small env-d--inline-block">Inline block</div>
   <div class="env-p--x-small env-d--flex">Flex</div>
   <div class="env-p--x-small env-d--inline-flex">Inline flex</div>
   <div class="env-p--x-small env-d--none">None</div>
</div>
```

---

## Utils – Shadows
URL: https://envisionui.io/utils/shadows/
Description: Use the Shadows utility classes to apply various sized shadows to elements.

## Sizes

```html
<div class="example-shadow-util">
   <span class="env-shadow-small">Small</span>
   <span class="env-shadow">Default</span>
   <span class="env-shadow-large">Large</span>
</div>
```

---

## Utils – Sizing
URL: https://envisionui.io/utils/sizing/
Description: The Sizing utility offers classes to define elements’ width and height using preset values.

Sizing utilities provide classes for defining an element’s width and height.

## Usage

Use sizing utilities to define an element’s width or height using preset values.

Classes follow the pattern `env-{property}--{size}`.

### Valid values

#### {property}

- `w` <small>(width)</small>
- `h` <small>(height)</small>

#### {size}

Available values are percentage-based:

- `25`
- `50`
- `75`
- `100`

### Width examples

```html
<div class="example-sizing">
   <div class="env-w--25 env-p--x-small env-m-block-end--small">25%</div>
   <div class="env-w--50 env-p--x-small env-m-block-end--small">50%</div>
   <div class="env-w--75 env-p--x-small env-m-block-end--small">75%</div>
   <div class="env-w--100 env-p--x-small">100%</div>
</div>
```

### Height examples

```html
<div class="example-sizing-h">
   <div
      class="env-h--25 env-p--x-small env-m-inline-end--small env-d--inline-block"
   >
      25%
   </div>
   <div
      class="env-h--50 env-p--x-small env-m-inline-end--small env-d--inline-block"
   >
      50%
   </div>
   <div
      class="env-h--75 env-p--x-small env-m-inline-end--small env-d--inline-block"
   >
      75%
   </div>
   <div class="env-h--100 env-p--x-small env-d--inline-block">100%</div>
</div>
```

## Max size

Utility classes are also available for constraining elements to their container:

- `env-mw--100` <small>(max-width)</small>
- `env-mh--100` <small>(max-height)</small>

---

## Utils – Spacing
URL: https://envisionui.io/utils/spacing/
Description: The Spacing utility provides classes for consistent margin and padding adjustments across elements.

The spacing utility was updated in **2026.01.2** to support logical properties alongside physical ones.
See the [logical properties example](/utils/spacing/#logical-properties-example).

The custom specifiers `horizontal`, `vertical`, and `around` are deprecated.
See [Deprecated](/utils/spacing/#deprecated) for details.

## Usage

Use spacing utilities to apply margin and padding consistently across the system.

Use the pattern `env-{property}-{specifier}--{size}`, or use the shorthand  
`env-{property}--{size}` to apply spacing to all sides.

### Valid values

#### {property}

- `m` <small>margin</small>
- `p` <small>padding</small>

#### {specifier}

Physical and logical properties are both supported.
Logical properties are recommended for spacing within components and internationalized content,
while physical properties remain useful for overall layout and dimensions.

- `top`
- `right`
- `bottom`
- `left`
- `block-start`
- `inline-end`
- `block-end`
- `inline-start`
- `block` <small>block-start & block-end shorthand</small>
- `inline` <small>inline-start & inline-end shorthand</small>
- `{omitted}` <small>block and inline shorthand</small>

#### {size}

- `0` <small>No margin</small>
- `a` <small>auto, only applicable to margin</small>
- `xxx-small` <small>(0.125em)</small>
- `xx-small` <small>(0.25em)</small>
- `x-small` <small>(0.5em)</small>
- `small` <small>(0.75em)</small>
- `medium` <small>(1em)</small>
- `large` <small>(1.25em)</small>
- `x-large` <small>(1.5em)</small>
- `xx-large` <small>(1.75em)</small>
- `xxx-large` <small>(2em)</small>

### Negative margin

Negative margin is applied by combining a size class with the `--negative` modifier. Negative values are only available for margin.

Example:

`<div class="env-m-inline--large env-m-inline--negative">...</div>`

### Spacing examples

<div class="example-spacing">
   <div class="example-spacing__margin">
      <div class="example-spacing__padding env-m--medium env-p--medium">
         <div class="example-spacing__content">
            env-m--medium<br />env-p--medium
         </div>
      </div>
   </div>
</div>
<div class="example-spacing">
   <div class="example-spacing__margin">
      <div class="example-spacing__padding env-m-inline--xxx-large env-p-block--large">
         <div class="example-spacing__content">
            env-m-inline--xxx-large<br />env-p-block--large
         </div>
      </div>
   </div>
</div>
<div class="example-spacing">
   <div class="example-spacing__margin">
      <div class="example-spacing__padding env-m-inline--negative env-m-inline--large env-m-block--medium env-p--small">
         <div class="example-spacing__content">
            env-m-inline--large<br />
            env-m-inline--negative<br /> 
            env-m-block--medium<br />
            env-p--small<br />
         </div>
      </div>
   </div>
</div>
<div class="example-spacing">
   <div class="example-spacing__margin">
      <div class="example-spacing__padding env-m-block-start--negative env-m-block-start--medium env-m-inline-end--medium env-m-block-end--small env-m-inline-start--xxx-large env-p--medium">
         <div class="example-spacing__content">
            env-m-block-start--negative<br />
            env-m-block-start--medium<br />
            env-m-inline-end--medium<br />
            env-m-block-end--small<br />
            env-m-inline-start--xxx-large<br />
            env-p--medium
         </div>
      </div>
   </div>
</div>
<div class="example-spacing">
   <div class="example-spacing__margin">
      <div class="example-spacing__padding env-w--50 env-m-block--medium env-m-inline--a env-p--medium">
         <div class="example-spacing__content">
            env-w--50<br />
            env-m-block--medium<br />
            env-m-inline--a<br />
            env-p--medium<br />
         </div>
      </div>
   </div>
</div>

## Logical properties example

Logical properties are based on the content’s writing flow instead of physical sides.
This allows spacing to adapt naturally to different languages and writing modes.

All of the examples below use the same classes:

`env-m-block-start--medium`, `env-p--x-small`, `env-p-block-start--0`, `env-p-inline-end--xx-large`

<div class="example-spacing">
<div class="env-flex env-flex--wrap env-flex--gap-medium">
<div class="env-flex__item">
   <div class="example-spacing__margin" style="max-inline-size: 12em">
      <div class="example-spacing__padding env-m-block-start--medium env-p--x-small env-p-block-start--0 env-p-inline-end--xx-large">
         <div class="example-spacing__env-content">
            We believe in making the complex simple.
         </div>
      </div>
   </div>
</div>
<div class="env-flex__item">
   <div class="example-spacing__margin" lang="ar" style="direction: rtl; max-inline-size: 12em">
      <div class="example-spacing__padding env-m-block-start--medium env-p--x-small env-p-block-start--0 env-p-inline-end--xx-large">
         <div class="example-spacing__env-content">نحن نؤمن بضرورة تبسيط الأمور المعقدة.</div>
      </div>
   </div>
</div>
<div class="env-flex__item" >
   <div class="example-spacing__margin" lang="ja" style="writing-mode: vertical-rl; max-inline-size: 8em">
      <div class="example-spacing__padding env-m-block-start--medium env-p--x-small env-p-block-start--0 env-p-inline-end--xx-large">
         <div class="example-spacing__env-content">私たちは複雑なものをシンプルにすることに取り組んでいます。</div>
      </div>
   </div>
</div>
</div>
</div>

Read more about [CSS logical properties and values (MDN)
](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values).

## Deprecated

Since 2026.02.1, the following custom specifiers are deprecated:

- `horizontal` <small>use `inline` for direction-aware spacing, or `left` and `right` for physical spacing</small>
- `vertical` <small>use `block` for direction-aware spacing, or `top` and `bottom` for physical spacing</small>
- `around` <small>use the shorthand by omitting the specifier</small>

---

## Utils – Vertical alignment
URL: https://envisionui.io/utils/vertical-alignment/
Description: The Vertical Alignment utility offers classes to align elements – baseline, top, middle, bottom, text-top, and text-bottom.

## Types

```html
<span class="env-align--baseline">baseline</span>
<span class="env-align--top">top</span>
<span class="env-align--middle">middle</span>
<span class="env-align--bottom">bottom</span>
<span class="env-align--text-top">text-top</span>
<span class="env-align--text-bottom">text-bottom</span>
```

```html
<table class="example-vertical-alignment">
   <tbody>
      <tr>
         <td class="env-align--baseline">baseline</td>
         <td class="env-align--top">top</td>
         <td class="env-align--middle">middle</td>
         <td class="env-align--bottom">bottom</td>
         <td class="env-align--text-top">text-top</td>
         <td class="env-align--text-bottom">text-bottom</td>
      </tr>
   </tbody>
</table>
```