# Foundations

*Category:* Foundations
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#foundations
*Captured:* 2026-04-27T14:59:08.566Z

You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light

## Buttons

> See also our Button component.

> Note: For having spacing between buttons in a single row you may want to wrap them with<div class="btn-toolbar"></div>

> Note: You can use link buttons within text blocks by adding btn-linkbtn-link-inline

### Example: Example 1

Default buttons

Default Default

Icon buttons

Muted buttons

Muted filled Muted

Link buttons

primary secondary info success warning danger

Colored buttons

primary secondary info success warning danger

Outline buttons

primary secondary info success warning danger

Split buttons

default
primary
secondary
info
success
warning
danger
muted-filled

#### HTML (html)

```html
<div class="display-grid grid-cols-1 gap-20 margin-bottom-25">
    <div class="display-flex flex-wrap gap-20">
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Default buttons</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="btn-toolbar">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-default">
                    <span class="rioglyph rioglyph-user" aria-hidden="true">
                    </span>Default</button>
            </div>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Icon buttons</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="btn-toolbar">
                <button type="button" class="btn btn-default btn-icon-only">
                    <span class="rioglyph rioglyph-truck" aria-hidden="true">
                    </span>
                </button>
                <button type="button" class="btn btn-primary btn-icon-only">
                    <span class="rioglyph rioglyph-user" aria-hidden="true">
                    </span>
                </button>
                <button type="button" class="btn btn-secondary btn-icon-only">
                    <span class="rioglyph rioglyph-van" aria-hidden="true">
                    </span>
                </button>
                <button type="button" class="btn btn-info btn-icon-only">
                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
                    </span>
                </button>
                <button type="button" class="btn btn-success btn-icon-only">
                    <span class="rioglyph rioglyph-car" aria-hidden="true">
                    </span>
                </button>
                <button type="button" class="btn btn-warning btn-icon-only">
                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
                    </span>
                </button>
                <button type="button" class="btn btn-danger btn-icon-only">
                    <span class="rioglyph rioglyph-user" aria-hidden="true">
                    </span>
                </button>
            </div>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Muted buttons</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="btn-toolbar">
                <button type="button" class="btn btn-muted-filled">
                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                    </span>Muted filled</button>
                <button type="button" class="btn btn-muted-filled btn-icon-only">
                    <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                    </span>
                </button>
                <button type="button" class="btn btn-muted">
                    <span class="rioglyph rioglyph-driver" aria-hidden="true">
                    </span>Muted</button>
                <button type="button" class="btn btn-muted btn-icon-only">
                    <span class="rioglyph rioglyph-car" aria-hidden="true">
                    </span>
                </button>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Link buttons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-primary btn-link">
                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                </span>
                <span class="text-capitalize">primary</span>
            </button>
            <button type="button" class="btn btn-secondary btn-link">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
                <span class="text-capitalize">secondary</span>
            </button>
            <button type="button" class="btn btn-info btn-link">
                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                </span>
                <span class="text-capitalize">info</span>
            </button>
            <button type="button" class="btn btn-success btn-link">
                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                </span>
                <span class="text-capitalize">success</span>
            </button>
            <button type="button" class="btn btn-warning btn-link">
                <span class="rioglyph rioglyph-car" aria-hidden="true">
                </span>
                <span class="text-capitalize">warning</span>
            </button>
            <button type="button" class="btn btn-danger btn-link">
                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                </span>
                <span class="text-capitalize">danger</span>
            </button>
        </div>
    </div>
</div>
<div class="display-grid grid-cols-1 gap-20 margin-bottom-25">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Colored buttons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-primary">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
                <span class="text-capitalize">primary</span>
            </button>
            <button type="button" class="btn btn-secondary">
                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                </span>
                <span class="text-capitalize">secondary</span>
            </button>
            <button type="button" class="btn btn-info">
                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                </span>
                <span class="text-capitalize">info</span>
            </button>
            <button type="button" class="btn btn-success">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
                <span class="text-capitalize">success</span>
            </button>
            <button type="button" class="btn btn-warning">
                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                </span>
                <span class="text-capitalize">warning</span>
            </button>
            <button type="button" class="btn btn-danger">
                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                </span>
                <span class="text-capitalize">danger</span>
            </button>
        </div>
    </div>
</div>
<div class="display-grid grid-cols-1 gap-20 margin-bottom-25">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Outline buttons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar padding-10 bg-checkerboard rounded">
            <button type="button" class="btn btn-primary btn-outline">
                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                </span>
                <span class="text-capitalize">primary</span>
            </button>
            <button type="button" class="btn btn-secondary btn-outline">
                <span class="rioglyph rioglyph-car" aria-hidden="true">
                </span>
                <span class="text-capitalize">secondary</span>
            </button>
            <button type="button" class="btn btn-info btn-outline">
                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                </span>
                <span class="text-capitalize">info</span>
            </button>
            <button type="button" class="btn btn-success btn-outline">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
                <span class="text-capitalize">success</span>
            </button>
            <button type="button" class="btn btn-warning btn-outline">
                <span class="rioglyph rioglyph-van" aria-hidden="true">
                </span>
                <span class="text-capitalize">warning</span>
            </button>
            <button type="button" class="btn btn-danger btn-outline">
                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                </span>
                <span class="text-capitalize">danger</span>
            </button>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Split buttons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-default">
                    <span class="text-capitalize">default</span>
                </button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret">
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary">
                    <span class="text-capitalize">primary</span>
                </button>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    <span class="caret">
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-secondary">
                    <span class="text-capitalize">secondary</span>
                </button>
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
                    <span class="caret">
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-info">
                    <span class="text-capitalize">info</span>
                </button>
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    <span class="caret">
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-success">
                    <span class="text-capitalize">success</span>
                </button>
                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                    <span class="caret">
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-warning">
                    <span class="text-capitalize">warning</span>
                </button>
                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                    <span class="caret">
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-danger">
                    <span class="text-capitalize">danger</span>
                </button>
                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                    <span class="caret">
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-muted-filled">
                    <span class="text-capitalize">muted-filled</span>
                </button>
                <button type="button" class="btn btn-muted-filled dropdown-toggle" data-toggle="dropdown">
                    <span class="caret">
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
btn btn-default
```

## Button states

### Example: Example 2

Button Hover button Active button Focus button Disabled button
Button Hover button Active button Focus button Disabled button
Button Hover button Active button Focus button Disabled button
Button Hover button Active button Focus button Disabled button
Button Hover button Active button Focus button Disabled button
Button Hover button Active button Focus button Disabled button
Button Hover button Active button Focus button Disabled button

#### HTML (html)

```html
<div class="display-grid grid-cols-1 gap-20 margin-bottom-25">
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default">
            <span>Button</span>
        </button>
        <button type="button" class="btn btn-default hover">
            <span>Hover button</span>
        </button>
        <button type="button" class="btn btn-default active">
            <span>Active button</span>
        </button>
        <button type="button" class="btn btn-default focus">
            <span>Focus button</span>
        </button>
        <button type="button" class="btn btn-default" disabled="">
            <span>Disabled button</span>
        </button>
    </div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-primary">
            <span>Button</span>
        </button>
        <button type="button" class="btn btn-primary hover">
            <span>Hover button</span>
        </button>
        <button type="button" class="btn btn-primary active">
            <span>Active button</span>
        </button>
        <button type="button" class="btn btn-primary focus">
            <span>Focus button</span>
        </button>
        <button type="button" class="btn btn-primary" disabled="">
            <span>Disabled button</span>
        </button>
    </div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-secondary">
            <span>Button</span>
        </button>
        <button type="button" class="btn btn-secondary hover">
            <span>Hover button</span>
        </button>
        <button type="button" class="btn btn-secondary active">
            <span>Active button</span>
        </button>
        <button type="button" class="btn btn-secondary focus">
            <span>Focus button</span>
        </button>
        <button type="button" class="btn btn-secondary" disabled="">
            <span>Disabled button</span>
        </button>
    </div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-info">
            <span>Button</span>
        </button>
        <button type="button" class="btn btn-info hover">
            <span>Hover button</span>
        </button>
        <button type="button" class="btn btn-info active">
            <span>Active button</span>
        </button>
        <button type="button" class="btn btn-info focus">
            <span>Focus button</span>
        </button>
        <button type="button" class="btn btn-info" disabled="">
            <span>Disabled button</span>
        </button>
    </div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-success">
            <span>Button</span>
        </button>
        <button type="button" class="btn btn-success hover">
            <span>Hover button</span>
        </button>
        <button type="button" class="btn btn-success active">
            <span>Active button</span>
        </button>
        <button type="button" class="btn btn-success focus">
            <span>Focus button</span>
        </button>
        <button type="button" class="btn btn-success" disabled="">
            <span>Disabled button</span>
        </button>
    </div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-warning">
            <span>Button</span>
        </button>
        <button type="button" class="btn btn-warning hover">
            <span>Hover button</span>
        </button>
        <button type="button" class="btn btn-warning active">
            <span>Active button</span>
        </button>
        <button type="button" class="btn btn-warning focus">
            <span>Focus button</span>
        </button>
        <button type="button" class="btn btn-warning" disabled="">
            <span>Disabled button</span>
        </button>
    </div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-danger">
            <span>Button</span>
        </button>
        <button type="button" class="btn btn-danger hover">
            <span>Hover button</span>
        </button>
        <button type="button" class="btn btn-danger active">
            <span>Active button</span>
        </button>
        <button type="button" class="btn btn-danger focus">
            <span>Focus button</span>
        </button>
        <button type="button" class="btn btn-danger" disabled="">
            <span>Disabled button</span>
        </button>
    </div>
</div>
```

## Button sizes

### Example: Example 3

XS buttons

default primary secondary info success warning danger

XS icon buttons

SM buttons

default primary secondary info success warning danger

SM icon buttons

MD buttons (default)

default primary secondary info success warning danger

MD icon buttons (default)

LG buttons

default primary secondary info success warning danger

LG icon buttons

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-3-ls gap-20 margin-bottom-25">
    <div class="grid-colspan-2-ls">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>XS buttons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-xs">
                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                </span>
                <span class="text-capitalize">default</span>
            </button>
            <button type="button" class="btn btn-primary btn-xs">
                <span class="rioglyph rioglyph-car" aria-hidden="true">
                </span>
                <span class="text-capitalize">primary</span>
            </button>
            <button type="button" class="btn btn-secondary btn-xs">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
                <span class="text-capitalize">secondary</span>
            </button>
            <button type="button" class="btn btn-info btn-xs">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
                <span class="text-capitalize">info</span>
            </button>
            <button type="button" class="btn btn-success btn-xs">
                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                </span>
                <span class="text-capitalize">success</span>
            </button>
            <button type="button" class="btn btn-warning btn-xs">
                <span class="rioglyph rioglyph-van" aria-hidden="true">
                </span>
                <span class="text-capitalize">warning</span>
            </button>
            <button type="button" class="btn btn-danger btn-xs">
                <span class="rioglyph rioglyph-van" aria-hidden="true">
                </span>
                <span class="text-capitalize">danger</span>
            </button>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>XS icon buttons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-xs btn-icon-only">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-primary btn-xs btn-icon-only">
                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-secondary btn-xs btn-icon-only">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-info btn-xs btn-icon-only">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-success btn-xs btn-icon-only">
                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-warning btn-xs btn-icon-only">
                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-danger btn-xs btn-icon-only">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
            </button>
        </div>
    </div>
</div>
<div class="display-grid grid-cols-1 grid-cols-3-ls gap-20 margin-bottom-25">
    <div class="grid-colspan-2-ls">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>SM buttons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-sm">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
                <span class="text-capitalize">default</span>
            </button>
            <button type="button" class="btn btn-primary btn-sm">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
                <span class="text-capitalize">primary</span>
            </button>
            <button type="button" class="btn btn-secondary btn-sm">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
                <span class="text-capitalize">secondary</span>
            </button>
            <button type="button" class="btn btn-info btn-sm">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
                <span class="text-capitalize">info</span>
            </button>
            <button type="button" class="btn btn-success btn-sm">
                <span class="rioglyph rioglyph-car" aria-hidden="true">
                </span>
                <span class="text-capitalize">success</span>
            </button>
            <button type="button" class="btn btn-warning btn-sm">
                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                </span>
                <span class="text-capitalize">warning</span>
            </button>
            <button type="button" class="btn btn-danger btn-sm">
                <span class="rioglyph rioglyph-van" aria-hidden="true">
                </span>
                <span class="text-capitalize">danger</span>
            </button>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>SM icon buttons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-sm btn-icon-only">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-primary btn-sm btn-icon-only">
                <span class="rioglyph rioglyph-car" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-secondary btn-sm btn-icon-only">
                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-info btn-sm btn-icon-only">
                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-success btn-sm btn-icon-only">
                <span class="rioglyph rioglyph-van" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-warning btn-sm btn-icon-only">
                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-danger btn-sm btn-icon-only">
                <span class="rioglyph rioglyph-car" aria-hidden="true">
                </span>
            </button>
        </div>
    </div>
</div>
<div class="display-grid grid-cols-1 grid-cols-3-ls gap-20 margin-bottom-25">
    <div class="grid-colspan-2-ls">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>MD buttons (default)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
                <span class="text-capitalize">default</span>
            </button>
            <button type="button" class="btn btn-primary">
                <span class="rioglyph rioglyph-van" aria-hidden="true">
                </span>
                <span class="text-capitalize">primary</span>
            </button>
            <button type="button" class="btn btn-secondary">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
                <span class="text-capitalize">secondary</span>
            </button>
            <button type="button" class="btn btn-info">
                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                </span>
                <span class="text-capitalize">info</span>
            </button>
            <button type="button" class="btn btn-success">
                <span class="rioglyph rioglyph-car" aria-hidden="true">
                </span>
                <span class="text-capitalize">success</span>
            </button>
            <button type="button" class="btn btn-warning">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
                <span class="text-capitalize">warning</span>
            </button>
            <button type="button" class="btn btn-danger">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
                <span class="text-capitalize">danger</span>
            </button>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>MD icon buttons (default)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-icon-only">
                <span class="rioglyph rioglyph-van" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-primary btn-icon-only">
                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-secondary btn-icon-only">
                <span class="rioglyph rioglyph-car" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-info btn-icon-only">
                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-success btn-icon-only">
                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-warning btn-icon-only">
                <span class="rioglyph rioglyph-trailer" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-danger btn-icon-only">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
            </button>
        </div>
    </div>
</div>
<div class="display-grid grid-cols-1 grid-cols-3-ls gap-20 margin-bottom-25">
    <div class="grid-colspan-2-ls">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>LG buttons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-lg">
                <span class="rioglyph rioglyph-car" aria-hidden="true">
                </span>
                <span class="text-capitalize">default</span>
            </button>
            <button type="button" class="btn btn-primary btn-lg">
                <span class="rioglyph rioglyph-car" aria-hidden="true">
                </span>
                <span class="text-capitalize">primary</span>
            </button>
            <button type="button" class="btn btn-secondary btn-lg">
                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                </span>
                <span class="text-capitalize">secondary</span>
            </button>
            <button type="button" class="btn btn-info btn-lg">
                <span class="rioglyph rioglyph-driver" aria-hidden="true">
                </span>
                <span class="text-capitalize">info</span>
            </button>
            <button type="button" class="btn btn-success btn-lg">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
                <span class="text-capitalize">success</span>
            </button>
            <button type="button" class="btn btn-warning btn-lg">
                <span class="rioglyph rioglyph-businessman" aria-hidden="true">
                </span>
                <span class="text-capitalize">warning</span>
            </button>
            <button type="button" class="btn btn-danger btn-lg">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
                <span class="text-capitalize">danger</span>
            </button>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>LG icon buttons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="btn-toolbar">
            <button type="button" class="btn btn-default btn-lg btn-icon-only">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-primary btn-lg btn-icon-only">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-secondary btn-lg btn-icon-only">
                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-info btn-lg btn-icon-only">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-success btn-lg btn-icon-only">
                <span class="rioglyph rioglyph-user" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-warning btn-lg btn-icon-only">
                <span class="rioglyph rioglyph-bus" aria-hidden="true">
                </span>
            </button>
            <button type="button" class="btn btn-danger btn-lg btn-icon-only">
                <span class="rioglyph rioglyph-truck" aria-hidden="true">
                </span>
            </button>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
btn btn-xs btn-primary
```

## Button examples

### Example: Example 4

Button toolbar

Prev Next

Button group

1 2 3 4

Button Button Button

Multiline button

This is a multiline button with a lot of Text
Block button

Block level button
Tooltip buttons

Button with tooltip Disabled button with tooltip

#### HTML (html)

```html
<div>
    <div class="row">
        <div class="col-md-3 col-lg-2 margin-bottom-20">
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Button toolbar</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="btn-toolbar">
                <button type="button" class="btn btn-primary">
                    <span class="rioglyph rioglyph-chevron-left" aria-hidden="true">
                    </span>
                    <span>Prev</span>
                </button>
                <button type="button" class="btn btn-primary btn-icon-right">
                    <span class="rioglyph rioglyph-chevron-right" aria-hidden="true">
                    </span>
                    <span>Next</span>
                </button>
            </div>
        </div>
        <div class="col-md-3 col-lg-2 margin-bottom-20">
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Button group</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="btn-toolbar margin-bottom-20">
                <div class="btn-group">
                    <button type="button" class="btn btn-default">1</button>
                    <button type="button" class="btn btn-default">2</button>
                    <button type="button" class="btn btn-default">3</button>
                    <button type="button" class="btn btn-default">4</button>
                </div>
            </div>
            <div class="btn-group-vertical">
                <button type="button" class="btn btn-default">Button</button>
                <button type="button" class="btn btn-default">Button</button>
                <button type="button" class="btn btn-default">Button</button>
            </div>
        </div>
        <div class="col-md-3 col-lg-2 margin-bottom-20">
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Multiline button</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <button type="button" class="btn btn-primary btn-lg btn-multiline">This is a multiline button with a lot of Text</button>
        </div>
        <div class="col-md-3 col-lg-2 margin-bottom-20">
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Block button</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <button type="button" class="btn btn-default btn-block">Block level button</button>
        </div>
        <div class="col-md-12 col-lg-4 margin-bottom-20">
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Tooltip buttons</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="btn-toolbar">
                <span>
                    <button type="button" class="btn btn-info">Button with tooltip</button>
                </span>
                <span class="cursor-not-allowed">
                    <button type="button" class="btn btn-info disabled">Disabled button with tooltip</button>
                </span>
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
btn-toolbar
```

## Action buttons

Colors

### Example: Example 5

Click me Click me Click me Click me Click me Click me

#### HTML (html)

```html
<div class="btn-toolbar align-items-start">
    <button type="button" class="btn btn-primary btn-action text-size-h1">
        <span class="rioglyph rioglyph-truck" aria-hidden="true">
        </span>
        <span class="">Click me</span>
    </button>
    <button type="button" class="btn btn-secondary btn-action text-size-h2">
        <span class="rioglyph rioglyph-user" aria-hidden="true">
        </span>
        <span class="">Click me</span>
    </button>
    <button type="button" class="btn btn-info btn-action text-size-h3">
        <span class="rioglyph rioglyph-van" aria-hidden="true">
        </span>
        <span class="">Click me</span>
    </button>
    <button type="button" class="btn btn-success btn-action text-size-h4">
        <span class="rioglyph rioglyph-bus" aria-hidden="true">
        </span>
        <span class="">Click me</span>
    </button>
    <button type="button" class="btn btn-warning btn-action text-size-h5">
        <span class="rioglyph rioglyph-truck" aria-hidden="true">
        </span>
        <span class="">Click me</span>
    </button>
    <button type="button" class="btn btn-danger btn-action text-size-h6">
        <span class="rioglyph rioglyph-bus" aria-hidden="true">
        </span>
        <span class="">Click me</span>
    </button>
</div>
```

#### Classes (css)

```css
btn-xs
```

## Background colors

### Example: Example 6

Basic
bg-white
bg-black

Brand
bg-primary
bg-secondary

Status
bg-info
bg-success
bg-warning
bg-danger

Driving status
bg-status-available
bg-status-driving
bg-status-resting
bg-status-working

Map marker
bg-map-marker-asset
bg-map-marker-poi
bg-map-marker-geofence
bg-map-marker-route

Rating
bg-rating-1
bg-rating-2
bg-rating-3
bg-rating-4
bg-rating-5

Gray
bg-decent
bg-lightest
bg-lighter
bg-light
bg-gray
bg-dark
bg-darker
bg-darkest

Highlight
bg-highlight-decent
bg-highlight-lightest
bg-highlight-lighter
bg-highlight-light
bg-highlight
bg-highlight-dark
bg-highlight-darker
bg-highlight-darkest

#### HTML (html)

```html
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Basic</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="bg-white rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-white</div>
        <div class="bg-black rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-black</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Brand</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="bg-primary rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-primary</div>
        <div class="bg-secondary rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-secondary</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Status</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="bg-info rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-info</div>
        <div class="bg-success rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-success</div>
        <div class="bg-warning rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-warning</div>
        <div class="bg-danger rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-danger</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Driving status</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="bg-status-available rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-status-available</div>
        <div class="bg-status-driving rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-status-driving</div>
        <div class="bg-status-resting rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-status-resting</div>
        <div class="bg-status-working rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-status-working</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Map marker</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="bg-map-marker-asset rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-map-marker-asset</div>
        <div class="bg-map-marker-poi rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-map-marker-poi</div>
        <div class="bg-map-marker-geofence rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-map-marker-geofence</div>
        <div class="bg-map-marker-route rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-map-marker-route</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Rating</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="bg-rating-1 rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-rating-1</div>
        <div class="bg-rating-2 rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-rating-2</div>
        <div class="bg-rating-3 rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-rating-3</div>
        <div class="bg-rating-4 rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-rating-4</div>
        <div class="bg-rating-5 rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-rating-5</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Gray</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="bg-decent rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-decent</div>
        <div class="bg-lightest rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-lightest</div>
        <div class="bg-lighter rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-lighter</div>
        <div class="bg-light rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-light</div>
        <div class="bg-gray rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-gray</div>
        <div class="bg-dark rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-dark</div>
        <div class="bg-darker rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-darker</div>
        <div class="bg-darkest rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-darkest</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Highlight</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="bg-highlight-decent rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-highlight-decent</div>
        <div class="bg-highlight-lightest rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-highlight-lightest</div>
        <div class="bg-highlight-lighter rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-highlight-lighter</div>
        <div class="bg-highlight-light rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-highlight-light</div>
        <div class="bg-highlight rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-highlight</div>
        <div class="bg-highlight-dark rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-highlight-dark</div>
        <div class="bg-highlight-darker rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-highlight-darker</div>
        <div class="bg-highlight-darkest rounded padding-5 text-center text-size-12 display-grid place-items-center ">bg-highlight-darkest</div>
    </div>
</div>
```

#### Classes (css)

```css
bg-white
```

## Hover background colors

### Example: Example 7

Basic
hover-bg-white
hover-bg-black

Brand
hover-bg-primary
hover-bg-secondary

Status
hover-bg-info
hover-bg-success
hover-bg-warning
hover-bg-danger

Driving status
hover-bg-status-available
hover-bg-status-driving
hover-bg-status-resting
hover-bg-status-working

Map Marker
hover-bg-map-marker-asset
hover-bg-map-marker-poi
hover-bg-map-marker-geofence
hover-bg-map-marker-route

Rating
hover-bg-rating-1
hover-bg-rating-2
hover-bg-rating-3
hover-bg-rating-4
hover-bg-rating-5

Gray
hover-bg-decent
hover-bg-lightest
hover-bg-lighter
hover-bg-light
hover-bg-gray
hover-bg-dark
hover-bg-darker
hover-bg-darkest

Highlight
hover-bg-highlight-decent
hover-bg-highlight-lightest
hover-bg-highlight-lighter
hover-bg-highlight-light
hover-bg-highlight
hover-bg-highlight-dark
hover-bg-highlight-darker
hover-bg-highlight-darkest

#### HTML (html)

```html
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Basic</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-bg-white rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-white</div>
        <div class="hover-bg-black rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-black</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Brand</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-bg-primary rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-primary</div>
        <div class="hover-bg-secondary rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-secondary</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Status</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-bg-info rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-info</div>
        <div class="hover-bg-success rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-success</div>
        <div class="hover-bg-warning rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-warning</div>
        <div class="hover-bg-danger rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-danger</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Driving status</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-bg-status-available rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-status-available</div>
        <div class="hover-bg-status-driving rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-status-driving</div>
        <div class="hover-bg-status-resting rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-status-resting</div>
        <div class="hover-bg-status-working rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-status-working</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Map Marker</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-bg-map-marker-asset rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-map-marker-asset</div>
        <div class="hover-bg-map-marker-poi rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-map-marker-poi</div>
        <div class="hover-bg-map-marker-geofence rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-map-marker-geofence</div>
        <div class="hover-bg-map-marker-route rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-map-marker-route</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Rating</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-bg-rating-1 rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-rating-1</div>
        <div class="hover-bg-rating-2 rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-rating-2</div>
        <div class="hover-bg-rating-3 rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-rating-3</div>
        <div class="hover-bg-rating-4 rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-rating-4</div>
        <div class="hover-bg-rating-5 rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-rating-5</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Gray</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-bg-decent rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-decent</div>
        <div class="hover-bg-lightest rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-lightest</div>
        <div class="hover-bg-lighter rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-lighter</div>
        <div class="hover-bg-light rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-light</div>
        <div class="hover-bg-gray rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-gray</div>
        <div class="hover-bg-dark rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-dark</div>
        <div class="hover-bg-darker rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-darker</div>
        <div class="hover-bg-darkest rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-darkest</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Highlight</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-bg-highlight-decent rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-highlight-decent</div>
        <div class="hover-bg-highlight-lightest rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-highlight-lightest</div>
        <div class="hover-bg-highlight-lighter rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-highlight-lighter</div>
        <div class="hover-bg-highlight-light rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-highlight-light</div>
        <div class="hover-bg-highlight rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-highlight</div>
        <div class="hover-bg-highlight-dark rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-highlight-dark</div>
        <div class="hover-bg-highlight-darker rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-highlight-darker</div>
        <div class="hover-bg-highlight-darkest rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-bg-highlight-darkest</div>
    </div>
</div>
```

#### Classes (css)

```css
hover-bg-white
```

## Text

### Example: text-color-dark

Basic
text-color-white
text-color-black

Brand
text-color-primary
text-color-secondary

Status
text-color-info
text-color-success
text-color-warning
text-color-danger

Driving status
text-color-status-available
text-color-status-driving
text-color-status-resting
text-color-status-working

Map marker
text-color-map-marker-asset
text-color-map-marker-poi
text-color-map-marker-geofence
text-color-map-marker-route

Rating
text-color-rating-1
text-color-rating-2
text-color-rating-3
text-color-rating-4
text-color-rating-5

Gray
text-color-decent
text-color-lightest
text-color-lighter
text-color-light
text-color-gray
text-color-dark
text-color-darker
text-color-darkest

Highlight
text-color-highlight-decent
text-color-highlight-lightest
text-color-highlight-lighter
text-color-highlight-light
text-color-highlight
text-color-highlight-dark
text-color-highlight-darker
text-color-highlight-darkest

#### HTML (html)

```html
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Basic</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="text-color-white rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-white</div>
        <div class="text-color-black rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-black</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Brand</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="text-color-primary rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-primary</div>
        <div class="text-color-secondary rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-secondary</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Status</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="text-color-info rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-info</div>
        <div class="text-color-success rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-success</div>
        <div class="text-color-warning rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-warning</div>
        <div class="text-color-danger rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-danger</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Driving status</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="text-color-status-available rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-status-available</div>
        <div class="text-color-status-driving rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-status-driving</div>
        <div class="text-color-status-resting rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-status-resting</div>
        <div class="text-color-status-working rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-status-working</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Map marker</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="text-color-map-marker-asset rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-map-marker-asset</div>
        <div class="text-color-map-marker-poi rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-map-marker-poi</div>
        <div class="text-color-map-marker-geofence rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-map-marker-geofence</div>
        <div class="text-color-map-marker-route rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-map-marker-route</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Rating</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="text-color-rating-1 rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-rating-1</div>
        <div class="text-color-rating-2 rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-rating-2</div>
        <div class="text-color-rating-3 rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-rating-3</div>
        <div class="text-color-rating-4 rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-rating-4</div>
        <div class="text-color-rating-5 rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-rating-5</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Gray</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="text-color-decent rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-decent</div>
        <div class="text-color-lightest rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-lightest</div>
        <div class="text-color-lighter rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-lighter</div>
        <div class="text-color-light rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-light</div>
        <div class="text-color-gray rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-gray</div>
        <div class="text-color-dark rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-dark</div>
        <div class="text-color-darker rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-darker</div>
        <div class="text-color-darkest rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-darkest</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Highlight</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="text-color-highlight-decent rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-highlight-decent</div>
        <div class="text-color-highlight-lightest rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-highlight-lightest</div>
        <div class="text-color-highlight-lighter rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-highlight-lighter</div>
        <div class="text-color-highlight-light rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-highlight-light</div>
        <div class="text-color-highlight rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-highlight</div>
        <div class="text-color-highlight-dark rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-highlight-dark</div>
        <div class="text-color-highlight-darker rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-highlight-darker</div>
        <div class="text-color-highlight-darkest rounded padding-5 text-center text-size-12 display-grid place-items-center border">text-color-highlight-darkest</div>
    </div>
</div>
```

#### Classes (css)

```css
text-color-white
```

## Hover text

### Example: Example 9

Basic
hover-text-color-white
hover-text-color-black

Brand
hover-text-color-primary
hover-text-color-secondary

Status
hover-text-color-info
hover-text-color-success
hover-text-color-warning
hover-text-color-danger

Driving status
hover-text-color-status-available
hover-text-color-status-driving
hover-text-color-status-resting
hover-text-color-status-working

Map marker
hover-text-color-map-marker-asset
hover-text-color-map-marker-poi
hover-text-color-map-marker-geofence
hover-text-color-map-marker-route

Rating
hover-text-color-rating-1
hover-text-color-rating-2
hover-text-color-rating-3
hover-text-color-rating-4
hover-text-color-rating-5

Gray
hover-text-color-decent
hover-text-color-lightest
hover-text-color-lighter
hover-text-color-light
hover-text-color-gray
hover-text-color-dark
hover-text-color-darker
hover-text-color-darkest

Highlight
hover-text-color-highlight-decent
hover-text-color-highlight-lightest
hover-text-color-highlight-lighter
hover-text-color-highlight-light
hover-text-color-highlight
hover-text-color-highlight-dark
hover-text-color-highlight-darker
hover-text-color-highlight-darkest

#### HTML (html)

```html
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Basic</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-text-color-white rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-white</div>
        <div class="hover-text-color-black rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-black</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Brand</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-text-color-primary rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-primary</div>
        <div class="hover-text-color-secondary rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-secondary</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Status</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-text-color-info rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-info</div>
        <div class="hover-text-color-success rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-success</div>
        <div class="hover-text-color-warning rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-warning</div>
        <div class="hover-text-color-danger rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-danger</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Driving status</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-text-color-status-available rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-status-available</div>
        <div class="hover-text-color-status-driving rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-status-driving</div>
        <div class="hover-text-color-status-resting rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-status-resting</div>
        <div class="hover-text-color-status-working rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-status-working</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Map marker</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-text-color-map-marker-asset rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-map-marker-asset</div>
        <div class="hover-text-color-map-marker-poi rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-map-marker-poi</div>
        <div class="hover-text-color-map-marker-geofence rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-map-marker-geofence</div>
        <div class="hover-text-color-map-marker-route rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-map-marker-route</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Rating</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-text-color-rating-1 rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-rating-1</div>
        <div class="hover-text-color-rating-2 rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-rating-2</div>
        <div class="hover-text-color-rating-3 rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-rating-3</div>
        <div class="hover-text-color-rating-4 rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-rating-4</div>
        <div class="hover-text-color-rating-5 rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-rating-5</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Gray</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-text-color-decent rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-decent</div>
        <div class="hover-text-color-lightest rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-lightest</div>
        <div class="hover-text-color-lighter rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-lighter</div>
        <div class="hover-text-color-light rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-light</div>
        <div class="hover-text-color-gray rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-gray</div>
        <div class="hover-text-color-dark rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-dark</div>
        <div class="hover-text-color-darker rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-darker</div>
        <div class="hover-text-color-darkest rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-darkest</div>
    </div>
</div>
<div class="display-flex align-items-center-sm margin-bottom-15pct margin-bottom-20-sm last-child-margin-bottom-0 line-height-125rel">
    <div class="text-medium text-size-14 width-100 margin-right-20">Highlight</div>
    <div class="width-100pct display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-8-md gap-10">
        <div class="hover-text-color-highlight-decent rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-highlight-decent</div>
        <div class="hover-text-color-highlight-lightest rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-highlight-lightest</div>
        <div class="hover-text-color-highlight-lighter rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-highlight-lighter</div>
        <div class="hover-text-color-highlight-light rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-highlight-light</div>
        <div class="hover-text-color-highlight rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-highlight</div>
        <div class="hover-text-color-highlight-dark rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-highlight-dark</div>
        <div class="hover-text-color-highlight-darker rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-highlight-darker</div>
        <div class="hover-text-color-highlight-darkest rounded padding-5 text-center text-size-12 display-grid place-items-center border">hover-text-color-highlight-darkest</div>
    </div>
</div>
```

#### Classes (css)

```css
hover-text-color-white
```

## SVGs

Styling

### Example: Example 10



#### HTML (html)

```html
<div class="display-flex flex-wrap gap-10">
    <svg class="fill-white" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
        </path>
    </svg>
    <svg class="fill-black" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
        </path>
    </svg>
    <svg class="fill-primary" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
        </path>
    </svg>
    <svg class="fill-secondary" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
        </path>
    </svg>
    <svg class="fill-info" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
        </path>
    </svg>
    <svg class="fill-success" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
        </path>
    </svg>
    <svg class="fill-warning" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
        </path>
    </svg>
    <svg class="fill-danger" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
        </path>
    </svg>
</div>
```

#### Classes (css)

```css
fill-white
```

## Background

### Example: Background size

Background size

Background position

Background repeat

#### HTML (html)

```html
<div>
    <div class="margin-bottom-20">
        <div class="description-headline">
            <h4 class="margin-top-0">Background size</h4>
        </div>
    </div>
    <div class="display-flex flex-wrap gap-10">
        <div class="width-100 aspect-ratio-1 bg-size-10pct bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-30pct bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-40pct bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-50pct bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-60pct bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-70pct bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-80pct bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-90pct bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-100pct bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
    </div>
    <div class="margin-bottom-20">
        <div class="description-headline">
            <h4 class="">Background position</h4>
        </div>
    </div>
    <div class="display-flex flex-wrap gap-10">
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-top-left bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-top bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-top-right bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-center-right bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-bottom-right bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-bottom bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-bottom-left bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-center-left bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
    </div>
    <div class="margin-bottom-20">
        <div class="description-headline">
            <h4 class="">Background repeat</h4>
        </div>
    </div>
    <div class="display-flex flex-wrap gap-10">
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-center bg-repeat-no bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-center bg-repeat-xy bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-center bg-repeat-x bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
        <div class="width-100 aspect-ratio-1 bg-size-20pct bg-position-center bg-repeat-y bg-light" style="background-image: url(&quot;https://cdn.rio.cloud/svg/common/ico_rio_colored.svg&quot;);">
        </div>
    </div>
</div>
```

#### Classes (css)

```css
bg-none
```

## Border

### Example: Example 12



#### HTML (html)

```html
<div class="display-flex flex-wrap gap-20 margin-bottom-20">
    <div class="border width-70 height-50 text-center rounded">
    </div>
</div>
<div class="display-flex flex-wrap gap-20 margin-bottom-20">
    <div class="border border-color-primary width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-secondary width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-info width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-success width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-warning width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-danger width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-dark width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-black width-70 height-50 text-center rounded">
    </div>
</div>
<div class="display-flex flex-wrap gap-20 margin-bottom-20">
    <div class="border border-color-primary border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-secondary border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-info border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-success border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-warning border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-danger border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-dark border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border border-color-black border-width-2 width-70 height-50 text-center rounded">
    </div>
</div>
<div class="display-flex flex-wrap gap-20 margin-bottom-20">
    <div class="
                        border border-color-primary border-width-1 border-style-dotted
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-secondary border-width-1 border-style-dotted
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-info border-width-1 border-style-dotted
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-success border-width-1 border-style-dotted
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-warning border-width-1 border-style-dotted
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-danger border-width-1 border-style-dotted
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-dark border-width-1 border-style-dotted
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-black border-width-1 border-style-dotted
                        width-70 height-50 text-center
                    ">
    </div>
</div>
<div class="display-flex flex-wrap gap-20 margin-bottom-20">
    <div class="
                        border border-color-primary border-width-1 border-style-dashed
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-secondary border-width-1 border-style-dashed
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-info border-width-1 border-style-dashed
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-success border-width-1 border-style-dashed
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-warning border-width-1 border-style-dashed
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-danger border-width-1 border-style-dashed
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-dark border-width-1 border-style-dashed
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-black border-width-1 border-style-dashed
                        width-70 height-50 text-center
                    ">
    </div>
</div>
<div class="display-flex flex-wrap gap-20 margin-bottom-20">
    <div class="
                        border border-color-primary border-top-none border-width-3
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-secondary border-bottom-none border-width-3
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-info border-left-none border-width-3
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-success border-right-none border-width-3
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-warning border-top-only border-width-3
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-danger border-bottom-only border-width-3
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-dark border-left-only border-width-3
                        width-70 height-50 text-center
                    ">
    </div>
    <div class="
                        border border-color-black border-right-only border-width-3
                        width-70 height-50 text-center
                    ">
    </div>
</div>
```

#### Classes (css)

```css
border
```

### Example: Example 13

Hover Border Color

Hover Border Color with Transition

Hover Border Style

#### HTML (html)

```html
<label>Hover Border Color</label>
<div class="display-flex flex-wrap gap-20 margin-bottom-20">
    <div class="border hover-border-color-primary width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-secondary width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-info width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-success width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-warning width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-danger width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-dark width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-black width-70 height-50 text-center rounded">
    </div>
</div>
<div class="display-flex flex-wrap gap-20 margin-bottom-20">
    <div class="border hover-border-color-decent border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-lightest border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-lighter border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-light border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-gray border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-dark border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-darker border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-darkest border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-highlight-decent border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-highlight-lightest border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-highlight-lighter border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-highlight-light border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-highlight border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-highlight-dark border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-highlight-darker border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-highlight-darkest border-width-2 width-70 height-50 text-center rounded">
    </div>
</div>
<label>Hover Border Color with Transition</label>
<div class="display-flex flex-wrap gap-20 margin-bottom-20">
    <div class="border hover-border-color-primary transition-all transition-ease-in-out transition-duration-02 border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-secondary transition-all transition-ease-in-out transition-duration-02 border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-info transition-all transition-ease-in-out transition-duration-02 border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-success transition-all transition-ease-in-out transition-duration-02 border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-warning transition-all transition-ease-in-out transition-duration-02 border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-danger transition-all transition-ease-in-out transition-duration-02 border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-dark transition-all transition-ease-in-out transition-duration-02 border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-color-black transition-all transition-ease-in-out transition-duration-02 border-width-2 width-70 height-50 text-center rounded">
    </div>
</div>
<label>Hover Border Style</label>
<div class="display-flex flex-wrap gap-20 margin-bottom-20">
    <div class="border border-style-dashed hover-border-style-solid border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-style-dashed border-width-2 width-70 height-50 text-center rounded">
    </div>
    <div class="border hover-border-style-dotted border-width-2 width-70 height-50 text-center rounded">
    </div>
</div>
```

#### Classes (css)

```css
border
```

### Example: Example 14

Last Child (Self Class)

Child
Child
Child
Child
Child

Last Child (Parent Class)

Child
Child
Child
Child
Child

First Child (Self Class)

Child
Child
Child
Child
Child

First Child (Parent Class)

Child
Child
Child
Child
Child

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-4-sm gap-20">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Last Child (Self Class)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div>
            <div class="border border-bottom-only last-child-border-bottom-none padding-2 text-center text-color-info">Child</div>
            <div class="border border-bottom-only last-child-border-bottom-none padding-2 text-center text-color-info">Child</div>
            <div class="border border-bottom-only last-child-border-bottom-none padding-2 text-center text-color-info">Child</div>
            <div class="border border-bottom-only last-child-border-bottom-none padding-2 text-center text-color-info">Child</div>
            <div class="border border-bottom-only last-child-border-bottom-none padding-2 text-center text-color-info">Child</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Last Child (Parent Class)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="children-last-border-bottom-none">
            <div class="border border-bottom-only padding-2 text-center text-color-info">Child</div>
            <div class="border border-bottom-only padding-2 text-center text-color-info">Child</div>
            <div class="border border-bottom-only padding-2 text-center text-color-info">Child</div>
            <div class="border border-bottom-only padding-2 text-center text-color-info">Child</div>
            <div class="border border-bottom-only padding-2 text-center text-color-info">Child</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>First Child (Self Class)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div>
            <div class="border border-top-only padding-2 text-center first-child-border-top-none text-color-info">Child</div>
            <div class="border border-top-only padding-2 text-center first-child-border-top-none text-color-info">Child</div>
            <div class="border border-top-only padding-2 text-center first-child-border-top-none text-color-info">Child</div>
            <div class="border border-top-only padding-2 text-center first-child-border-top-none text-color-info">Child</div>
            <div class="border border-top-only padding-2 text-center first-child-border-top-none text-color-info">Child</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>First Child (Parent Class)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="children-first-border-top-none">
            <div class="border border-top-only padding-2 text-center text-color-info">Child</div>
            <div class="border border-top-only padding-2 text-center text-color-info">Child</div>
            <div class="border border-top-only padding-2 text-center text-color-info">Child</div>
            <div class="border border-top-only padding-2 text-center text-color-info">Child</div>
            <div class="border border-top-only padding-2 text-center text-color-info">Child</div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
border
```

## Divider

You can use the the shorthanddivider-yfor the automatic combination ofdivider-y-1,divider-style-solidanddivider-color-light

### Example: divider-x-1divider-x-1divider-x-1

divider-y-1
divider-y-1
divider-y-1
divider-y-1

divider-y-2
divider-y-2
divider-y-2
divider-y-2

divider-y-3
divider-y-3
divider-y-3
divider-y-3

divider-x-1
divider-x-1
divider-x-1

divider-x-1
divider-x-1
divider-x-1

divider-x-2
divider-x-2
divider-x-2

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-10 text-center">
    <div class="flex-1-1 display-flex gap-10">
        <div class="flex-1-1 bg-white border rounded divider-y-1
                            divider-color-light divider-style-solid">
            <div class="padding-10">divider-y-1</div>
            <div class="padding-10">divider-y-1</div>
            <div class="padding-10">divider-y-1</div>
            <div class="padding-10">divider-y-1</div>
        </div>
        <div class="flex-1-1 bg-white border rounded divider-y-2
                            divider-color-light divider-style-solid">
            <div class="padding-10">divider-y-2</div>
            <div class="padding-10">divider-y-2</div>
            <div class="padding-10">divider-y-2</div>
            <div class="padding-10">divider-y-2</div>
        </div>
        <div class="flex-1-1 bg-white border rounded divider-y-3
                            divider-color-light divider-style-solid">
            <div class="padding-10">divider-y-3</div>
            <div class="padding-10">divider-y-3</div>
            <div class="padding-10">divider-y-3</div>
            <div class="padding-10">divider-y-3</div>
        </div>
    </div>
    <div class="flex-1-1 display-flex flex-column gap-10">
        <div class="display-flex bg-lightest border rounded divider-x-1 divider-color-light divider-style-dashed overflow-hidden user-select-none text-medium text-color-dark">
            <div class="flex-1-1 padding-10 hover-bg-primary hover-text-color-white">divider-x-1</div>
            <div class="flex-1-1 padding-10 hover-bg-primary hover-text-color-white">divider-x-1</div>
            <div class="flex-1-1 padding-10 hover-bg-primary hover-text-color-white">divider-x-1</div>
        </div>
        <div class="display-flex bg-info text-color-white rounded divider-x-1 divider-color-white divider-style-dashed">
            <div class="flex-1-1 padding-10">divider-x-1</div>
            <div class="flex-1-1 padding-10">divider-x-1</div>
            <div class="flex-1-1 padding-10">divider-x-1</div>
        </div>
        <div class="display-flex bg-info text-color-white rounded divider-x-2 divider-color-white divider-style-dotted">
            <div class="flex-1-1 padding-10">divider-x-2</div>
            <div class="flex-1-1 padding-10">divider-x-2</div>
            <div class="flex-1-1 padding-10">divider-x-2</div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
divider-x
```

## Opacity

### Example: Example 16

0
10
20
30
40
50
60
70
80
90
100

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-10">
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-0">0</div>
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-10">10</div>
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-20">20</div>
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-30">30</div>
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-40">40</div>
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-50">50</div>
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-60">60</div>
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-70">70</div>
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-80">80</div>
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-90">90</div>
    <div class="width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded opacity-100">100</div>
</div>
```

#### Classes (css)

```css
opacity-0
```

## Hover opacity

### Example: Example 17

0
10
20
30
40
50
60
70
80
90
100

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-10">
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-100
                    hover-opacity-0
                ">0</div>
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-100
                    hover-opacity-10
                ">10</div>
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-90
                    hover-opacity-20
                ">20</div>
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-80
                    hover-opacity-30
                ">30</div>
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-70
                    hover-opacity-40
                ">40</div>
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-60
                    hover-opacity-50
                ">50</div>
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-50
                    hover-opacity-60
                ">60</div>
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-40
                    hover-opacity-70
                ">70</div>
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-30
                    hover-opacity-80
                ">80</div>
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-20
                    hover-opacity-90
                ">90</div>
    <div class="
                    width-50 aspect-ratio-1 display-grid place-items-center bg-info rounded
                    opacity-10
                    hover-opacity-100
                ">100</div>
</div>
```

#### Classes (css)

```css
hover-opacity-0
```

## Rounded

### Example: Example 18

rounded
...-circle

...-top
...-bottom
...-left
...-right

...-top-left
...-top-right
...-bottom-right
...-bottom-left

#### HTML (html)

```html
<div>
    <div class="display-flex flex-wrap gap-20 margin-bottom-20">
        <div class="
            width-100 aspect-ratio-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded">rounded</div>
        <div class="
            width-100 aspect-ratio-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-circle">...-circle</div>
    </div>
    <div class="display-flex flex-wrap gap-20 margin-bottom-20">
        <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-top">...-top</div>
        <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-bottom">...-bottom</div>
        <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-left">...-left</div>
        <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-right">...-right</div>
    </div>
    <div class="display-flex flex-wrap gap-20">
        <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-top-left">...-top-left</div>
        <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-top-right">...-top-right</div>
        <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-bottom-right">...-bottom-right</div>
        <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-bottom-left">...-bottom-left</div>
    </div>
</div>
```

#### Classes (css)

```css
rounded-none
```

### Example: Example 19

...-small
...
...-large
...-extra-large

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-20">
    <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-small">...-small</div>
    <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded">...</div>
    <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-large">...-large</div>
    <div class="
            width-150 aspect-ratio-2-1 bg-highlight padding-5
            display-flex align-items-center justify-content-center rounded-extra-large">...-extra-large</div>
</div>
```

#### Classes (css)

```css
rounded-small
```

## Shadows

Shadow class for panels and blocks

The default shadow class is intended to be used on panels or blocks which should stand out from the light gray background and should be avoided to put everywhere. Use it to emphasize certain blocks or panels e.g. on a dashboard or items of a drag and drop list.

Do not use hard shadows on tables, in dialogs, or on elements placed on white background.

The exception for not using shadows on a white background is for floating elements placed above the content for instance via position absolute.

### Example: Example 20

shadow-default
Panel with shadow
shadow-default

#### HTML (html)

```html
<div class="display-grid grid-cols-2 gap-20 text-color-darker">
    <div class="
            height-100 panel panel-default panel-body margin-bottom-0
            shadow-default display-grid place-items-center
        ">shadow-default</div>
    <div class="height-100 panel panel-default margin-bottom-0 shadow-default">
        <div class="panel-heading">Panel with shadow</div>
        <div class="panel-body display-grid place-items-center">shadow-default</div>
    </div>
</div>
```

#### Classes (css)

```css
shadow-subtle
```

## Shadow variants

### Example: Surrounding shadows

Surrounding shadows

shadow-subtle
shadow-muted
shadow-accent
shadow-default
shadow-smooth
shadow-hard
shadow-focused

Direction shadows

shadow-muted-down
shadow-default-down

shadow-smooth-up
shadow-smooth-down
shadow-hard-up
shadow-hard-down

Accent shadow for list items

Note
When utilizing the shadow-accent avoid combining it with a border style, as the shadow is optimized for small block items like those in a list and works best without a border .

Item
Item
Item
Item
Item
Item

#### HTML (html)

```html
<div>
    <div class="margin-bottom-20">
        <div class="description-headline">
            <h4 class="margin-top-0">Surrounding shadows</h4>
        </div>
    </div>
    <div class="display-grid grid-cols-4 gap-20 text-color-darker">
        <div class="height-100 rounded bg-white shadow-subtle display-grid place-items-center">
            <span class="hidden-xs ">shadow-subtle</span>
        </div>
        <div class="height-100 rounded bg-white shadow-muted display-grid place-items-center">
            <span class="hidden-xs ">shadow-muted</span>
        </div>
        <div class="height-100 rounded bg-white shadow-accent display-grid place-items-center">
            <span class="hidden-xs ">shadow-accent</span>
        </div>
        <div class="height-100 rounded bg-white shadow-default display-grid place-items-center">
            <span class="hidden-xs text-medium">shadow-default</span>
        </div>
        <div class="height-100 rounded bg-white shadow-smooth display-grid place-items-center">
            <span class="hidden-xs ">shadow-smooth</span>
        </div>
        <div class="height-100 rounded bg-white shadow-hard display-grid place-items-center">
            <span class="hidden-xs ">shadow-hard</span>
        </div>
        <div class="height-100 rounded bg-white shadow-focused display-grid place-items-center">
            <span class="hidden-xs ">shadow-focused</span>
        </div>
    </div>
    <div class="margin-top-50">
        <div class="description-headline">
            <h4 class="">Direction shadows</h4>
        </div>
    </div>
    <div class="display-grid grid-cols-4 gap-20 text-color-darker">
        <div class="
                        height-100 rounded bg-white shadow-muted-down display-grid place-items-center
                    ">
            <span class="hidden-xs">shadow-muted-down</span>
        </div>
        <div class="
                        height-100 rounded bg-white shadow-default-down display-grid place-items-center
                    ">
            <span class="hidden-xs">shadow-default-down</span>
        </div>
    </div>
    <div class="display-grid grid-cols-4 gap-20 text-color-darker margin-top-50">
        <div class="
                        height-100 rounded bg-white shadow-smooth-up display-grid place-items-center
                    ">
            <span class="hidden-xs">shadow-smooth-up</span>
        </div>
        <div class="
                        height-100 rounded bg-white shadow-smooth-down display-grid place-items-center
                    ">
            <span class="hidden-xs">shadow-smooth-down</span>
        </div>
        <div class="
                        height-100 rounded bg-white shadow-hard-up display-grid place-items-center
                    ">
            <span class="hidden-xs">shadow-hard-up</span>
        </div>
        <div class="
                        height-100 rounded bg-white shadow-hard-down display-grid place-items-center
                    ">
            <span class="hidden-xs">shadow-hard-down</span>
        </div>
    </div>
    <div class="Divider position-relative width-100pct margin-top-20" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="margin-bottom-20">
        <div class="description-headline">
            <h4 class="">Accent shadow for list items</h4>
        </div>
        <div class="max-width-1000">
            <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0">
                <div>
                    <span class="label label-info label-condensed label-filled">Note</span>
                </div>
                <div class="width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1">When utilizing the <code class="code-inline">shadow-accent</code> avoid combining it with a border style, as the shadow is optimized for small block items like those in a list and <b>works best without a border</b>.</div>
            </div>
        </div>
    </div>
    <div class="display-grid grid-cols-2 column-gap-25 row-gap-5 max-width-600">
        <div class="
                        height-80 rounded bg-white shadow-accent display-grid place-items-center
                    ">
            <span>Item</span>
        </div>
        <div class="
                        height-80 rounded bg-white shadow-accent display-grid place-items-center
                    ">
            <span>Item</span>
        </div>
        <div class="
                        height-80 rounded bg-white shadow-accent display-grid place-items-center
                    ">
            <span>Item</span>
        </div>
        <div class="
                        height-80 rounded bg-white shadow-accent display-grid place-items-center
                    ">
            <span>Item</span>
        </div>
        <div class="
                        height-80 rounded bg-white shadow-accent display-grid place-items-center
                    ">
            <span>Item</span>
        </div>
        <div class="
                        height-80 rounded bg-white shadow-accent display-grid place-items-center
                    ">
            <span>Item</span>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
shadow-subtle
```

## Hover shadows

Use hover-shadow-* class to choose the hover elevation. Transition is included by default. For the tight focused preset use shadow-focused.

Icons

### Example: Example 22

hover-shadow-accent
hover-shadow-default
hover-shadow-hard-down
hover-shadow-focused

Custom hover settings
Customize hover animation with CSS vars: --shadow-hover-duration , --shadow-hover-easing , and --shadow-hover-delay
Defaults are var(--shadow-hover-duration, 140ms) var(--shadow-hover-easing, ease-out) var(--shadow-hover-delay, 0ms)
hover-shadow-focused (custom)
hover-shadow-focused (custom)

#### HTML (html)

```html
<div>
    <div class="display-grid grid-cols-3 gap-20 text-color-darker margin-bottom-25">
        <div class="shadow-none hover-shadow-accent display-grid place-items-center height-100 rounded bg-white ">
            <span class="hidden-xs">hover-shadow-accent</span>
        </div>
        <div class="shadow-none border hover-shadow-default display-grid place-items-center height-100 rounded bg-white ">
            <span class="hidden-xs">hover-shadow-default</span>
        </div>
        <div class="shadow-default hover-shadow-hard-down border display-grid place-items-center height-100 rounded bg-white ">
            <span class="hidden-xs">hover-shadow-hard-down</span>
        </div>
        <div class="shadow-default hover-shadow-focused display-grid place-items-center height-100 rounded bg-white ">
            <span class="hidden-xs">hover-shadow-focused</span>
        </div>
    </div>
    <h5>Custom hover settings</h5>
    <p>Customize hover animation with CSS vars:<code class="code-inline">--shadow-hover-duration</code>,<code class="code-inline">--shadow-hover-easing</code>, and<code class="code-inline">--shadow-hover-delay</code>
        <br>Defaults are <code class="code-inline">var(--shadow-hover-duration, 140ms) var(--shadow-hover-easing, ease-out) var(--shadow-hover-delay, 0ms)</code>
    </p>
    <div class="display-grid grid-cols-3 gap-20">
        <div class="shadow-default hover-shadow-focused display-grid place-items-center height-100 rounded bg-white max-width-500" style="--shadow-hover-duration: 50ms;">
            <span class="hidden-xs">hover-shadow-focused (custom)</span>
        </div>
        <div class="shadow-default hover-shadow-focused display-grid place-items-center height-100 rounded bg-white max-width-500" style="--shadow-hover-duration: 250ms; --shadow-hover-delay: 50ms;">
            <span class="hidden-xs">hover-shadow-focused (custom)</span>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
shadow-subtle
```

## RIOglyph

DownloadDownload all RIOglyph icons as SVG images here.

### Example: Example 23

Default

Sized icons

Colored icons

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Default</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10">
            <span class="rioglyph rioglyph-user text-size-h1">
            </span>
            <span class="rioglyph rioglyph-driver text-size-h1">
            </span>
            <span class="rioglyph rioglyph-businessman text-size-h1">
            </span>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Sized icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10">
            <span class="rioglyph rioglyph-user text-size-10">
            </span>
            <span class="rioglyph rioglyph-user text-size-11">
            </span>
            <span class="rioglyph rioglyph-user text-size-12">
            </span>
            <span class="rioglyph rioglyph-user text-size-14">
            </span>
            <span class="rioglyph rioglyph-user text-size-16">
            </span>
            <span class="rioglyph rioglyph-user text-size-18">
            </span>
            <span class="rioglyph rioglyph-user text-size-20">
            </span>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Colored icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10">
            <span class="rioglyph rioglyph-bus text-color-primary text-size-h1">
            </span>
            <span class="rioglyph rioglyph-bus text-color-secondary text-size-h1">
            </span>
            <span class="rioglyph rioglyph-car text-color-info text-size-h1">
            </span>
            <span class="rioglyph rioglyph-user text-color-success text-size-h1">
            </span>
            <span class="rioglyph rioglyph-trailer text-color-warning text-size-h1">
            </span>
            <span class="rioglyph rioglyph-user text-color-danger text-size-h1">
            </span>
        </div>
    </div>
</div>
```

## Vehicle icons

### Example: Example 24

Vehicle icons

Baseline vehicle icons

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Vehicle icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10 border border-bottom-only">
            <span class="rioglyph rioglyph-car text-size-h1">
            </span>
            <span class="rioglyph rioglyph-bus text-size-h1">
            </span>
            <span class="rioglyph rioglyph-van text-size-h1">
            </span>
            <span class="rioglyph rioglyph-truck text-size-h1">
            </span>
            <span class="rioglyph rioglyph-trailer text-size-h1">
            </span>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Baseline vehicle icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10 border border-bottom-only">
            <span class="rioglyph rioglyph-car-baseline text-size-h1">
            </span>
            <span class="rioglyph rioglyph-bus-baseline text-size-h1">
            </span>
            <span class="rioglyph rioglyph-van-baseline text-size-h1">
            </span>
            <span class="rioglyph rioglyph-truck-baseline text-size-h1">
            </span>
            <span class="rioglyph rioglyph-trailer-baseline text-size-h1">
            </span>
        </div>
    </div>
</div>
```

## Pair icons

### Example: Example 25

Default

With background

Display engine types

Sized

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Default</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10">
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-climate-control spinning">
                    </span>
                </span>
            </div>
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-stack">
                    </span>
                    <span class="rioglyph rioglyph-plus">
                    </span>
                </span>
            </div>
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-trailer">
                    </span>
                    <span class="rioglyph rioglyph-ok text-color-success">
                    </span>
                </span>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>With background</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10">
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-climate-control spinning bg-darkest text-color-white">
                    </span>
                </span>
            </div>
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-bus">
                    </span>
                    <span class="rioglyph rioglyph-heart bg-danger text-color-white">
                    </span>
                </span>
            </div>
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-trailer">
                    </span>
                    <span class="rioglyph rioglyph-ok bg-success text-color-white">
                    </span>
                </span>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Display engine types</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10">
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-liquid">
                    </span>
                </span>
            </div>
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-bus">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric">
                    </span>
                </span>
            </div>
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-van">
                    </span>
                    <span class="rioglyph rioglyph-fuel-hydrogen">
                    </span>
                </span>
            </div>
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-trailer">
                    </span>
                    <span class="rioglyph rioglyph-fuel-gas">
                    </span>
                </span>
            </div>
        </div>
        <div class="display-flex flex-wrap gap-10 margin-top-20">
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-liquid bg-darkest text-color-white">
                    </span>
                </span>
            </div>
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-bus">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric bg-darkest text-color-white">
                    </span>
                </span>
            </div>
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-van">
                    </span>
                    <span class="rioglyph rioglyph-fuel-hydrogen bg-darkest text-color-white">
                    </span>
                </span>
            </div>
            <div>
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-trailer">
                    </span>
                    <span class="rioglyph rioglyph-fuel-gas bg-darkest text-color-white">
                    </span>
                </span>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Sized</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10">
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-h2">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-h3">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-20">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-18">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-16">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-14">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric">
                    </span>
                </span>
            </div>
        </div>
        <div class="display-flex flex-wrap gap-10 margin-top-20">
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-h1">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric bg-darkest text-color-white">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-h2">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric bg-darkest text-color-white">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-h3">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric bg-darkest text-color-white">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-20">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric bg-darkest text-color-white">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-18">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric bg-darkest text-color-white">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-16">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric bg-darkest text-color-white">
                    </span>
                </span>
            </div>
            <div class="display-flex align-items-start">
                <span class="rioglyph-icon-pair text-size-14">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span class="rioglyph rioglyph-fuel-electric bg-darkest text-color-white">
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>
```

## Animated icons

### Example: Example 26

Spinning icons

Pulsing icons

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Spinning icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10 text-size-h2">
            <span class="rioglyph rioglyph-refresh spinning text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-climate-control spinning text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-cog spinning text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-spinner spinning text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-tire spinning text-size-150pct">
            </span>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Pulsing icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10 text-size-h2">
            <span class="rioglyph rioglyph-user pulsing text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-driver pulsing text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-businessman pulsing text-size-150pct">
            </span>
        </div>
    </div>
</div>
```

## Disabled icons

### Example: Example 27

Default

With red line

Inverse

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Default</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10 text-size-h2">
            <span class="rioglyph rioglyph-wifi rioglyph-disabled text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-lock rioglyph-disabled text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-globe rioglyph-disabled text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-api rioglyph-disabled text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-chat rioglyph-disabled text-size-150pct">
            </span>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>With red line</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10 text-size-h2">
            <span class="rioglyph rioglyph-wifi rioglyph-disabled rioglyph-disabled-danger text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-lock rioglyph-disabled rioglyph-disabled-danger text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-globe rioglyph-disabled rioglyph-disabled-danger text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-api rioglyph-disabled rioglyph-disabled-danger text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-chat rioglyph-disabled rioglyph-disabled-danger text-size-150pct">
            </span>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Inverse</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10 text-size-h2">
            <span class="rioglyph rioglyph-wifi rioglyph-disabled rioglyph-disabled-inverse text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-lock rioglyph-disabled rioglyph-disabled-inverse text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-key rioglyph-disabled rioglyph-disabled-inverse text-size-150pct">
            </span>
            <span class="rioglyph rioglyph-api rioglyph-disabled rioglyph-disabled-inverse text-size-150pct">
            </span>
            <span class="rioglyph rioglyph rioglyph-wrench rioglyph-disabled rioglyph-disabled-inverse text-size-150pct">
            </span>
        </div>
    </div>
</div>
```

## Filled icons

### Example: Example 28

Default filled icons

Colored filled icons

Good use cases examples for icons with a filled circle background

Headline enhancements: For emphasizing key points in headings or subheadings, like "New features" or "Highlights," where the icon in a filled circle draws attention without being too overwhelming.

Help/Documentation pages: Icons with filled circles are perfect for highlighting actions or key steps in a guide. They help break down text-heavy content and make instructions visually appealing. Example: For "step-by-step" instructions, an icon inside a circle could represent each action (e.g., a checkmark icon to signify completed tasks or a question mark for additional help).

Feature lists and cards: Use filled circle icons as design elements for feature lists, product highlights, or feature comparisons. This works especially well when listing distinct features of a product, app, or service.

When NOT to use a filled circle icon
Avoid inconsistent usage in buttons – If some buttons have a filled circle and others don’t, the UI becomes inconsistent.

Don’t use it for simple inline icons – Icons inside text (e.g., "🔍 Search") or standalone icons in tables don’t need a background.

Not for decorative or unnecessary elements – If an icon doesn’t need extra emphasis, the filled circle is overkill.

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Default filled icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10">
            <span class="rioglyph rioglyph-car rioglyph-filled text-size-h1">
            </span>
            <span class="rioglyph rioglyph-bus rioglyph-filled text-size-h1">
            </span>
            <span class="rioglyph rioglyph-van rioglyph-filled text-size-h1">
            </span>
            <span class="rioglyph rioglyph-truck rioglyph-filled text-size-h1">
            </span>
            <span class="rioglyph rioglyph-trailer rioglyph-filled text-size-h1">
            </span>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Colored filled icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-10">
            <span class="rioglyph rioglyph-car rioglyph-filled text-color-primary text-size-h1">
            </span>
            <span class="rioglyph rioglyph-truck rioglyph-filled text-color-secondary text-size-h1">
            </span>
            <span class="rioglyph rioglyph-businessman rioglyph-filled text-color-info text-size-h1">
            </span>
            <span class="rioglyph rioglyph-truck rioglyph-filled text-color-success text-size-h1">
            </span>
            <span class="rioglyph rioglyph-user rioglyph-filled text-color-warning text-size-h1">
            </span>
            <span class="rioglyph rioglyph-car rioglyph-filled text-color-danger text-size-h1">
            </span>
        </div>
    </div>
</div>
<div class="margin-top-50">
    <div class="margin-top--5">
        <div class="text-medium margin-bottom-5">Good use cases examples for icons with a filled circle background</div>
    </div>
    <ul class="list-style-none padding-0 margin-0 space-y-5">
        <li class="display-flex gap-5 margin-left-0">
            <span class="rioglyph rioglyph-ok rioglyph-filled text-color-success margin-top-3">
            </span>
            <div>
                <span class="text-medium">Headline enhancements:</span> For emphasizing key points in headings or subheadings, like "New features" or "Highlights," where the icon in a filled circle draws attention without being too overwhelming.
            </div>
        </li>
        <li class="display-flex gap-5 margin-left-0">
            <span class="rioglyph rioglyph-ok rioglyph-filled text-color-success margin-top-3">
            </span>
            <div>
                <span class="text-medium">Help/Documentation pages:</span> Icons with filled circles are perfect for highlighting actions or key steps in a guide. They help break down text-heavy content and make instructions visually appealing. Example: For "step-by-step" instructions, an icon inside a circle could represent each action (e.g., a checkmark icon to signify completed tasks or a question mark for additional help).
            </div>
        </li>
        <li class="display-flex gap-5 margin-left-0">
            <span class="rioglyph rioglyph-ok rioglyph-filled text-color-success margin-top-3">
            </span>
            <div>
                <span class="text-medium">Feature lists and cards:</span> Use filled circle icons as design elements for feature lists, product highlights, or feature comparisons. This works especially well when listing distinct features of a product, app, or service.
            </div>
        </li>
    </ul>
    <div class="margin-top-15">
        <div class="text-medium margin-bottom-5">When NOT to use a filled circle icon</div>
        <ul class="list-style-none padding-0 margin-0 space-y-5">
            <li class="display-flex gap-5 margin-left-0">
                <span class="rioglyph rioglyph-remove rioglyph-filled text-color-danger margin-top-3">
                </span>
                <div>
                    <b>Avoid inconsistent usage</b> in buttons – If some buttons have a filled circle and others don’t, the UI becomes inconsistent.
                </div>
            </li>
            <li class="display-flex gap-5 margin-left-0">
                <span class="rioglyph rioglyph-remove rioglyph-filled text-color-danger margin-top-3">
                </span>
                <div>Don’t use it for simple inline icons – Icons inside text (e.g., "🔍 Search") or standalone icons in tables don’t need a background.</div>
            </li>
            <li class="display-flex gap-5 margin-left-0">
                <span class="rioglyph rioglyph-remove rioglyph-filled text-color-danger margin-top-3">
                </span>
                <div>Not for decorative or unnecessary elements – If an icon doesn’t need extra emphasis, the filled circle is overkill.</div>
            </li>
        </ul>
    </div>
</div>
```

## Custom icons

### Example: Example 29

Use external svgs as RIOglyph icons. Please read our guidelines

#### HTML (html)

```html
<div>
    <p>Use external svgs as RIOglyph icons. Please read our <a href="#/start/guidelines/custom-rioglyph" data-discover="true">guidelines</a>
    </p>
    <div class="display-flex gap-10">
        <div class="flex-1-1">
            <div class="input-group width-100pct">
                <span class="input-group-addon">
                    <span class="rioglyph text-color-primary" aria-hidden="true" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);">
                    </span>
                </span>
                <div class="ClearableInput input-group">
                    <input placeholder="Enter icon URL" class="form-control withClearButton" type="text" tabindex="0" value="https://cdn.rio.cloud/images/uikit/react_logo.svg">
                    <span class="clearButton">
                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
```

## RIOglyph text alignment

### Example: Baseline-aligned icon with inline text

When an icon is used alongside text in a flex, grid, or inline text layout, additional alignment adjustments may be needed. To ensure proper alignment, the following classes are available:
rioglyph-align-top - assuming a display-flex and default line-height
rioglyph-align-bottom - assuming a display-flex and line-height 1.25
rioglyph-align-baseline - assuming an inline text and default line-height

These classes help align icons correctly within different layouts where they are used alongside text.
Note : Setting a text line-height class will also affect the icon alignment and may require manual adjustments to ensure proper positioning.
Baseline -aligned icon with inline text
Lorem ipsum dolor

Top -aligned icon with text inside a flex -box layout
Malesuada tincidunt. sem. In ante scelerisque adipiscing et enim

Bottom -aligned icon inside an inline-flex layout and line-height-125rel
Malesuada tincidunt. sem. In ante scelerisque adipiscing et enim

Icons inside a link usually don't need to be aligned manually
Lorem ipsum

Baseline -aligned icon inside an inline h3 header text
Primis ante volutpat Vivamus
Primis ante volutpat Vivamus

Baseline -aligned icon inside an inline h4 header text
Primis ante volutpat Vivamus
Primis ante volutpat Vivamus

#### HTML (html)

```html
<div>
    <p>When an icon is used alongside text in a flex, grid, or inline text layout, additional alignment adjustments may be needed. To ensure proper alignment, the following classes are available:</p>
    <ul class="space-y-5">
        <li>
            <code>rioglyph-align-top</code> - assuming a display-flex and default line-height
        </li>
        <li>
            <code>rioglyph-align-bottom</code> - assuming a display-flex and line-height 1.25
        </li>
        <li>
            <code>rioglyph-align-baseline</code> - assuming an inline text and default line-height
        </li>
    </ul>
    <div>These classes help align icons correctly within different layouts where they are used alongside text.</div>
    <div class="margin-top-10 padding-bottom-10">
        <b>Note</b>: Setting a text line-height class will also affect the icon alignment and may require manual adjustments to ensure proper positioning.
    </div>
    <div class="margin-top-25 display-grid grid-cols-1 grid-cols-2-sm gap-25">
        <div>
            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">
                <b>Baseline</b>-aligned icon with <b>inline text</b>
            </div>
            <div class="bg-lightest padding-15 rounded">
                <span class="rioglyph rioglyph-face-smile rioglyph-align-baseline">
                </span> Lorem ipsum dolor
            </div>
        </div>
        <div>
            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">
                <b>Top</b>-aligned icon with text inside a <b>flex</b>-box layout
            </div>
            <div class="bg-lightest padding-15 rounded display-flex align-items-start gap-5">
                <span class="rioglyph rioglyph-face-smile rioglyph-align-top">
                </span>
                <span>Malesuada tincidunt. sem. In ante scelerisque adipiscing et enim</span>
            </div>
        </div>
        <div>
            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">
                <b>Bottom</b>-aligned icon inside an <b>inline-flex</b> layout and <b>line-height-125rel</b>
            </div>
            <div class="bg-lightest padding-15 rounded display-inline-flex align-items-start gap-5 line-height-125rel width-100pct">
                <span class="rioglyph rioglyph-face-smile rioglyph-align-bottom">
                </span>
                <span>Malesuada tincidunt. sem. In ante scelerisque adipiscing et enim</span>
            </div>
        </div>
        <div>
            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Icons inside a link usually don't need to be aligned manually</div>
            <div class="bg-lightest padding-15 rounded width-auto">
                <a href="#">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span>Lorem ipsum</span>
                </a>
            </div>
        </div>
        <div>
            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">
                <b>Baseline</b>-aligned icon inside an inline h3 header text
            </div>
            <div class="bg-lightest padding-15 rounded width-auto text-color-darker">
                <h3 class="margin-0">
                    <span class="rioglyph rioglyph-truck rioglyph-align-baseline">
                    </span>
                    <span> Primis ante volutpat Vivamus</span>
                </h3>
                <div class="text-size-h3 text-bold margin-top-10">
                    <span class="rioglyph rioglyph-truck rioglyph-align-baseline">
                    </span>
                    <span> Primis ante volutpat Vivamus</span>
                </div>
            </div>
        </div>
        <div>
            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">
                <b>Baseline</b>-aligned icon inside an inline h4 header text
            </div>
            <div class="bg-lightest padding-15 rounded width-auto text-color-darker">
                <h4 class="margin-0">
                    <span class="rioglyph rioglyph-truck rioglyph-align-baseline">
                    </span>
                    <span> Primis ante volutpat Vivamus</span>
                </h4>
                <div class="text-size-h4 text-bold margin-top-10">
                    <span class="rioglyph rioglyph-truck rioglyph-align-baseline">
                    </span>
                    <span> Primis ante volutpat Vivamus</span>
                </div>
            </div>
        </div>
    </div>
</div>
```

## Icon library

Text

### Example: Example 31

Search

rioglyph rioglyph-academic-cap
rioglyph rioglyph-addressbook
rioglyph rioglyph-ai
rioglyph rioglyph-air-pay
rioglyph rioglyph-am
rioglyph rioglyph-angle-double-down
rioglyph rioglyph-angle-double-left
rioglyph rioglyph-angle-double-right
rioglyph rioglyph-angle-double-up
rioglyph rioglyph-antenna
rioglyph rioglyph-api
rioglyph rioglyph-archive
rioglyph rioglyph-area-chart
rioglyph rioglyph-area-in
rioglyph rioglyph-area-out
rioglyph rioglyph-arrow-down
rioglyph rioglyph-arrow-left
rioglyph rioglyph-arrow-right
rioglyph rioglyph-arrow-up
rioglyph rioglyph-arrows-collapse
rioglyph rioglyph-arrows-combine
rioglyph rioglyph-arrows-expand
rioglyph rioglyph-arrows-horizontal
rioglyph rioglyph-arrows-split
rioglyph rioglyph-assigned
rioglyph rioglyph-axis-x
rioglyph rioglyph-axis-y
rioglyph rioglyph-axis-z
rioglyph rioglyph-axle
rioglyph rioglyph-ban-circle
rioglyph rioglyph-bar-chart-box
rioglyph rioglyph-battery-charging
rioglyph rioglyph-battery-level-empty
rioglyph rioglyph-battery-level-full
rioglyph rioglyph-battery-level-low
rioglyph rioglyph-beacon
rioglyph rioglyph-big-bag
rioglyph rioglyph-book
rioglyph rioglyph-bookable-poi
rioglyph rioglyph-bookmark-square
rioglyph rioglyph-bookmark
rioglyph rioglyph-border-crossing
rioglyph rioglyph-box-open
rioglyph rioglyph-box
rioglyph rioglyph-brain
rioglyph rioglyph-brake
rioglyph rioglyph-branch-horizontal
rioglyph rioglyph-branch-remove
rioglyph rioglyph-branch-vertical
rioglyph rioglyph-broadcast
rioglyph rioglyph-building
rioglyph rioglyph-bulb
rioglyph rioglyph-bulk-container
rioglyph rioglyph-bus-baseline
rioglyph rioglyph-bus-breakdown
rioglyph rioglyph-bus
rioglyph rioglyph-businessman
rioglyph rioglyph-calendar-parking
rioglyph rioglyph-calendar-plus
rioglyph rioglyph-calendar-today
rioglyph rioglyph-calendar
rioglyph rioglyph-camera
rioglyph rioglyph-car-baseline
rioglyph rioglyph-car-wash
rioglyph rioglyph-car
rioglyph rioglyph-card-hotel
rioglyph rioglyph-card-reader
rioglyph rioglyph-cards-add
rioglyph rioglyph-cards-grid
rioglyph rioglyph-cards-list
rioglyph rioglyph-cards-table
rioglyph rioglyph-cargo
rioglyph rioglyph-carrier
rioglyph rioglyph-chat
rioglyph rioglyph-check-badge
rioglyph rioglyph-check-shield
rioglyph rioglyph-checkbox-checked
rioglyph rioglyph-checkbox
rioglyph rioglyph-checkboxes
rioglyph rioglyph-chevron-down
rioglyph rioglyph-chevron-left
rioglyph rioglyph-chevron-right
rioglyph rioglyph-chevron-up
rioglyph rioglyph-chip
rioglyph rioglyph-circle-dashed
rioglyph rioglyph-circle-stack
rioglyph rioglyph-click
rioglyph rioglyph-climate-control
rioglyph rioglyph-clipboard
rioglyph rioglyph-cloud-download
rioglyph rioglyph-cloud-not-saved
rioglyph rioglyph-cloud-progress
rioglyph rioglyph-cloud-upload
rioglyph rioglyph-cloud
rioglyph rioglyph-coasting
rioglyph rioglyph-code-braces
rioglyph rioglyph-code-brackets
rioglyph rioglyph-coffee
rioglyph rioglyph-cog
rioglyph rioglyph-coil
rioglyph rioglyph-color-swatch
rioglyph rioglyph-comment
rioglyph rioglyph-compare
rioglyph rioglyph-compass
rioglyph rioglyph-component-custom-recurrent
rioglyph rioglyph-component-custom
rioglyph rioglyph-construction
rioglyph rioglyph-convert
rioglyph rioglyph-conveyor-belt
rioglyph rioglyph-cookie
rioglyph rioglyph-cooling
rioglyph rioglyph-cost-efficiency
rioglyph rioglyph-crown
rioglyph rioglyph-cruise-control
rioglyph rioglyph-csv
rioglyph rioglyph-cube-dashed
rioglyph rioglyph-cube
rioglyph rioglyph-currency-euro
rioglyph rioglyph-damages
rioglyph rioglyph-dangerousgoods
rioglyph rioglyph-dashboard-view
rioglyph rioglyph-dashboard
rioglyph rioglyph-delivery-completed
rioglyph rioglyph-delivery-error
rioglyph rioglyph-delivery-late
rioglyph rioglyph-delivery-on-track
rioglyph rioglyph-delivery-warning
rioglyph rioglyph-delivery
rioglyph rioglyph-design
rioglyph rioglyph-desktop
rioglyph rioglyph-detail-view-info
rioglyph rioglyph-detail-view
rioglyph rioglyph-direction
rioglyph rioglyph-discount-badge
rioglyph rioglyph-document-out
rioglyph rioglyph-document
rioglyph rioglyph-download
rioglyph rioglyph-drag-n-drop
rioglyph rioglyph-drive-history
rioglyph rioglyph-driver-card
rioglyph rioglyph-driver
rioglyph rioglyph-drivercard-in
rioglyph rioglyph-drivercard-out
rioglyph rioglyph-duplicate
rioglyph rioglyph-earphone
rioglyph rioglyph-emergency-stop
rioglyph rioglyph-empty
rioglyph rioglyph-engine
rioglyph rioglyph-envelope-indicator
rioglyph rioglyph-envelope-open
rioglyph rioglyph-envelope
rioglyph rioglyph-erase
rioglyph rioglyph-error-sign
rioglyph rioglyph-euro-note
rioglyph rioglyph-exclamation-sign
rioglyph rioglyph-exclamation
rioglyph rioglyph-eye-close
rioglyph rioglyph-eye-closed
rioglyph rioglyph-eye-open
rioglyph rioglyph-face-frown
rioglyph rioglyph-face-neutral
rioglyph rioglyph-face-smile
rioglyph rioglyph-facetime-video
rioglyph rioglyph-factory
rioglyph rioglyph-file-signature
rioglyph rioglyph-files
rioglyph rioglyph-fill
rioglyph rioglyph-filling-e-station
rioglyph rioglyph-filling-station
rioglyph rioglyph-filter-active
rioglyph rioglyph-filter-reset
rioglyph rioglyph-filter
rioglyph rioglyph-fingerprint
rioglyph rioglyph-finish
rioglyph rioglyph-fire
rioglyph rioglyph-flag
rioglyph rioglyph-flash
rioglyph rioglyph-folder-closed
rioglyph rioglyph-folder-open
rioglyph rioglyph-fuel-electric
rioglyph rioglyph-fuel-gas
rioglyph rioglyph-fuel-hydrogen
rioglyph rioglyph-fuel-liquid
rioglyph rioglyph-fuel-mix
rioglyph rioglyph-fullscreen
rioglyph rioglyph-geofence
rioglyph rioglyph-get
rioglyph rioglyph-give
rioglyph rioglyph-globe-alt
rioglyph rioglyph-globe
rioglyph rioglyph-group-blocks
rioglyph rioglyph-group
rioglyph rioglyph-hand-down
rioglyph rioglyph-hand-left
rioglyph rioglyph-hand-right
rioglyph rioglyph-hand-up
rioglyph rioglyph-handshake
rioglyph rioglyph-hash
rioglyph rioglyph-heart
rioglyph rioglyph-heating
rioglyph rioglyph-hierarchy
rioglyph rioglyph-history
rioglyph rioglyph-home-sign
rioglyph rioglyph-home
rioglyph rioglyph-hour-glass
rioglyph rioglyph-id
rioglyph rioglyph-inbox-in
rioglyph rioglyph-inbox-out
rioglyph rioglyph-inbox-stack
rioglyph rioglyph-inbox
rioglyph rioglyph-info-sign
rioglyph rioglyph-info
rioglyph rioglyph-insert
rioglyph rioglyph-issue-tracking
rioglyph rioglyph-key
rioglyph rioglyph-kickdown
rioglyph rioglyph-language
rioglyph rioglyph-layer-pois
rioglyph rioglyph-layer
rioglyph rioglyph-leafs
rioglyph rioglyph-light-bulb
rioglyph rioglyph-line-chart
rioglyph rioglyph-link
rioglyph rioglyph-load-unload
rioglyph rioglyph-load
rioglyph rioglyph-location-arrow
rioglyph rioglyph-lock-open
rioglyph rioglyph-lock
rioglyph rioglyph-log-in
rioglyph rioglyph-logout
rioglyph rioglyph-looking-glass-man
rioglyph rioglyph-looking-glass
rioglyph rioglyph-magic-wand
rioglyph rioglyph-maintenance-components
rioglyph rioglyph-map-location
rioglyph rioglyph-map-marker
rioglyph rioglyph-map
rioglyph rioglyph-megaphone
rioglyph rioglyph-menu-hamburger
rioglyph rioglyph-merge
rioglyph rioglyph-mesh-box
rioglyph rioglyph-migrate
rioglyph rioglyph-milage
rioglyph rioglyph-minus-light
rioglyph rioglyph-minus-sign
rioglyph rioglyph-minus
rioglyph rioglyph-missing
rioglyph rioglyph-mode-dark-light
rioglyph rioglyph-more
rioglyph rioglyph-new-window
rioglyph rioglyph-newspaper
rioglyph rioglyph-note
rioglyph rioglyph-notification
rioglyph rioglyph-number-1
rioglyph rioglyph-number-2
rioglyph rioglyph-number-3
rioglyph rioglyph-off
rioglyph rioglyph-oil-can
rioglyph rioglyph-ok-circle
rioglyph rioglyph-ok-dashed
rioglyph rioglyph-ok-sign
rioglyph rioglyph-ok
rioglyph rioglyph-onboarding
rioglyph rioglyph-ongoing
rioglyph rioglyph-option-horizontal
rioglyph rioglyph-option-vertical
rioglyph rioglyph-order
rioglyph rioglyph-palette-broken
rioglyph rioglyph-palette-empty
rioglyph rioglyph-palette
rioglyph rioglyph-paper-clip
rioglyph rioglyph-parcel-broken
rioglyph rioglyph-parcel
rioglyph rioglyph-parking
rioglyph rioglyph-pause-circle
rioglyph rioglyph-pause
rioglyph rioglyph-pdf-file
rioglyph rioglyph-pencil-square
rioglyph rioglyph-pencil
rioglyph rioglyph-phone
rioglyph rioglyph-pictures
rioglyph rioglyph-pin-range
rioglyph rioglyph-pin
rioglyph rioglyph-play-circle
rioglyph rioglyph-play
rioglyph rioglyph-plugged-off
rioglyph rioglyph-plugged-on
rioglyph rioglyph-plus-light
rioglyph rioglyph-plus-sign
rioglyph rioglyph-plus
rioglyph rioglyph-pm
rioglyph rioglyph-poi
rioglyph rioglyph-polygon
rioglyph rioglyph-position
rioglyph rioglyph-print
rioglyph rioglyph-progress-ongoing
rioglyph rioglyph-progress-remaining
rioglyph rioglyph-progression
rioglyph rioglyph-prompt
rioglyph rioglyph-pto-off
rioglyph rioglyph-pto-on
rioglyph rioglyph-pushpin
rioglyph rioglyph-puzzle
rioglyph rioglyph-pylon
rioglyph rioglyph-qr-code
rioglyph rioglyph-question-sign
rioglyph rioglyph-question
rioglyph rioglyph-record
rioglyph rioglyph-recycle
rioglyph rioglyph-refresh
rioglyph rioglyph-remove-circle
rioglyph rioglyph-remove-sign
rioglyph rioglyph-remove
rioglyph rioglyph-repeat-square
rioglyph rioglyph-repeat
rioglyph rioglyph-resize-full
rioglyph rioglyph-resize-horizontal
rioglyph rioglyph-resize-small
rioglyph rioglyph-resize-vertical
rioglyph rioglyph-retrofit
rioglyph rioglyph-revert
rioglyph rioglyph-rio-marker
rioglyph rioglyph-rio
rioglyph rioglyph-road-restrictions
rioglyph rioglyph-road
rioglyph rioglyph-robot
rioglyph rioglyph-rocket
rioglyph rioglyph-role-management
rioglyph rioglyph-roll-container
rioglyph rioglyph-route-option
rioglyph rioglyph-route-view
rioglyph rioglyph-route
rioglyph rioglyph-ruler
rioglyph rioglyph-satellite-radar
rioglyph rioglyph-save
rioglyph rioglyph-scale
rioglyph rioglyph-scan
rioglyph rioglyph-scissors
rioglyph rioglyph-search-list
rioglyph rioglyph-search-truck
rioglyph rioglyph-search
rioglyph rioglyph-send
rioglyph rioglyph-series
rioglyph rioglyph-server-stack
rioglyph rioglyph-settings
rioglyph rioglyph-share-alt
rioglyph rioglyph-share-nodes
rioglyph rioglyph-share
rioglyph rioglyph-shelve-empty
rioglyph rioglyph-shelve
rioglyph rioglyph-ship
rioglyph rioglyph-shopping-bag
rioglyph rioglyph-shopping-cart
rioglyph rioglyph-signature
rioglyph rioglyph-slope-down-max
rioglyph rioglyph-slope-down-min
rioglyph rioglyph-slope-up-max
rioglyph rioglyph-slope-up-min
rioglyph rioglyph-sort-by-attributes-alt
rioglyph rioglyph-sort-by-attributes
rioglyph rioglyph-sort
rioglyph rioglyph-sparkles
rioglyph rioglyph-speed
rioglyph rioglyph-sphere
rioglyph rioglyph-spinner
rioglyph rioglyph-split-view
rioglyph rioglyph-square-dashed
rioglyph rioglyph-stack-add
rioglyph rioglyph-stack-iso
rioglyph rioglyph-stack
rioglyph rioglyph-star-empty
rioglyph rioglyph-star
rioglyph rioglyph-stars
rioglyph rioglyph-start
rioglyph rioglyph-stats-high
rioglyph rioglyph-stats-line-dots
rioglyph rioglyph-stats-low
rioglyph rioglyph-stats-medium
rioglyph rioglyph-stats
rioglyph rioglyph-status-available
rioglyph rioglyph-status-change-horizontal
rioglyph rioglyph-status-change
rioglyph rioglyph-status-driving
rioglyph rioglyph-status-resting
rioglyph rioglyph-status-working
rioglyph rioglyph-steering-wheel
rioglyph rioglyph-stillage
rioglyph rioglyph-stopover
rioglyph rioglyph-support
rioglyph rioglyph-table-view
rioglyph rioglyph-tachograph-download
rioglyph rioglyph-tachograph
rioglyph rioglyph-tag
rioglyph rioglyph-tasks
rioglyph rioglyph-temperature
rioglyph rioglyph-th-list
rioglyph rioglyph-thumbs-down
rioglyph rioglyph-thumbs-up
rioglyph rioglyph-tickets
rioglyph rioglyph-time-alt
rioglyph rioglyph-time-cancle
rioglyph rioglyph-time-incomplete
rioglyph rioglyph-time
rioglyph rioglyph-tire
rioglyph rioglyph-tms
rioglyph rioglyph-to-bottom
rioglyph rioglyph-to-left
rioglyph rioglyph-to-right
rioglyph rioglyph-to-top
rioglyph rioglyph-tracking-package
rioglyph rioglyph-traffic-lights
rioglyph rioglyph-trailer-baseline
rioglyph rioglyph-trailer-liquid
rioglyph rioglyph-trailer-standard
rioglyph rioglyph-trailer-tipping
rioglyph rioglyph-trailer
rioglyph rioglyph-trailerposition
rioglyph rioglyph-train
rioglyph rioglyph-transfer
rioglyph rioglyph-transition-push-right
rioglyph rioglyph-transition-right
rioglyph rioglyph-trash
rioglyph rioglyph-triangle-bottom
rioglyph rioglyph-triangle-left
rioglyph rioglyph-triangle-right
rioglyph rioglyph-triangle-top
rioglyph rioglyph-trophy
rioglyph rioglyph-truck-baseline
rioglyph rioglyph-truck-breakdown
rioglyph rioglyph-truck-unit
rioglyph rioglyph-truck
rioglyph rioglyph-unassigned
rioglyph rioglyph-unavailable
rioglyph rioglyph-unlink
rioglyph rioglyph-upload
rioglyph rioglyph-user-add
rioglyph rioglyph-user-group
rioglyph rioglyph-user-ok
rioglyph rioglyph-user-remove
rioglyph rioglyph-user-sign-off
rioglyph rioglyph-user-sign
rioglyph rioglyph-user
rioglyph rioglyph-van-baseline
rioglyph rioglyph-van
rioglyph rioglyph-variable
rioglyph rioglyph-video
rioglyph rioglyph-volume
rioglyph rioglyph-wallet
rioglyph rioglyph-warehouse
rioglyph rioglyph-warning-sign
rioglyph rioglyph-weather-cloudy
rioglyph rioglyph-weather-icy
rioglyph rioglyph-weather-overcast
rioglyph rioglyph-weather-raining
rioglyph rioglyph-weather-snowing
rioglyph rioglyph-weather-stormy
rioglyph rioglyph-weather-sunny
rioglyph rioglyph-weather-thundering
rioglyph rioglyph-weather-windy
rioglyph rioglyph-weight
rioglyph rioglyph-width
rioglyph rioglyph-wifi
rioglyph rioglyph-window
rioglyph rioglyph-workflow-step
rioglyph rioglyph-workflow
rioglyph rioglyph-workshop
rioglyph rioglyph-wrench
rioglyph rioglyph-xmas-raindeer
rioglyph rioglyph-xmas-santa

#### HTML (html)

```html
<div class="display-flex gap-20 margin-bottom-15">
    <div class="max-width-300 flex-1-1">
        <label for="iconNameFilter" class="display-inline-block">
            <span>Search</span>
        </label>
        <div class="input-group width-100pct">
            <span class="input-group-addon">
                <span class="rioglyph rioglyph-search" aria-hidden="true">
                </span>
            </span>
            <div class="ClearableInput input-group">
                <input id="iconNameFilter" placeholder="Filter by icon name" class="form-control" type="text" tabindex="0" value="">
                <span class="clearButton hide">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>
<div class="display-flex flex-wrap column-gap-10">
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-academic-cap   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-academic-cap </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-addressbook   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-addressbook </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-ai   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-ai </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-air-pay   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-air-pay </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-am   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-am </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-angle-double-down   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-angle-double-down </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-angle-double-left   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-angle-double-left </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-angle-double-right   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-angle-double-right </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-angle-double-up   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-angle-double-up </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-antenna   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-antenna </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-api   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-api </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-archive   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-archive </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-area-chart   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-area-chart </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-area-in   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-area-in </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-area-out   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-area-out </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-arrow-down   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-arrow-down </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-arrow-left   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-arrow-left </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-arrow-right   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-arrow-right </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-arrow-up   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-arrow-up </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-arrows-collapse   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-arrows-collapse </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-arrows-combine   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-arrows-combine </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-arrows-expand   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-arrows-expand </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-arrows-horizontal   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-arrows-horizontal </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-arrows-split   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-arrows-split </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-assigned   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-assigned </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-axis-x   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-axis-x </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-axis-y   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-axis-y </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-axis-z   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-axis-z </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-axle   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-axle </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-ban-circle   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-ban-circle </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-bar-chart-box   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-bar-chart-box </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-battery-charging   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-battery-charging </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-battery-level-empty   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-battery-level-empty </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-battery-level-full   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-battery-level-full </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-battery-level-low   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-battery-level-low </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-beacon   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-beacon </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-big-bag   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-big-bag </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-book   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-book </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-bookable-poi   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-bookable-poi </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-bookmark-square   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-bookmark-square </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-bookmark   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-bookmark </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-border-crossing   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-border-crossing </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-box-open   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-box-open </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-box   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-box </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-brain   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-brain </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-brake   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-brake </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-branch-horizontal   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-branch-horizontal </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-branch-remove   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-branch-remove </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-branch-vertical   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-branch-vertical </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-broadcast   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-broadcast </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-building   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-building </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-bulb   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-bulb </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-bulk-container   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-bulk-container </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-bus-baseline   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-bus-baseline </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-bus-breakdown   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-bus-breakdown </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-bus   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-bus </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-businessman   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-businessman </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-calendar-parking   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-calendar-parking </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-calendar-plus   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-calendar-plus </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-calendar-today   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-calendar-today </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-calendar   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-calendar </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-camera   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-camera </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-car-baseline   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-car-baseline </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-car-wash   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-car-wash </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-car   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-car </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-card-hotel   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-card-hotel </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-card-reader   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-card-reader </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cards-add   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cards-add </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cards-grid   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cards-grid </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cards-list   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cards-list </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cards-table   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cards-table </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cargo   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cargo </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-carrier   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-carrier </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-chat   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-chat </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-check-badge   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-check-badge </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-check-shield   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-check-shield </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-checkbox-checked   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-checkbox-checked </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-checkbox   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-checkbox </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-checkboxes   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-checkboxes </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-chevron-down   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-chevron-down </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-chevron-left   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-chevron-left </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-chevron-right   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-chevron-right </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-chevron-up   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-chevron-up </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-chip   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-chip </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-circle-dashed   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-circle-dashed </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-circle-stack   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-circle-stack </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-click   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-click </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-climate-control   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-climate-control </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-clipboard   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-clipboard </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cloud-download   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cloud-download </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cloud-not-saved   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cloud-not-saved </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cloud-progress   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cloud-progress </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cloud-upload   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cloud-upload </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cloud   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cloud </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-coasting   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-coasting </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-code-braces   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-code-braces </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-code-brackets   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-code-brackets </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-coffee   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-coffee </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cog   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cog </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-coil   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-coil </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-color-swatch   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-color-swatch </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-comment   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-comment </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-compare   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-compare </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-compass   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-compass </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-component-custom-recurrent   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-component-custom-recurrent </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-component-custom   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-component-custom </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-construction   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-construction </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-convert   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-convert </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-conveyor-belt   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-conveyor-belt </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cookie   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cookie </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cooling   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cooling </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cost-efficiency   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cost-efficiency </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-crown   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-crown </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cruise-control   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cruise-control </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-csv   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-csv </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cube-dashed   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cube-dashed </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-cube   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-cube </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-currency-euro   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-currency-euro </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-damages   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-damages </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-dangerousgoods   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-dangerousgoods </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-dashboard-view   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-dashboard-view </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-dashboard   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-dashboard </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-delivery-completed   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-delivery-completed </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-delivery-error   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-delivery-error </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-delivery-late   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-delivery-late </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-delivery-on-track   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-delivery-on-track </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-delivery-warning   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-delivery-warning </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-delivery   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-delivery </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-design   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-design </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-desktop   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-desktop </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-detail-view-info   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-detail-view-info </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-detail-view   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-detail-view </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-direction   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-direction </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-discount-badge   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-discount-badge </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-document-out   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-document-out </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-document   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-document </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-download   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-download </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-drag-n-drop   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-drag-n-drop </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-drive-history   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-drive-history </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-driver-card   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-driver-card </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-driver   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-driver </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-drivercard-in   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-drivercard-in </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-drivercard-out   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-drivercard-out </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-duplicate   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-duplicate </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-earphone   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-earphone </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-emergency-stop   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-emergency-stop </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-empty   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-empty </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-engine   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-engine </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-envelope-indicator   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-envelope-indicator </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-envelope-open   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-envelope-open </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-envelope   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-envelope </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-erase   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-erase </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-error-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-error-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-euro-note   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-euro-note </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-exclamation-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-exclamation-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-exclamation   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-exclamation </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-eye-close   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-eye-close </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-eye-closed   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-eye-closed </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-eye-open   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-eye-open </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-face-frown   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-face-frown </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-face-neutral   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-face-neutral </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-face-smile   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-face-smile </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-facetime-video   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-facetime-video </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-factory   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-factory </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-file-signature   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-file-signature </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-files   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-files </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-fill   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-fill </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-filling-e-station   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-filling-e-station </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-filling-station   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-filling-station </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-filter-active   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-filter-active </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-filter-reset   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-filter-reset </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-filter   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-filter </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-fingerprint   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-fingerprint </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-finish   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-finish </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-fire   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-fire </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-flag   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-flag </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-flash   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-flash </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-folder-closed   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-folder-closed </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-folder-open   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-folder-open </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-fuel-electric   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-fuel-electric </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-fuel-gas   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-fuel-gas </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-fuel-hydrogen   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-fuel-hydrogen </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-fuel-liquid   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-fuel-liquid </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-fuel-mix   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-fuel-mix </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-fullscreen   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-fullscreen </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-geofence   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-geofence </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-get   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-get </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-give   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-give </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-globe-alt   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-globe-alt </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-globe   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-globe </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-group-blocks   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-group-blocks </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-group   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-group </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-hand-down   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-hand-down </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-hand-left   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-hand-left </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-hand-right   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-hand-right </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-hand-up   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-hand-up </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-handshake   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-handshake </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-hash   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-hash </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-heart   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-heart </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-heating   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-heating </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-hierarchy   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-hierarchy </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-history   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-history </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-home-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-home-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-home   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-home </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-hour-glass   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-hour-glass </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-id   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-id </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-inbox-in   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-inbox-in </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-inbox-out   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-inbox-out </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-inbox-stack   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-inbox-stack </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-inbox   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-inbox </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-info-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-info-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-info   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-info </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-insert   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-insert </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-issue-tracking   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-issue-tracking </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-key   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-key </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-kickdown   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-kickdown </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-language   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-language </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-layer-pois   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-layer-pois </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-layer   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-layer </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-leafs   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-leafs </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-light-bulb   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-light-bulb </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-line-chart   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-line-chart </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-link   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-link </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-load-unload   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-load-unload </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-load   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-load </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-location-arrow   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-location-arrow </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-lock-open   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-lock-open </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-lock   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-lock </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-log-in   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-log-in </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-logout   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-logout </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-looking-glass-man   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-looking-glass-man </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-looking-glass   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-looking-glass </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-magic-wand   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-magic-wand </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-maintenance-components   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-maintenance-components </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-map-location   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-map-location </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-map-marker   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-map-marker </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-map   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-map </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-megaphone   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-megaphone </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-menu-hamburger   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-menu-hamburger </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-merge   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-merge </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-mesh-box   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-mesh-box </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-migrate   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-migrate </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-milage   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-milage </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-minus-light   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-minus-light </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-minus-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-minus-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-minus   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-minus </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-missing   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-missing </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-mode-dark-light   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-mode-dark-light </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-more   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-more </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-new-window   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-new-window </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-newspaper   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-newspaper </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-note   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-note </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-notification   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-notification </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-number-1   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-number-1 </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-number-2   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-number-2 </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-number-3   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-number-3 </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-off   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-off </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-oil-can   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-oil-can </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-ok-circle   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-ok-circle </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-ok-dashed   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-ok-dashed </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-ok-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-ok-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-ok   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-ok </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-onboarding   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-onboarding </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-ongoing   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-ongoing </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-option-horizontal   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-option-horizontal </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-option-vertical   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-option-vertical </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-order   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-order </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-palette-broken   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-palette-broken </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-palette-empty   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-palette-empty </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-palette   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-palette </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-paper-clip   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-paper-clip </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-parcel-broken   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-parcel-broken </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-parcel   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-parcel </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-parking   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-parking </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pause-circle   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pause-circle </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pause   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pause </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pdf-file   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pdf-file </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pencil-square   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pencil-square </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pencil   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pencil </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-phone   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-phone </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pictures   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pictures </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pin-range   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pin-range </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pin   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pin </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-play-circle   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-play-circle </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-play   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-play </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-plugged-off   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-plugged-off </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-plugged-on   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-plugged-on </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-plus-light   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-plus-light </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-plus-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-plus-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-plus   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-plus </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pm   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pm </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-poi   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-poi </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-polygon   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-polygon </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-position   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-position </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-print   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-print </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-progress-ongoing   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-progress-ongoing </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-progress-remaining   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-progress-remaining </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-progression   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-progression </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-prompt   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-prompt </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pto-off   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pto-off </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pto-on   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pto-on </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pushpin   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pushpin </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-puzzle   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-puzzle </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-pylon   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-pylon </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-qr-code   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-qr-code </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-question-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-question-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-question   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-question </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-record   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-record </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-recycle   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-recycle </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-refresh   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-refresh </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-remove-circle   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-remove-circle </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-remove-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-remove-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-remove   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-remove </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-repeat-square   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-repeat-square </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-repeat   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-repeat </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-resize-full   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-resize-full </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-resize-horizontal   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-resize-horizontal </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-resize-small   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-resize-small </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-resize-vertical   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-resize-vertical </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-retrofit   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-retrofit </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-revert   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-revert </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-rio-marker   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-rio-marker </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-rio   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-rio </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-road-restrictions   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-road-restrictions </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-road   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-road </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-robot   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-robot </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-rocket   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-rocket </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-role-management   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-role-management </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-roll-container   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-roll-container </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-route-option   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-route-option </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-route-view   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-route-view </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-route   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-route </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-ruler   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-ruler </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-satellite-radar   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-satellite-radar </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-save   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-save </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-scale   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-scale </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-scan   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-scan </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-scissors   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-scissors </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-search-list   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-search-list </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-search-truck   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-search-truck </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-search   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-search </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-send   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-send </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-series   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-series </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-server-stack   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-server-stack </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-settings   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-settings </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-share-alt   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-share-alt </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-share-nodes   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-share-nodes </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-share   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-share </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-shelve-empty   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-shelve-empty </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-shelve   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-shelve </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-ship   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-ship </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-shopping-bag   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-shopping-bag </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-shopping-cart   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-shopping-cart </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-signature   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-signature </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-slope-down-max   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-slope-down-max </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-slope-down-min   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-slope-down-min </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-slope-up-max   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-slope-up-max </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-slope-up-min   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-slope-up-min </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-sort-by-attributes-alt   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-sort-by-attributes-alt </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-sort-by-attributes   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-sort-by-attributes </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-sort   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-sort </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-sparkles   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-sparkles </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-speed   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-speed </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-sphere   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-sphere </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-spinner   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-spinner </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-split-view   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-split-view </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-square-dashed   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-square-dashed </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stack-add   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stack-add </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stack-iso   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stack-iso </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stack   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stack </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-star-empty   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-star-empty </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-star   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-star </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stars   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stars </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-start   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-start </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stats-high   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stats-high </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stats-line-dots   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stats-line-dots </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stats-low   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stats-low </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stats-medium   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stats-medium </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stats   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stats </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-status-available   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-status-available </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-status-change-horizontal   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-status-change-horizontal </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-status-change   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-status-change </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-status-driving   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-status-driving </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-status-resting   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-status-resting </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-status-working   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-status-working </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-steering-wheel   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-steering-wheel </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stillage   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stillage </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-stopover   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-stopover </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-support   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-support </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-table-view   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-table-view </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-tachograph-download   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-tachograph-download </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-tachograph   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-tachograph </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-tag   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-tag </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-tasks   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-tasks </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-temperature   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-temperature </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-th-list   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-th-list </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-thumbs-down   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-thumbs-down </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-thumbs-up   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-thumbs-up </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-tickets   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-tickets </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-time-alt   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-time-alt </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-time-cancle   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-time-cancle </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-time-incomplete   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-time-incomplete </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-time   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-time </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-tire   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-tire </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-tms   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-tms </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-to-bottom   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-to-bottom </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-to-left   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-to-left </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-to-right   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-to-right </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-to-top   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-to-top </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-tracking-package   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-tracking-package </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-traffic-lights   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-traffic-lights </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-trailer-baseline   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-trailer-baseline </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-trailer-liquid   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-trailer-liquid </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-trailer-standard   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-trailer-standard </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-trailer-tipping   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-trailer-tipping </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-trailer   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-trailer </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-trailerposition   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-trailerposition </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-train   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-train </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-transfer   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-transfer </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-transition-push-right   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-transition-push-right </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-transition-right   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-transition-right </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-trash   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-trash </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-triangle-bottom   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-triangle-bottom </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-triangle-left   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-triangle-left </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-triangle-right   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-triangle-right </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-triangle-top   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-triangle-top </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-trophy   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-trophy </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-truck-baseline   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-truck-baseline </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-truck-breakdown   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-truck-breakdown </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-truck-unit   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-truck-unit </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-truck   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-truck </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-unassigned   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-unassigned </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-unavailable   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-unavailable </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-unlink   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-unlink </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-upload   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-upload </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-user-add   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-user-add </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-user-group   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-user-group </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-user-ok   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-user-ok </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-user-remove   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-user-remove </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-user-sign-off   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-user-sign-off </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-user-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-user-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-user   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-user </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-van-baseline   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-van-baseline </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-van   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-van </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-variable   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-variable </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-video   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-video </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-volume   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-volume </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-wallet   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-wallet </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-warehouse   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-warehouse </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-warning-sign   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-warning-sign </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-weather-cloudy   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-weather-cloudy </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-weather-icy   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-weather-icy </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-weather-overcast   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-weather-overcast </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-weather-raining   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-weather-raining </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-weather-snowing   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-weather-snowing </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-weather-stormy   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-weather-stormy </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-weather-sunny   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-weather-sunny </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-weather-thundering   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-weather-thundering </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-weather-windy   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-weather-windy </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-weight   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-weight </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-width   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-width </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-wifi   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-wifi </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-window   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-window </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-workflow-step   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-workflow-step </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-workflow   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-workflow </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-workshop   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-workshop </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-wrench   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-wrench </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-xmas-raindeer   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-xmas-raindeer </span>
    </div>
    <div class="rioglyph-preview display-flex align-items-center margin-top-10 margin-bottom-10">
        <span class="rioglyph rioglyph-icon-off rioglyph-xmas-santa   text-size-h3 margin-right-10">
        </span>
        <span class="text-light user-select-all">rioglyph rioglyph-xmas-santa </span>
    </div>
</div>
```

## Text styles

### Example: Example 32

Headline size

text-size-h1
text-size-h2
text-size-h3
text-size-h4
text-size-h5
text-size-h6

Text size

text-size-10
text-size-11
text-size-12
text-size-14
text-size-16
text-size-18
text-size-20

Text weight

text-thin
text-light
text-normal
text-medium
text-bold
Text style

text-style-normal
text-style-italic

Text decoration

text-decoration-none
hover-text-decoration-none
text-decoration-line-through
text-decoration-underline
underline-offset-2
underline-offset-3
underline-offset-4
underline-offset-5

Text wrapping

white-space-nowrap
white-space-normal

Text transform

text-capitalize
TEXT-LOWERCASE
text-uppercase
text capitalize first word
text-transform-none

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-3-sm grid-cols-6-md gap-20">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Headline size</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="text-size-h1 padding-5">text-size-h1</p>
        <p class="text-size-h2 padding-5">text-size-h2</p>
        <p class="text-size-h3 padding-5">text-size-h3</p>
        <p class="text-size-h4 padding-5">text-size-h4</p>
        <p class="text-size-h5 padding-5">text-size-h5</p>
        <p class="text-size-h6 padding-5">text-size-h6</p>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Text size</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="text-size-10 padding-5">text-size-10</p>
        <p class="text-size-11 padding-5">text-size-11</p>
        <p class="text-size-12 padding-5">text-size-12</p>
        <p class="text-size-14 padding-5">text-size-14</p>
        <p class="text-size-16 padding-5">text-size-16</p>
        <p class="text-size-18 padding-5">text-size-18</p>
        <p class="text-size-20 padding-5">text-size-20</p>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Text weight</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="text-thin padding-5">text-thin</p>
        <p class="text-light padding-5">text-light</p>
        <p class="text-normal padding-5">text-normal</p>
        <p class="text-medium padding-5">text-medium</p>
        <p class="text-bold padding-5">text-bold</p>
        <div class="lead padding-top-20">
            <div class="display-flex justify-content-between">
                <div>Text style</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="text-style-normal padding-5">text-style-normal</p>
        <p class="text-style-italic padding-5">text-style-italic</p>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Text decoration</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="text-decoration-none padding-5">text-decoration-none</p>
        <p class="hover-text-decoration-none padding-5">hover-text-decoration-none</p>
        <p class="text-decoration-line-through padding-5">text-decoration-line-through</p>
        <p class="text-decoration-underline padding-5">text-decoration-underline</p>
        <p class="text-decoration-underline underline-offset-2 padding-5">underline-offset-2</p>
        <p class="text-decoration-underline underline-offset-3 padding-5">underline-offset-3</p>
        <p class="text-decoration-underline underline-offset-4 padding-5">underline-offset-4</p>
        <p class="text-decoration-underline underline-offset-5 padding-5">underline-offset-5</p>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Text wrapping</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="white-space-nowrap padding-5">white-space-nowrap</p>
        <p class="white-space-normal padding-5">white-space-normal</p>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Text transform</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="text-capitalize padding-5">text-capitalize</p>
        <p class="text-lowercase padding-5">TEXT-LOWERCASE</p>
        <p class="text-uppercase padding-5">text-uppercase</p>
        <p class="text-capitalize-first-word padding-5">text capitalize first word</p>
        <p class="text-transform-none padding-5">text-transform-none</p>
    </div>
</div>
```

#### Classes (css)

```css
text-size-h1
```

### Example: Heading 3

Headings

The reason why there are heading tags like <h2> and heading classes like .h2 is due to different use cases. A <h2> tag for instance is an essential SEO tag often used by a CMS like WordPress or Typo3. For these Tools, we can not change the code but we need some styling for the HTML element itself.
Another example is the <strong> or <b> tags and the .text-bold class. The heading classes like the .h2 class can be used in a service application, as those are not SEO relevant. As the UIKIT uses an atomic CSS approach, the same style can be achieved when combining .text-size-h2 .text-bold margin-top-10 margin-bottom-20 classes.

Headline tags

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Headline classes

h1
h2
h3
h4
h5
h6

Misc tags

This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text .
The following snippet of text is rendered as italicized text .
An abbreviation of the word attribute is attr .

#### HTML (html)

```html
<div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Headings</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="margin-bottom-25">
        <p>The reason why there are heading tags like <b>&lt;h2&gt;</b> and heading classes like <b>.h2</b> is due to different use cases. A <b>&lt;h2&gt;</b> tag for instance is an essential SEO tag often used by a CMS like WordPress or Typo3. For these Tools, we can not change the code but we need some styling for the HTML element itself.</p>
        <p>Another example is the <b>&lt;strong&gt;</b> or <b>&lt;b&gt;</b> tags and the <b>.text-bold</b> class. The heading classes like the <b>.h2</b> class can be used in a service application, as those are not SEO relevant. As the UIKIT uses an atomic CSS approach, the same style can be achieved when combining <b>.text-size-h2</b> <b>.text-bold margin-top-10 margin-bottom-20</b> classes.</p>
    </div>
    <div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-3-sm gap-20">
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Headline tags</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <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>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Headline classes</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="h1">h1</div>
            <div class="h2">h2</div>
            <div class="h3">h3</div>
            <div class="h4">h4</div>
            <div class="h5">h5</div>
            <div class="h6">h6</div>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Misc tags</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p>
                <small>This line of text is meant to be treated as fine print.</small>
            </p>
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
            <p>The following snippet of text is <i>rendered as italicized text</i>.</p>
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
h1
```

## Alignment

### Example: Example 34

text-left
text-center
text-right

#### HTML (html)

```html
<div class="display-grid grid-cols-1 gap-5">
    <div class="text-left bg-lightest padding-10 rounded">text-left</div>
    <div class="text-center bg-lightest padding-10 rounded">text-center</div>
    <div class="text-right bg-lightest padding-10 rounded">text-right</div>
</div>
```

#### Classes (css)

```css
text-left
```

## Blockquote

### Example: Example 35

Lorem ipsum white. Lorem ipsum black. Lorem ipsum decent. Lorem ipsum lightest. Lorem ipsum lighter. Lorem ipsum light. Lorem ipsum gray. Lorem ipsum dark. Lorem ipsum darker. Lorem ipsum darkest.

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-3-md gap-20">
    <blockquote class="quote-color-white">Lorem ipsum white.</blockquote>
    <blockquote class="quote-color-black">Lorem ipsum black.</blockquote>
    <blockquote class="quote-color-decent">Lorem ipsum decent.</blockquote>
    <blockquote class="quote-color-lightest">Lorem ipsum lightest.</blockquote>
    <blockquote class="quote-color-lighter">Lorem ipsum lighter.</blockquote>
    <blockquote class="quote-color-light">Lorem ipsum light.</blockquote>
    <blockquote class="quote-color-gray">Lorem ipsum gray.</blockquote>
    <blockquote class="quote-color-dark">Lorem ipsum dark.</blockquote>
    <blockquote class="quote-color-darker">Lorem ipsum darker.</blockquote>
    <blockquote class="quote-color-darkest">Lorem ipsum darkest.</blockquote>
</div>
```

#### Classes (css)

```css
quote-color-white
```

## Code

### Example: Example 36

var test = 'Hello World!';
This is an inline Codeblock for use in text.

// This is a JS example
var test = "Hello World";
console.log(test);

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-ls gap-20 margin-bottom-20">
    <div class="margin-bottom-10">
        <code>var test = 'Hello World!';</code>
    </div>
    <div class="margin-bottom-10">This is an inline <code class="code-inline">Codeblock</code> for use in text.</div>
</div>
<pre>
<code>// This is a JS example
var test = "Hello World";
console.log(test);</code>
</pre>
```

## Cursor

You can disable all pointer events by addingpointer-events-none

### Example: Example 37

cursor-default
cursor-pointer
cursor-text
cursor-move
cursor-grabbing
cursor-grab
cursor-not-allowed
cursor-row-resize
cursor-col-resize
cursor-col-resize
cursor-ew-resize
cursor-help
cursor-cell
cursor-copy
cursor-crosshair

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-20">
    <div class="bg-info padding-10 rounded cursor-default">cursor-default</div>
    <div class="bg-info padding-10 rounded cursor-pointer">cursor-pointer</div>
    <div class="bg-info padding-10 rounded cursor-text">cursor-text</div>
    <div class="bg-info padding-10 rounded cursor-move">cursor-move</div>
    <div class="bg-info padding-10 rounded cursor-grabbing">cursor-grabbing</div>
    <div class="bg-info padding-10 rounded cursor-grab">cursor-grab</div>
    <div class="bg-info padding-10 rounded cursor-not-allowed">cursor-not-allowed</div>
    <div class="bg-info padding-10 rounded cursor-row-resize">cursor-row-resize</div>
    <div class="bg-info padding-10 rounded cursor-col-resize">cursor-col-resize</div>
    <div class="bg-info padding-10 rounded cursor-col-resize">cursor-col-resize</div>
    <div class="bg-info padding-10 rounded cursor-ew-resize">cursor-ew-resize</div>
    <div class="bg-info padding-10 rounded cursor-help">cursor-help</div>
    <div class="bg-info padding-10 rounded cursor-cell">cursor-cell</div>
    <div class="bg-info padding-10 rounded cursor-copy">cursor-copy</div>
    <div class="bg-info padding-10 rounded cursor-crosshair">cursor-crosshair</div>
</div>
```

#### Classes (css)

```css
cursor-default
```

## Ellipsis

Single- or multi-line utility to truncate text content at max width with ...

> Note: Ellipsis only works with block elements. It does not work withdisplay-grid. Combine the classes withdisplay-block or display-flex

### Example: Example 38

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

#### HTML (html)

```html
<div>
    <p class="ellipsis-1 text-size-16">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

        In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

        Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</p>
    <hr>
    <p class="ellipsis-2 text-size-16">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

        In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

        Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</p>
    <hr>
    <p class="ellipsis-3 text-size-16">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

        In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

        Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</p>
</div>
```

#### Classes (css)

```css
ellipsis-1
```

## Ellipsis-middle

The class ellipsis-middle expects two child elements where the first child is the start and the second child is the end that should always remain visible.

### Example: Example 39

2bb5e796-6c5e-4bc4-871b-f3af-d46 9-1c1e
2bb5e796-6c5e-4bc4-871b-f3af- d469-1c1e
2bb5e796-6c5e-4bc4-871b-f3 af-d469-1c1e

#### HTML (html)

```html
<div class="max-width-500">
    <div class="position-relative border rounded padding-15" style="width: 400px;">
        <div class="space-y-15">
            <div class="ellipsis-middle border rounded padding-x-10 padding-y-5 text-size-16">
                <span>2bb5e796-6c5e-4bc4-871b-f3af-d46</span>
                <span>9-1c1e</span>
            </div>
            <div class="ellipsis-middle border rounded padding-x-10 padding-y-5 text-size-16">
                <span>2bb5e796-6c5e-4bc4-871b-f3af-</span>
                <span>d469-1c1e</span>
            </div>
            <div class="ellipsis-middle border rounded padding-x-10 padding-y-5 text-size-16">
                <span>2bb5e796-6c5e-4bc4-871b-f3</span>
                <span>af-d469-1c1e</span>
            </div>
        </div>
        <div class="Resizer resize-horizontal resize-right right-0 display-grid place-items-center width-auto height-100pct padding-x-2">
            <div class="height-30 width-2 bg-gray">
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
ellipsis-middle
```

## Line height

When working with text, it's important to consider the relationship between the text size and the line height. For larger headlines, a line height of 1.2 to 1.25 is recommended to maintain readability and visual balance. For plain body text or text inside promotion blocks, a slightly larger line height of 1.4 to 1.5 is suggested to improve readability and the overall reading experience.

Rule of thumb: the larger the text size, the smaller the line height should be.

> Note: The listed classes are not necessary for the use of ourtext-size classes. Use them only if you want to have the exact the same line-height as your text-size is.

### Example: Example 40

line-height-10

Lorem ipsum dolor sit amet, dui eget elit.

line-height-11

Lorem ipsum dolor sit amet, dui eget elit.

line-height-12

Lorem ipsum dolor sit amet, dui eget elit.

line-height-14

Lorem ipsum dolor sit amet, dui eget elit.

line-height-16

Lorem ipsum dolor sit amet, dui eget elit.

line-height-18

Lorem ipsum dolor sit amet, dui eget elit.

line-height-20

Lorem ipsum dolor sit amet, dui eget elit.

line-height-125rel

Lorem ipsum dolor sit amet, dui eget elit.

line-height-130rel

Lorem ipsum dolor sit amet, dui eget elit.

line-height-135rel

Lorem ipsum dolor sit amet, dui eget elit.

line-height-150rel

Lorem ipsum dolor sit amet, dui eget elit.

#### HTML (html)

```html
<div class="display-grid gap-20">
    <div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-7-md gap-20">
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-10</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-10 padding-5 text-size-10">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-11</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-11 padding-5 text-size-11">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-12</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-12 padding-5 text-size-12">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-14</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-14 padding-5 text-size-14">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-16</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-16 padding-5 text-size-16">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-18</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-18 padding-5 text-size-18">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-20</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-20 padding-5 text-size-20">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
    </div>
    <div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-sm grid-cols-7-md gap-20">
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-125rel</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-125rel padding-5 text-size-16">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-130rel</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-130rel padding-5 text-size-16">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-135rel</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-135rel padding-5 text-size-16">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>line-height-150rel</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <p class="line-height-150rel padding-5 text-size-16">
                Lorem ipsum dolor sit amet, dui eget elit.</p>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
line-height-10
```

### Example: Example 41

line-height-h1

Lorem ipsum dolor sit amet, dui eget elit.

line-height-h2

Lorem ipsum dolor sit amet, dui eget elit.

line-height-h3

Lorem ipsum dolor sit amet, dui eget elit.

line-height-h4

Lorem ipsum dolor sit amet, dui eget elit.

line-height-h5

Lorem ipsum dolor sit amet, dui eget elit.

line-height-h6

Lorem ipsum dolor sit amet, dui eget elit.

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-3-sm grid-cols-6-md gap-20">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>line-height-h1</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="line-height-h1 padding-5 text-size-h1">
            Lorem ipsum dolor sit amet, dui eget elit.</p>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>line-height-h2</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="line-height-h2 padding-5 text-size-h2">
            Lorem ipsum dolor sit amet, dui eget elit.</p>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>line-height-h3</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="line-height-h3 padding-5 text-size-h3">
            Lorem ipsum dolor sit amet, dui eget elit.</p>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>line-height-h4</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="line-height-h4 padding-5 text-size-h4">
            Lorem ipsum dolor sit amet, dui eget elit.</p>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>line-height-h5</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="line-height-h5 padding-5 text-size-h5">
            Lorem ipsum dolor sit amet, dui eget elit.</p>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>line-height-h6</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <p class="line-height-h6 padding-5 text-size-h6">
            Lorem ipsum dolor sit amet, dui eget elit.</p>
    </div>
</div>
```

#### Classes (css)

```css
line-height-h1
```

## User select

### Example: Example 42

user-select-all
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
user-select-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

#### HTML (html)

```html
<div class="display-grid grid-cols-2 gap-20">
    <div class="user-select-all">
        <code class="code-inline-first">user-select-all</code>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
    </div>
    <div class="user-select-none">
        <code class="code-inline-first">user-select-none</code>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
    </div>
</div>
```

#### Classes (css)

```css
user-select-all
```

## Text box

The text-box properties enable trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.

### Example: Example 43

text-box-trim-start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

text-box-trim-both

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

text-box-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

no text-box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### HTML (html)

```html
<div class="space-y-50">
    <div class="display-flex gap-50 flex-wrap">
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>text-box-trim-start</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="display-flex gap-15 border border-style-dashed max-width-500">
                <div class="flex-0 height-150 width-150 bg-info">
                </div>
                <div class="text-box-trim-start">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            </div>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>text-box-trim-both</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="display-flex gap-15 border border-style-dashed max-width-500">
                <div class="flex-0 height-150 width-150 bg-info">
                </div>
                <div class="text-box-trim-both">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            </div>
        </div>
    </div>
    <div class="display-flex gap-50 flex-wrap">
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>text-box-auto</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="display-flex gap-15 border border-style-dashed max-width-500">
                <div class="flex-0 height-150 width-150 bg-info">
                </div>
                <div class="text-box-auto">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            </div>
        </div>
        <div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>no text-box</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="display-flex gap-15 border border-style-dashed max-width-500">
                <div class="flex-0 height-150 width-150 bg-info">
                </div>
                <div class="">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
text-boxnormal
```

## Text wrapping

Layout

### Example: Example 44

Word break

Finanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.

Hyphens

Finanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.

Balance
caniuse

Allows text to have it's lines broken that each line is roughly the same width.

Pretty
caniuse

It evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-25">
    <div class="width-250 min-width-250">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Word break</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="word-break-all text-size-20">Finanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.</div>
    </div>
    <div class="width-250 min-width-250">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Hyphens</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="hyphens-auto text-size-20">Finanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.</div>
    </div>
    <div class="max-width-500">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Balance</div>
                <div>
                    <a href="https://caniuse.com/css-text-wrap-balance" target="_blank" rel="noreferrer" class="text-size-12">caniuse <span class="rioglyph rioglyph-new-window">
                        </span>
                    </a>
                </div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="text-wrap-balance text-size-20 text-center">Allows text to have it's lines broken that each line is roughly the same width.</div>
    </div>
    <div class="max-width-500">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Pretty</div>
                <div>
                    <a href="https://caniuse.com/css-text-wrap-pretty" target="_blank" rel="noreferrer" class="text-size-12">caniuse <span class="rioglyph rioglyph-new-window">
                        </span>
                    </a>
                </div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="text-wrap-pretty text-size-20 text-center">It evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.</div>
    </div>
</div>
```

#### Classes (css)

```css
word-break-all
```

## Cols

Column classes indicate the number of columns you like to use out of the possible 12 per row. They must be immediate children of rows.

> Note: Col classes without a breakpoint addition are always weaker than with an addition. To reset a breakpoint class, you always have to set another larger breakpoint class, otherwise the set breakpoint is always active.Right example col-xs-6col-sm-12 col-xs-6 will only be active on small screensWrong example col-xs-6col-12 col-xs-6 will always be active

### Example: Example 45

col-12

col-6

col-6

col-4

col-4

col-4

col-3

col-3

col-3

col-3

col-2

col-2

col-2

col-2

col-2

col-2

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

#### HTML (html)

```html
<div class="row">
    <div class="col-12 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-12</div>
    </div>
</div>
<div class="row">
    <div class="col-6 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-6</div>
    </div>
    <div class="col-6 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-6</div>
    </div>
</div>
<div class="row">
    <div class="col-4 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-4</div>
    </div>
    <div class="col-4 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-4</div>
    </div>
    <div class="col-4 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-4</div>
    </div>
</div>
<div class="row">
    <div class="col-3 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-3</div>
    </div>
    <div class="col-3 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-3</div>
    </div>
    <div class="col-3 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-3</div>
    </div>
    <div class="col-3 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-3</div>
    </div>
</div>
<div class="row">
    <div class="col-2 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-2</div>
    </div>
    <div class="col-2 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-2</div>
    </div>
    <div class="col-2 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-2</div>
    </div>
    <div class="col-2 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-2</div>
    </div>
    <div class="col-2 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-2</div>
    </div>
    <div class="col-2 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-2</div>
    </div>
</div>
<div class="row hidden-xs">
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
    <div class="col-1">
        <div class="bg-info padding-10 rounded">col-1</div>
    </div>
</div>
```

#### Classes (css)

```css
row
```

## Responsive cols

|  | ls | sm | md | lg | xl |
| --- | --- | --- | --- | --- | --- |
| min-width | 480px | 768px | 992px | 1200px | 1700px |
| class | col-ls-* | col-sm-* | col-md-* | col-lg-* | col-xl-* |

### Example: Example 46

col-xs-6 col-sm-3

col-xs-6 col-sm-3

col-xs-6 col-sm-3

col-xs-6 col-sm-3

#### HTML (html)

```html
<div class="row">
    <div class="col-xs-6 col-sm-3 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-xs-6 col-sm-3</div>
    </div>
    <div class="col-xs-6 col-sm-3 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-xs-6 col-sm-3</div>
    </div>
    <div class="col-xs-6 col-sm-3 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-xs-6 col-sm-3</div>
    </div>
    <div class="col-xs-6 col-sm-3 margin-bottom-20">
        <div class="bg-info padding-10 rounded">col-xs-6 col-sm-3</div>
    </div>
</div>
```

## Equal Height Cols

### Example: Example 47

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

#### HTML (html)

```html
<div class="row equal-height">
    <div class="col-6">
        <div class="bg-info padding-10 rounded height-100pct">
            Lorem ipsum dolor sit amet, dui eget elit.</div>
    </div>
    <div class="col-6">
        <div class="bg-info padding-10 rounded height-100pct">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
    </div>
</div>
```

#### Classes (css)

```css
row equal-height
```

## Container fluid

|  | small | default | large | extra-large | ultra-large |
| --- | --- | --- | --- | --- | --- |
| max-width | 980px | 1280px | 1440px | 1680px | 1920px |

### Example: Example 48

container fluid-small
container fluid-default
container fluid-large
container fluid-extra-large
container fluid-ultra-large

#### HTML (html)

```html
<div class="
                    container fluid-small bg-info rounded padding-15
                    margin-bottom-20 last-child-margin-bottom-0
                ">container fluid-small</div>
<div class="
                    container fluid-default bg-info rounded padding-15
                    margin-bottom-20 last-child-margin-bottom-0
                ">container fluid-default</div>
<div class="
                    container fluid-large bg-info rounded padding-15
                    margin-bottom-20 last-child-margin-bottom-0
                ">container fluid-large</div>
<div class="
                    container fluid-extra-large bg-info rounded padding-15
                    margin-bottom-20 last-child-margin-bottom-0
                ">container fluid-extra-large</div>
<div class="
                    container fluid-ultra-large bg-info rounded padding-15
                    margin-bottom-20 last-child-margin-bottom-0
                ">container fluid-ultra-large</div>
```

#### Classes (css)

```css
container
```

## Container

> Note: If a container is used without the fluid classes, it has a maximum width per breakpoint and will jump when the screen is resized.

|  | ls | sm | md | lg | xl |
| --- | --- | --- | --- | --- | --- |
| max-width | 440px | 728px | 952px | 1160px | 1660px |

### Example: Example 49

container

#### HTML (html)

```html
<div class="container bg-info rounded padding-15">container</div>
```

#### Classes (css)

```css
container
```

## Container queries

## What are container queries?

While traditional container classes like container and fluid-default respond to the viewport width,container queries respond to the size of the component’s parent container. This allows components to adapt their layout based on context, not just screen size.

By reacting to the container's width instead of the screen, container queries enable components to become context-aware—adapting their layout depending on where they are used. Whether inside a narrow sidebar or a wide content area, components can now behave responsively within their own environment, making designs more modular, flexible, and reusable.

| Classic container | Container query |
| --- | --- |
| container, fluid-default | e.g., cq-600, cq-700 (custom class names) |
| Layout adapts to viewport width | Layout adapts to container width |
| Typically applied at page layout level | Used inside components and layout elements |
| Based on media queries | Based on @container CSS rules |

## Usage

The UIKIT provides atomic utility classes for container queries, enabling you to quickly apply conditional styles directly in your JSX/HTML based on container width.

1. Define the container: mark an ancestor element as a container using the specific cq-container class. This tells the browser which element's size should be monitored. <div class="cq-container"> <!-- content goes here --> </div>
2. Apply CQ utility classes: add cq-300:... classes to the descendant elements you want to style conditionally based on the container's. <div class="cq-container"> <div class="padding-10 cq-400:padding-15 cq-600:padding-25"> <!-- more content goes here --> </div> </div>

```html
<div class="cq-container">
<!-- content goes here -->
</div>
```

<div class="cq-container">

<!-- content goes here -->

</div>

```html
<div class="cq-container">
<div class="padding-10 cq-400:padding-15 cq-600:padding-25">
<!-- more content goes here -->
</div>
</div>
```

<div class="cq-container">

<div class="padding-10 cq-400:padding-15 cq-600:padding-25">

<!-- more content goes here -->

</div>

</div>

The class naming convention is: cq: + [breakpointValue] + : + [property] + - + [value]

- cq: is the prefix for all container query utilities.
- [breakpointValue] is one of the numeric identifiers from the table above (e.g., 300, 400, 500, 600, 700).
- [property] is the type of property being styled (e.g., padding, margin-top, flex-column, grid-cols).
- [value] is the value from the library's scale (e.g., 10, 25, auto).

## Container query breakpoints

Our container query utilities are based on a set of predefined width breakpoints. The breakpoint value is included directly in the class name for clarity.

We use a "max-width" query for the smallest breakpoint (300px) to target styles up to that size, and "min-width" queries for all larger breakpoints to target styles from that size upwards.

| Identifier (in class) | Value | Query type | Description |
| --- | --- | --- | --- |
| 300 | 300px | max-width | Styles applied when container width is ≤ 300px |
| 400 | 400px | min-width | Styles applied when container width is ≥ 400px |
| 500 | 500px | min-width | Styles applied when container width is ≥ 500px |
| 600 | 600px | min-width | Styles applied when container width is ≥ 600px |
| 700 | 700px | min-width | Styles applied when container width is ≥ 700px |

300

300px

max-width

Styles applied when container width is ≤ 300px

400

400px

min-width

Styles applied when container width is ≥ 400px

500

500px

min-width

Styles applied when container width is ≥ 500px

600

600px

min-width

Styles applied when container width is ≥ 600px

700

700px

min-width

Styles applied when container width is ≥ 700px

### Example: Container query example and classes

Container query example and classes
Item 1
Item 2
Item 3

#### HTML (html)

```html
<h3 class="margin-bottom-25 margin-top-0">Container query example and classes</h3>
<div class="cq-container border rounded user-select-none">
    <div class="
                    padding-10 cq-400:padding-15 cq-600:padding-25
                    display-grid grid-cols-1 cq-500:grid-cols-2 cq-600:grid-cols-3
                    gap-5 cq-400:gap-10 cq-500:gap-15 cq-600:gap-20 cq-700:gap-25">
        <div class="padding-y-5 padding-x-10 bg-info display-grid place-items-center rounded">Item 1</div>
        <div class="padding-y-5 padding-x-10 bg-info display-grid place-items-center rounded">Item 2</div>
        <div class="padding-y-5 padding-x-10 bg-info display-grid place-items-center rounded">Item 3</div>
    </div>
</div>
```

#### Classes (css)

```css
cq-container
```

## Flexbox

### Example: Example 51

Center

Lorem ipsum dolor

Top start

Lorem ipsum dolor

Bottom start

Lorem ipsum dolor

Top end

Lorem ipsum dolor

Bottom end

Lorem ipsum dolor

Space between

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Even split columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

Lorem ipsum dolor sit amet, dui eget elit.

Multiple even columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

70/30 columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.

#### HTML (html)

```html
<div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Center</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex justify-content-center align-items-center bg-lightest margin-bottom-20 height-100">
        <div class="bg-info rounded padding-10">Lorem ipsum dolor</div>
    </div>
    <div class="display-flex justify-content-between gap-20">
        <div class="flex-1-1">
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Top start</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="display-flex justify-content-start align-items-start bg-lightest margin-bottom-20 height-100">
                <div class="bg-info rounded padding-10">Lorem ipsum dolor</div>
            </div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Bottom start</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="display-flex justify-content-start align-items-end bg-lightest margin-bottom-20 height-100">
                <div class="bg-info rounded padding-10">Lorem ipsum dolor</div>
            </div>
        </div>
        <div class="flex-1-1">
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Top end</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="display-flex justify-content-end align-items-start bg-lightest margin-bottom-20 height-100">
                <div class="bg-info rounded padding-10">Lorem ipsum dolor</div>
            </div>
            <div class="lead ">
                <div class="display-flex justify-content-between">
                    <div>Bottom end</div>
                </div>
                <hr class="margin-top-10 border-color-light">
            </div>
            <div class="display-flex justify-content-end align-items-end bg-lightest margin-bottom-20 height-100">
                <div class="bg-info rounded padding-10">Lorem ipsum dolor</div>
            </div>
        </div>
    </div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Space between</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex justify-content-between align-items-center bg-lightest margin-bottom-20">
        <div class="bg-info padding-10 rounded">Lorem ipsum dolor</div>
        <div class="bg-info padding-10 rounded">Lorem ipsum dolor</div>
        <div class="bg-info padding-10 rounded">Lorem ipsum dolor</div>
    </div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Even split columns</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex gap-20 margin-bottom-20">
        <div class="flex-basis-100pct bg-info padding-10 rounded">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
        <div class="flex-basis-100pct bg-info padding-10 rounded">
            Lorem ipsum dolor sit amet, dui eget elit.</div>
    </div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Multiple even columns</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex gap-20 margin-bottom-20">
        <div class="flex-basis-100pct bg-info padding-10 rounded">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
        <div class="flex-basis-100pct bg-info padding-10 rounded">
            Lorem ipsum dolor sit amet, dui eget elit.</div>
        <div class="flex-basis-100pct bg-info padding-10 rounded">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>
    </div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>70/30 columns</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex gap-20">
        <div class="flex-basis-70pct bg-info padding-10 rounded">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
        <div class="flex-basis-30pct bg-info padding-10 rounded">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>
    </div>
</div>
```

#### Classes (css)

```css
display-flex
```

## Grid

### Example: Example 52

grid-cols-1

grid-cols-2
grid-cols-2

grid-cols-3
grid-cols-3
grid-cols-3

grid-cols-4
grid-cols-4
grid-cols-4
grid-cols-4

grid-cols-5
grid-cols-5
grid-cols-5
grid-cols-5
grid-cols-5

grid-cols-6
grid-cols-6
grid-cols-6
grid-cols-6
grid-cols-6
grid-cols-6

grid-cols-7
grid-cols-7
grid-cols-7
grid-cols-7
grid-cols-7
grid-cols-7
grid-cols-7

grid-cols-8
grid-cols-8
grid-cols-8
grid-cols-8
grid-cols-8
grid-cols-8
grid-cols-8
grid-cols-8

grid-cols-9
grid-cols-9
grid-cols-9
grid-cols-9
grid-cols-9
grid-cols-9
grid-cols-9
grid-cols-9
grid-cols-9

grid-cols-10
grid-cols-10
grid-cols-10
grid-cols-10
grid-cols-10
grid-cols-10
grid-cols-10
grid-cols-10
grid-cols-10
grid-cols-10

grid-cols-11
grid-cols-11
grid-cols-11
grid-cols-11
grid-cols-11
grid-cols-11
grid-cols-11
grid-cols-11
grid-cols-11
grid-cols-11
grid-cols-11

grid-cols-12
grid-cols-12
grid-cols-12
grid-cols-12
grid-cols-12
grid-cols-12
grid-cols-12
grid-cols-12
grid-cols-12
grid-cols-12
grid-cols-12
grid-cols-12

#### HTML (html)

```html
<div class="display-grid gap-20">
    <div class="display-grid gap-20 grid-cols-1">
        <div class="padding-10 bg-info rounded">grid-cols-1</div>
    </div>
    <div class="display-grid gap-20 grid-cols-2">
        <div class="padding-10 bg-info rounded">grid-cols-2</div>
        <div class="padding-10 bg-info rounded">grid-cols-2</div>
    </div>
    <div class="display-grid gap-20 grid-cols-3">
        <div class="padding-10 bg-info rounded">grid-cols-3</div>
        <div class="padding-10 bg-info rounded">grid-cols-3</div>
        <div class="padding-10 bg-info rounded">grid-cols-3</div>
    </div>
    <div class="display-grid gap-20 grid-cols-4">
        <div class="padding-10 bg-info rounded">grid-cols-4</div>
        <div class="padding-10 bg-info rounded">grid-cols-4</div>
        <div class="padding-10 bg-info rounded">grid-cols-4</div>
        <div class="padding-10 bg-info rounded">grid-cols-4</div>
    </div>
    <div class="display-grid gap-20 grid-cols-5">
        <div class="padding-10 bg-info rounded">grid-cols-5</div>
        <div class="padding-10 bg-info rounded">grid-cols-5</div>
        <div class="padding-10 bg-info rounded">grid-cols-5</div>
        <div class="padding-10 bg-info rounded">grid-cols-5</div>
        <div class="padding-10 bg-info rounded">grid-cols-5</div>
    </div>
    <div class="display-grid gap-20 grid-cols-6">
        <div class="padding-10 bg-info rounded">grid-cols-6</div>
        <div class="padding-10 bg-info rounded">grid-cols-6</div>
        <div class="padding-10 bg-info rounded">grid-cols-6</div>
        <div class="padding-10 bg-info rounded">grid-cols-6</div>
        <div class="padding-10 bg-info rounded">grid-cols-6</div>
        <div class="padding-10 bg-info rounded">grid-cols-6</div>
    </div>
    <div class="display-grid gap-20 grid-cols-7">
        <div class="padding-10 bg-info rounded">grid-cols-7</div>
        <div class="padding-10 bg-info rounded">grid-cols-7</div>
        <div class="padding-10 bg-info rounded">grid-cols-7</div>
        <div class="padding-10 bg-info rounded">grid-cols-7</div>
        <div class="padding-10 bg-info rounded">grid-cols-7</div>
        <div class="padding-10 bg-info rounded">grid-cols-7</div>
        <div class="padding-10 bg-info rounded">grid-cols-7</div>
    </div>
    <div class="display-grid gap-20 grid-cols-8 hidden-xs">
        <div class="padding-10 bg-info rounded">grid-cols-8</div>
        <div class="padding-10 bg-info rounded">grid-cols-8</div>
        <div class="padding-10 bg-info rounded">grid-cols-8</div>
        <div class="padding-10 bg-info rounded">grid-cols-8</div>
        <div class="padding-10 bg-info rounded">grid-cols-8</div>
        <div class="padding-10 bg-info rounded">grid-cols-8</div>
        <div class="padding-10 bg-info rounded">grid-cols-8</div>
        <div class="padding-10 bg-info rounded">grid-cols-8</div>
    </div>
    <div class="display-grid gap-20 grid-cols-9 hidden-xs">
        <div class="padding-10 bg-info rounded">grid-cols-9</div>
        <div class="padding-10 bg-info rounded">grid-cols-9</div>
        <div class="padding-10 bg-info rounded">grid-cols-9</div>
        <div class="padding-10 bg-info rounded">grid-cols-9</div>
        <div class="padding-10 bg-info rounded">grid-cols-9</div>
        <div class="padding-10 bg-info rounded">grid-cols-9</div>
        <div class="padding-10 bg-info rounded">grid-cols-9</div>
        <div class="padding-10 bg-info rounded">grid-cols-9</div>
        <div class="padding-10 bg-info rounded">grid-cols-9</div>
    </div>
    <div class="display-grid gap-20 grid-cols-10 hidden-xs">
        <div class="padding-10 bg-info rounded">grid-cols-10</div>
        <div class="padding-10 bg-info rounded">grid-cols-10</div>
        <div class="padding-10 bg-info rounded">grid-cols-10</div>
        <div class="padding-10 bg-info rounded">grid-cols-10</div>
        <div class="padding-10 bg-info rounded">grid-cols-10</div>
        <div class="padding-10 bg-info rounded">grid-cols-10</div>
        <div class="padding-10 bg-info rounded">grid-cols-10</div>
        <div class="padding-10 bg-info rounded">grid-cols-10</div>
        <div class="padding-10 bg-info rounded">grid-cols-10</div>
        <div class="padding-10 bg-info rounded">grid-cols-10</div>
    </div>
    <div class="display-grid gap-20 grid-cols-11 hidden-xs">
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
        <div class="padding-10 bg-info rounded">grid-cols-11</div>
    </div>
    <div class="display-grid gap-20 grid-cols-12 hidden-xs">
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
        <div class="padding-10 bg-info rounded">grid-cols-12</div>
    </div>
</div>
```

#### Classes (css)

```css
display-grid
```

## Grid colspan / rowspan

### Example: Example 53

grid-colspan-3

#### HTML (html)

```html
<div class="display-grid gap-20">
    <div class="display-grid gap-20 grid-cols-6">
        <div class="padding-10 bg-info rounded">
        </div>
        <div class="padding-10 bg-info rounded">
        </div>
        <div class="padding-10 bg-info rounded grid-colspan-3">grid-colspan-3</div>
        <div class="padding-10 bg-info rounded">
        </div>
    </div>
</div>
```

#### Classes (css)

```css
grid-colspan-auto
```

## Grid column-start / column-end

### Example: Example 54



#### HTML (html)

```html
<div class="display-grid gap-15">
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-1">
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-2">
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-3">
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-4">
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-5">
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-6">
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-1 grid-column-end-6">
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-1 grid-column-end-5">
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-1 grid-column-end-4">
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-1 grid-column-end-3">
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-6">
        <div class="padding-10 bg-info rounded grid-column-start-1 grid-column-end-2">
        </div>
    </div>
</div>
```

#### Classes (css)

```css
grid-column-start-1
```

## Grid auto-fit

In CSS Grid, the auto-fit keyword is used with the repeat() function to automatically adjust the number of columns (or rows) based on the available space in the container. It helps create responsive layouts by filling the container with as many columns (or rows) of a specified size as possible.

Dynamic Column Creation: "auto-fit" automatically creates as many columns as will fit in the available space, potentially adding or removing columns as the container resizes.

Responsive Design: Ensures that the grid adapts to different screen sizes by adjusting the number of columns.

### Example: Example 55



#### HTML (html)

```html
<div class="display-grid gap-20 grid-auto-fit-400">
    <div class="padding-25 bg-info rounded">
    </div>
    <div class="padding-25 bg-info rounded">
    </div>
    <div class="padding-25 bg-info rounded">
    </div>
    <div class="padding-25 bg-info rounded">
    </div>
</div>
```

#### Classes (css)

```css
grid-auto-fit-100
```

## Grid max-content / auto content

The max-content value sizes the grid column to be as wide as the largest piece of content inside it. Essentially, it takes up as much space as necessary to fit the longest word or item without breaking. This is useful when you want the column to expand to fit its content, ensuring no content is clipped or wrapped unnecessarily.

The auto value sizes the grid column based on the content, but it can also take into account the available space and other factors. If there's more space available, "auto" can expand to fill it, but it won't exceed the available space like "max-content". This is useful when you want the column to take up space according to its content but also adapt to the overall layout and available space.

Choosing between max-content and auto depends on whether you want the column to strictly fit its content (potentially ignoring the available space) or to adapt to the content while also being flexible within the grid layout.

### Example: Example 56

max-content
1fr

max-content
1fr
max-content
1fr

1fr
max-content

1fr
max-content
1fr
max-content

auto
1fr

auto
1fr
auto
1fr

1fr
auto

1fr
auto
1fr
auto

#### HTML (html)

```html
<div class="display-grid gap-20">
    <div class="display-grid gap-20 grid-cols-2-max-content-1fr">
        <div class="padding-10 bg-info rounded">max-content</div>
        <div class="padding-10 bg-info rounded">1fr</div>
    </div>
    <div class="display-grid gap-20 grid-cols-4-max-content-1fr">
        <div class="padding-10 bg-info rounded">max-content</div>
        <div class="padding-10 bg-info rounded">1fr</div>
        <div class="padding-10 bg-info rounded">max-content</div>
        <div class="padding-10 bg-info rounded">1fr</div>
    </div>
    <div class="display-grid gap-20 grid-cols-2-1fr-max-content">
        <div class="padding-10 bg-info rounded">1fr</div>
        <div class="padding-10 bg-info rounded">max-content</div>
    </div>
    <div class="display-grid gap-20 grid-cols-4-1fr-max-content">
        <div class="padding-10 bg-info rounded">1fr</div>
        <div class="padding-10 bg-info rounded">max-content</div>
        <div class="padding-10 bg-info rounded">1fr</div>
        <div class="padding-10 bg-info rounded">max-content</div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="display-grid gap-20 grid-cols-2-auto-1fr">
        <div class="padding-10 bg-info rounded">auto</div>
        <div class="padding-10 bg-info rounded">1fr</div>
    </div>
    <div class="display-grid gap-20 grid-cols-4-auto-1fr">
        <div class="padding-10 bg-info rounded">auto</div>
        <div class="padding-10 bg-info rounded">1fr</div>
        <div class="padding-10 bg-info rounded">auto</div>
        <div class="padding-10 bg-info rounded">1fr</div>
    </div>
    <div class="display-grid gap-20 grid-cols-2-1fr-auto">
        <div class="padding-10 bg-info rounded">1fr</div>
        <div class="padding-10 bg-info rounded">auto</div>
    </div>
    <div class="display-grid gap-20 grid-cols-4-1fr-auto">
        <div class="padding-10 bg-info rounded">1fr</div>
        <div class="padding-10 bg-info rounded">auto</div>
        <div class="padding-10 bg-info rounded">1fr</div>
        <div class="padding-10 bg-info rounded">auto</div>
    </div>
</div>
```

#### Classes (css)

```css
grid-cols-2-max-content-1fr
```

## Grid rows

Helper class for 3 rows where the middle row expands and can scroll

### Example: Lorem ipsum dolor sit amet

Lorem item 0
Lorem ipsum dolor sit amet

Lorem item 1
Lorem ipsum dolor sit amet

Lorem item 2
Lorem ipsum dolor sit amet

Lorem item 3
Lorem ipsum dolor sit amet

Lorem item 4
Lorem ipsum dolor sit amet

Lorem item 5
Lorem ipsum dolor sit amet

Lorem item 6
Lorem ipsum dolor sit amet

Lorem item 7
Lorem ipsum dolor sit amet

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### HTML (html)

```html
<div class="display-grid grid-cols-2 gap-20">
    <div class="display-grid gap-15 max-height-500 grid-rows-auto-1fr-auto">
        <div class="form-group margin-0">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-search">
                    </span>
                </span>
                <input type="text" class="form-control" placeholder="Find your item">
            </div>
        </div>
        <div class="padding-y-2 overflow-y-auto">
            <label class="radio padding-15 margin-top--1 border rounded-top border-color-highlight bg-highlight-decent z-index-1" tabindex="0">
                <input type="radio" class="padding-15 margin-top--1 border rounded-top border-color-highlight bg-highlight-decent z-index-1" name="stackedRadioBoxes" value="" checked="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Lorem item 0</div>
                        <div class="text-color-dark">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 margin-top--1 border bg-white hover-bg-decent" tabindex="0">
                <input type="radio" class="padding-15 margin-top--1 border bg-white hover-bg-decent" name="stackedRadioBoxes" value="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Lorem item 1</div>
                        <div class="text-color-dark">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 margin-top--1 border bg-white hover-bg-decent" tabindex="0">
                <input type="radio" class="padding-15 margin-top--1 border bg-white hover-bg-decent" name="stackedRadioBoxes" value="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Lorem item 2</div>
                        <div class="text-color-dark">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 margin-top--1 border bg-white hover-bg-decent" tabindex="0">
                <input type="radio" class="padding-15 margin-top--1 border bg-white hover-bg-decent" name="stackedRadioBoxes" value="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Lorem item 3</div>
                        <div class="text-color-dark">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 margin-top--1 border bg-white hover-bg-decent" tabindex="0">
                <input type="radio" class="padding-15 margin-top--1 border bg-white hover-bg-decent" name="stackedRadioBoxes" value="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Lorem item 4</div>
                        <div class="text-color-dark">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 margin-top--1 border bg-white hover-bg-decent" tabindex="0">
                <input type="radio" class="padding-15 margin-top--1 border bg-white hover-bg-decent" name="stackedRadioBoxes" value="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Lorem item 5</div>
                        <div class="text-color-dark">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 margin-top--1 border bg-white hover-bg-decent" tabindex="0">
                <input type="radio" class="padding-15 margin-top--1 border bg-white hover-bg-decent" name="stackedRadioBoxes" value="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Lorem item 6</div>
                        <div class="text-color-dark">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 margin-top--1 border bg-white hover-bg-decent" tabindex="0">
                <input type="radio" class="padding-15 margin-top--1 border bg-white hover-bg-decent" name="stackedRadioBoxes" value="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Lorem item 7</div>
                        <div class="text-color-dark">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
            </label>
        </div>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Button</button>
    </div>
    <div class="panel panel-default panel-body display-flex flex-column max-height-500">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
    </div>
</div>
```

#### Classes (css)

```css
grid-rows-auto-1fr-auto
```

## Grid placement

### Example: Example 58

place-items-center

#### HTML (html)

```html
<div class="display-grid place-items-center bg-lightest height-100">
    <div class="padding-10 bg-info rounded">place-items-center</div>
</div>
```

#### Classes (css)

```css
display-grid place-items-center place-self-center
```

## Grid stacking

This is an alternative to the commonly known position absolute using grid-template-areas under the hood and giving all items the same grid area. To make the usage easier, use the following two classes grid-stack and grid-stack-item

### Example: Example 59

stack item 1
stack item 2

stack item 1
stack item 2

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-sm align-content-center gap-20">
    <div class="display-grid grid-stack place-items-center bg-lightest height-200 width-100pct">
        <div class="grid-stack-item height-100 width-200 padding-x-15 padding-top-5 padding-bottom-20 bg-white rounded border">stack item 1</div>
        <div class="grid-stack-item padding-x-15 padding-y-10 bg-info rounded">stack item 2</div>
    </div>
    <div class="display-grid grid-stack align-items-center align-items-end bg-lightest height-200 width-100pct">
        <div class="grid-stack-item height-100 width-200 padding-x-15 padding-top-5 padding-bottom-20 bg-white rounded border">stack item 1</div>
        <div class="grid-stack-item padding-x-15 padding-y-10 bg-info rounded">stack item 2</div>
    </div>
</div>
```

#### Classes (css)

```css
display-grid grid-stack
```

## Subgrid

The subgrid value in CSS Grid Layout is a feature that allows a nested grid to inherit the column and/or row definitions from its parent grid container. This means that the subgrid can align its items according to the tracks defined in the parent grid, creating a more consistent and aligned layout structure. It is particularly useful for complex layouts where nested elements need to align with the overall grid structure without redefining the grid tracks. By using subgrid, you can maintain a cohesive design while simplifying the CSS code needed for layout alignment. This feature enhances the flexibility and power of CSS Grid, making it easier to manage nested grid layouts.

### Example: Example 60

Form example
Connection
Host Port Really long label
Credentials
Username Password Checkbox Yet another level of nesting

Subgrid enabled
Submit

#### HTML (html)

```html
<div class="max-width-500">
    <form class="display-grid grid-cols-2-max-content-1fr row-gap-15 align-items-center">
        <div class="grid-colspan-2 text-size-h4 text-color-darker">Form example</div>
        <section class="display-grid grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-15 align-items-center form-group margin-0">
            <div class="grid-colspan-2 text-size-h5 text-color-darker">Connection</div>
            <label class="margin-0" for="subgrid-host">Host</label>
            <input id="subgrid-host" type="text" class="form-control">
            <label class="margin-0" for="subgrid-port">Port</label>
            <input id="subgrid-port" type="number" class="form-control">
            <label class="margin-0" for="subgrid-date">Really long label</label>
            <input id="subgrid-date" type="date" class="form-control">
        </section>
        <section class="display-grid grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-15 align-items-center form-group margin-0">
            <div class="grid-colspan-2 text-size-h5 text-color-darker">Credentials</div>
            <label class="margin-0" for="subgrid-username">Username</label>
            <input id="subgrid-username" type="text" class="form-control">
            <label class="margin-0" for="subgrid-password">Password</label>
            <input id="subgrid-password" type="password" class="form-control">
            <div class="display-grid grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-15 align-items-center form-group margin-0">
                <label class="margin-0">Checkbox</label>
                <label class="checkbox" tabindex="0">
                    <input type="checkbox" class="">
                    <span class="checkbox-text">
                        <span>Yet another level of nesting</span>
                    </span>
                </label>
            </div>
        </section>
        <footer class="display-flex grid-colspan-2 justify-content-between align-items-center">
            <div class="uikit-switch">
                <label class="switch-label uikit-switch label-position-right">
                    <input type="checkbox" class="switch-input" checked="">
                    <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                        <div class="switch-handle">
                        </div>
                    </div>
                    <div class="switch-text-wrapper user-select-none padding-top-1">Subgrid enabled</div>
                </label>
            </div>
            <button type="button" class="btn btn-default btn-component" tabindex="0">Submit</button>
        </footer>
    </form>
</div>
```

#### Classes (css)

```css
grid-cols-subgrid
```

### Example: Example 61

Full Name Email Message

Subgrid enabled
Submit

#### HTML (html)

```html
<div class="max-width-500">
    <form class="display-grid grid-cols-2-max-content-1fr gap-15">
        <label class="margin-0 display-grid grid-cols-subgrid grid-colspan-2 align-items-center form-group margin-0" for="subgrid2-name">
            <span>Full Name</span>
            <input id="subgrid2-name" type="text" class="form-control">
        </label>
        <label class="margin-0 display-grid grid-cols-subgrid grid-colspan-2 align-items-center form-group margin-0" for="subgrid2-email">
            <span>Email</span>
            <input id="subgrid2-email" type="text" class="form-control">
        </label>
        <label class="margin-0 display-grid grid-cols-subgrid grid-colspan-2 form-group margin-0" for="subgrid2-text">
            <span>Message</span>
            <textarea id="subgrid2-text" class="form-control">
</textarea>
        </label>
        <footer class="grid-column-start-2 display-flex justify-content-between align-items-center">
            <div class="uikit-switch">
                <label class="switch-label uikit-switch label-position-right">
                    <input type="checkbox" class="switch-input" checked="">
                    <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                        <div class="switch-handle">
                        </div>
                    </div>
                    <div class="switch-text-wrapper user-select-none padding-top-1">Subgrid enabled</div>
                </label>
            </div>
            <button type="button" class="btn btn-default btn-component" tabindex="0">Submit</button>
        </footer>
    </form>
</div>
```

#### Classes (css)

```css
grid-cols-subgrid
```

### Example: Example 62

Subgrid Cards
Article title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla? Consectetur adipisci illum ipsa reprehenderit deleniti quia qui aliquid tempora ea accusamus. Quibusdam.
by Mia at Company Love it
Article title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla?
by Mia at Company Love it
What if we have a much longer article title?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eveniet, tempore error maxime praesentium eos.
by Jen "Boss" Simmons at Company Love it so
Article titles aren't consistent
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.
by Deja "Empathic Dev" Hodge at Company Love it
This article title will need to be fixed in Post-Production with a much shorter and catchier click-bait title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.
by Ryanne "Fix It In Post" Hodson at Company Love it
Short title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio enim maxime repellat illo!
by Jay "Do It" Dedman at Company Love it

Subgrid enabled

#### HTML (html)

```html
<div class="max-width-800 display-flex flex-column gap-20">
    <div class="text-size-h4 text-color-darker">Subgrid Cards</div>
    <div class="display-grid grid-cols-1-xs grid-cols-4-1fr-max-content gap-15">
        <article class="panel panel-default display-grid grid-cols-subgrid grid-colspan-2 grid-rowspan-3 grid-rows-subgrid row-gap-0">
            <div class="panel-heading grid-colspan-2 text-size-h6 text-medium text-color-darker">Article title</div>
            <div class="panel-body grid-colspan-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla? Consectetur adipisci illum ipsa reprehenderit deleniti quia qui aliquid tempora ea accusamus. Quibusdam.</div>
            <p class="align-self-center margin-x-15">
                <span>by <a href="#">Mia</a>
                </span>
                <span> at <a href="#">Company</a>
                </span>
            </p>
            <button type="button" class="btn btn-default btn-component margin-15" tabindex="0">Love it</button>
        </article>
        <article class="panel panel-default display-grid grid-cols-subgrid grid-colspan-2 grid-rowspan-3 grid-rows-subgrid row-gap-0">
            <div class="panel-heading grid-colspan-2 text-size-h6 text-medium text-color-darker">Article title</div>
            <div class="panel-body grid-colspan-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla?</div>
            <p class="align-self-center margin-x-15">
                <span>by <a href="#">Mia</a>
                </span>
                <span> at <a href="#">Company</a>
                </span>
            </p>
            <button type="button" class="btn btn-default btn-component margin-15" tabindex="0">Love it</button>
        </article>
        <article class="panel panel-default display-grid grid-cols-subgrid grid-colspan-2 grid-rowspan-3 grid-rows-subgrid row-gap-0">
            <div class="panel-heading grid-colspan-2 text-size-h6 text-medium text-color-darker">What if we have a much longer article title?</div>
            <div class="panel-body grid-colspan-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eveniet, tempore error maxime praesentium eos.</div>
            <p class="align-self-center margin-x-15">
                <span>by <a href="#">Jen "Boss" Simmons</a>
                </span>
                <span> at <a href="#">Company</a>
                </span>
            </p>
            <button type="button" class="btn btn-default btn-component margin-15" tabindex="0">Love it so</button>
        </article>
        <article class="panel panel-default display-grid grid-cols-subgrid grid-colspan-2 grid-rowspan-3 grid-rows-subgrid row-gap-0">
            <div class="panel-heading grid-colspan-2 text-size-h6 text-medium text-color-darker">Article titles aren't consistent</div>
            <div class="panel-body grid-colspan-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.</div>
            <p class="align-self-center margin-x-15">
                <span>by <a href="#">Deja "Empathic Dev" Hodge</a>
                </span>
                <span> at <a href="#">Company</a>
                </span>
            </p>
            <button type="button" class="btn btn-default btn-component margin-15" tabindex="0">Love it</button>
        </article>
        <article class="panel panel-default display-grid grid-cols-subgrid grid-colspan-2 grid-rowspan-3 grid-rows-subgrid row-gap-0">
            <div class="panel-heading grid-colspan-2 text-size-h6 text-medium text-color-darker">This article title will need to be fixed in Post-Production with a much shorter and catchier click-bait title</div>
            <div class="panel-body grid-colspan-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.</div>
            <p class="align-self-center margin-x-15">
                <span>by <a href="#">Ryanne "Fix It In Post" Hodson</a>
                </span>
                <span> at <a href="#">Company</a>
                </span>
            </p>
            <button type="button" class="btn btn-default btn-component margin-15" tabindex="0">Love it</button>
        </article>
        <article class="panel panel-default display-grid grid-cols-subgrid grid-colspan-2 grid-rowspan-3 grid-rows-subgrid row-gap-0">
            <div class="panel-heading grid-colspan-2 text-size-h6 text-medium text-color-darker">Short title</div>
            <div class="panel-body grid-colspan-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio enim maxime repellat illo!</div>
            <p class="align-self-center margin-x-15">
                <span>by <a href="#">Jay "Do It" Dedman</a>
                </span>
                <span> at <a href="#">Company</a>
                </span>
            </p>
            <button type="button" class="btn btn-default btn-component margin-15" tabindex="0">Love it</button>
        </article>
    </div>
    <div class="uikit-switch">
        <label class="switch-label uikit-switch label-position-right">
            <input type="checkbox" class="switch-input" checked="">
            <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                <div class="switch-handle">
                </div>
            </div>
            <div class="switch-text-wrapper user-select-none padding-top-1">Subgrid enabled</div>
        </label>
    </div>
</div>
```

#### Classes (css)

```css
grid-cols-subgrid
```

## Position

Spacing

### Example: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### HTML (html)

```html
<div>
    <div class="panel panel-default panel-body position-relative">
        <button class="btn btn-link btn-icon-only position-absolute top-10 right-10">
            <span class="rioglyph rioglyph-cog" aria-hidden="true">
            </span>
        </button>
        <h3 class="margin-top-0 margin-bottom-10">Lorem ipsum dolor sit amet</h3>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
    </div>
</div>
```

#### Classes (css)

```css
position-relative
```

## Gap

Gap classes can be used for flexbox and grid layouts.

> Note: Since using a percentage vertical gap requires a fixed height of the wrapping element, we decided to offer only horizontal percentage gap classes. Vertical gap in px is of course possible.

### Example: Example 64

gap-0
gap-0
gap-0

gap-1
gap-1
gap-1

gap-2
gap-2
gap-2

gap-3
gap-3
gap-3

gap-4
gap-4
gap-4

gap-5
gap-5
gap-5

gap-10
gap-10
gap-10

gap-15
gap-15
gap-15

gap-20
gap-20
gap-20

gap-25
gap-25
gap-25

gap-50
gap-50
gap-50

#### HTML (html)

```html
<div class="display-grid grid-cols-1 gap-10">
    <div class="display-grid grid-cols-3 gap-0">
        <div class="bg-info padding-10 rounded">gap-0</div>
        <div class="bg-info padding-10 rounded">gap-0</div>
        <div class="bg-info padding-10 rounded">gap-0</div>
    </div>
    <div class="display-grid grid-cols-3 gap-1">
        <div class="bg-info padding-10 rounded">gap-1</div>
        <div class="bg-info padding-10 rounded">gap-1</div>
        <div class="bg-info padding-10 rounded">gap-1</div>
    </div>
    <div class="display-grid grid-cols-3 gap-2">
        <div class="bg-info padding-10 rounded">gap-2</div>
        <div class="bg-info padding-10 rounded">gap-2</div>
        <div class="bg-info padding-10 rounded">gap-2</div>
    </div>
    <div class="display-grid grid-cols-3 gap-3">
        <div class="bg-info padding-10 rounded">gap-3</div>
        <div class="bg-info padding-10 rounded">gap-3</div>
        <div class="bg-info padding-10 rounded">gap-3</div>
    </div>
    <div class="display-grid grid-cols-3 gap-4">
        <div class="bg-info padding-10 rounded">gap-4</div>
        <div class="bg-info padding-10 rounded">gap-4</div>
        <div class="bg-info padding-10 rounded">gap-4</div>
    </div>
    <div class="display-grid grid-cols-3 gap-5">
        <div class="bg-info padding-10 rounded">gap-5</div>
        <div class="bg-info padding-10 rounded">gap-5</div>
        <div class="bg-info padding-10 rounded">gap-5</div>
    </div>
    <div class="display-grid grid-cols-3 gap-10">
        <div class="bg-info padding-10 rounded">gap-10</div>
        <div class="bg-info padding-10 rounded">gap-10</div>
        <div class="bg-info padding-10 rounded">gap-10</div>
    </div>
    <div class="display-grid grid-cols-3 gap-15">
        <div class="bg-info padding-10 rounded">gap-15</div>
        <div class="bg-info padding-10 rounded">gap-15</div>
        <div class="bg-info padding-10 rounded">gap-15</div>
    </div>
    <div class="display-grid grid-cols-3 gap-20">
        <div class="bg-info padding-10 rounded">gap-20</div>
        <div class="bg-info padding-10 rounded">gap-20</div>
        <div class="bg-info padding-10 rounded">gap-20</div>
    </div>
    <div class="display-grid grid-cols-3 gap-25">
        <div class="bg-info padding-10 rounded">gap-25</div>
        <div class="bg-info padding-10 rounded">gap-25</div>
        <div class="bg-info padding-10 rounded">gap-25</div>
    </div>
    <div class="display-grid grid-cols-3 gap-50">
        <div class="bg-info padding-10 rounded">gap-50</div>
        <div class="bg-info padding-10 rounded">gap-50</div>
        <div class="bg-info padding-10 rounded">gap-50</div>
    </div>
</div>
```

#### Classes (css)

```css
gap-0
```

## Space

Space between child elements of non-flex and non-grid solutions.

> Note: For flex or grid solutions please use gap instead.

### Example: Example 65

space-y-0
space-y-0
space-y-0

space-y-1
space-y-1
space-y-1

space-y-2
space-y-2
space-y-2

space-y-3
space-y-3
space-y-3

space-y-4
space-y-4
space-y-4

space-y-5
space-y-5
space-y-5

space-y-10
space-y-10
space-y-10

space-y-15
space-y-15
space-y-15

space-y-20
space-y-20
space-y-20

space-y-25
space-y-25
space-y-25

space-y-50
space-y-50
space-y-50

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-10">
    <div class="space-y-0">
        <div class="bg-info padding-10 rounded">space-y-0</div>
        <div class="bg-info padding-10 rounded">space-y-0</div>
        <div class="bg-info padding-10 rounded">space-y-0</div>
    </div>
    <div class="space-y-1">
        <div class="bg-info padding-10 rounded">space-y-1</div>
        <div class="bg-info padding-10 rounded">space-y-1</div>
        <div class="bg-info padding-10 rounded">space-y-1</div>
    </div>
    <div class="space-y-2">
        <div class="bg-info padding-10 rounded">space-y-2</div>
        <div class="bg-info padding-10 rounded">space-y-2</div>
        <div class="bg-info padding-10 rounded">space-y-2</div>
    </div>
    <div class="space-y-3">
        <div class="bg-info padding-10 rounded">space-y-3</div>
        <div class="bg-info padding-10 rounded">space-y-3</div>
        <div class="bg-info padding-10 rounded">space-y-3</div>
    </div>
    <div class="space-y-4">
        <div class="bg-info padding-10 rounded">space-y-4</div>
        <div class="bg-info padding-10 rounded">space-y-4</div>
        <div class="bg-info padding-10 rounded">space-y-4</div>
    </div>
    <div class="space-y-5">
        <div class="bg-info padding-10 rounded">space-y-5</div>
        <div class="bg-info padding-10 rounded">space-y-5</div>
        <div class="bg-info padding-10 rounded">space-y-5</div>
    </div>
    <div class="space-y-10">
        <div class="bg-info padding-10 rounded">space-y-10</div>
        <div class="bg-info padding-10 rounded">space-y-10</div>
        <div class="bg-info padding-10 rounded">space-y-10</div>
    </div>
    <div class="space-y-15">
        <div class="bg-info padding-10 rounded">space-y-15</div>
        <div class="bg-info padding-10 rounded">space-y-15</div>
        <div class="bg-info padding-10 rounded">space-y-15</div>
    </div>
    <div class="space-y-20">
        <div class="bg-info padding-10 rounded">space-y-20</div>
        <div class="bg-info padding-10 rounded">space-y-20</div>
        <div class="bg-info padding-10 rounded">space-y-20</div>
    </div>
    <div class="space-y-25">
        <div class="bg-info padding-10 rounded">space-y-25</div>
        <div class="bg-info padding-10 rounded">space-y-25</div>
        <div class="bg-info padding-10 rounded">space-y-25</div>
    </div>
    <div class="space-y-50">
        <div class="bg-info padding-10 rounded">space-y-50</div>
        <div class="bg-info padding-10 rounded">space-y-50</div>
        <div class="bg-info padding-10 rounded">space-y-50</div>
    </div>
</div>
```

#### Classes (css)

```css
space-x-0
```

## Margin

### Example: Example 66

Surrouding

margin-0

margin-1

margin-2

margin-3

margin-4

margin-5

margin-10

margin-15

margin-20

margin-25

margin-50

Horizontal

margin-x-0

margin-x-1

margin-x-2

margin-x-3

margin-x-4

margin-x-5

margin-x-10

margin-x-15

margin-x-20

margin-x-25

margin-x-50

Vertical

margin-y-0

margin-y-1

margin-y-2

margin-y-3

margin-y-4

margin-y-5

margin-y-10

margin-y-15

margin-y-20

margin-y-25

margin-y-50

Left

margin-left-0

margin-left-1

margin-left-2

margin-left-3

margin-left-4

margin-left-5

margin-left-10

margin-left-15

margin-left-20

margin-left-25

margin-left-50

Right

margin-right-0

margin-right-1

margin-right-2

margin-right-3

margin-right-4

margin-right-5

margin-right-10

margin-right-15

margin-right-20

margin-right-25

margin-right-50

Top

margin-top-0

margin-top-1

margin-top-2

margin-top-3

margin-top-4

margin-top-5

margin-top-10

margin-top-15

margin-top-20

margin-top-25

margin-top-50

Bottom

margin-bottom-0

margin-bottom-1

margin-bottom-2

margin-bottom-3

margin-bottom-4

margin-bottom-5

margin-bottom-10

margin-bottom-15

margin-bottom-20

margin-bottom-25

margin-bottom-50

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-4-md grid-cols-7-lg gap-20">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Surrouding</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-0 padding-2 text-center bg-info rounded">margin-0</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-1 padding-2 text-center bg-info rounded">margin-1</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-2 padding-2 text-center bg-info rounded">margin-2</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-3 padding-2 text-center bg-info rounded">margin-3</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-4 padding-2 text-center bg-info rounded">margin-4</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-5 padding-2 text-center bg-info rounded">margin-5</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-10 padding-2 text-center bg-info rounded">margin-10</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-15 padding-2 text-center bg-info rounded">margin-15</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-20 padding-2 text-center bg-info rounded">margin-20</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-25 padding-2 text-center bg-info rounded">margin-25</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-50 padding-2 text-center bg-info rounded">margin-50</div>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Horizontal</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-0 padding-2 text-center bg-info rounded">margin-x-0</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-1 padding-2 text-center bg-info rounded">margin-x-1</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-2 padding-2 text-center bg-info rounded">margin-x-2</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-3 padding-2 text-center bg-info rounded">margin-x-3</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-4 padding-2 text-center bg-info rounded">margin-x-4</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-5 padding-2 text-center bg-info rounded">margin-x-5</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-10 padding-2 text-center bg-info rounded">margin-x-10</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-15 padding-2 text-center bg-info rounded">margin-x-15</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-20 padding-2 text-center bg-info rounded">margin-x-20</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-25 padding-2 text-center bg-info rounded">margin-x-25</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-x-50 padding-2 text-center bg-info rounded">margin-x-50</div>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Vertical</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-0 padding-2 text-center bg-info rounded">margin-y-0</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-1 padding-2 text-center bg-info rounded">margin-y-1</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-2 padding-2 text-center bg-info rounded">margin-y-2</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-3 padding-2 text-center bg-info rounded">margin-y-3</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-4 padding-2 text-center bg-info rounded">margin-y-4</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-5 padding-2 text-center bg-info rounded">margin-y-5</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-10 padding-2 text-center bg-info rounded">margin-y-10</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-15 padding-2 text-center bg-info rounded">margin-y-15</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-20 padding-2 text-center bg-info rounded">margin-y-20</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-25 padding-2 text-center bg-info rounded">margin-y-25</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-y-50 padding-2 text-center bg-info rounded">margin-y-50</div>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Left</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-0 padding-2 text-center bg-info rounded">margin-left-0</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-1 padding-2 text-center bg-info rounded">margin-left-1</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-2 padding-2 text-center bg-info rounded">margin-left-2</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-3 padding-2 text-center bg-info rounded">margin-left-3</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-4 padding-2 text-center bg-info rounded">margin-left-4</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-5 padding-2 text-center bg-info rounded">margin-left-5</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-10 padding-2 text-center bg-info rounded">margin-left-10</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-15 padding-2 text-center bg-info rounded">margin-left-15</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-20 padding-2 text-center bg-info rounded">margin-left-20</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-25 padding-2 text-center bg-info rounded">margin-left-25</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-left-50 padding-2 text-center bg-info rounded">margin-left-50</div>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Right</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-0 padding-2 text-center bg-info rounded">margin-right-0</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-1 padding-2 text-center bg-info rounded">margin-right-1</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-2 padding-2 text-center bg-info rounded">margin-right-2</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-3 padding-2 text-center bg-info rounded">margin-right-3</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-4 padding-2 text-center bg-info rounded">margin-right-4</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-5 padding-2 text-center bg-info rounded">margin-right-5</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-10 padding-2 text-center bg-info rounded">margin-right-10</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-15 padding-2 text-center bg-info rounded">margin-right-15</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-20 padding-2 text-center bg-info rounded">margin-right-20</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-25 padding-2 text-center bg-info rounded">margin-right-25</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-right-50 padding-2 text-center bg-info rounded">margin-right-50</div>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Top</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-0 padding-2 text-center bg-info rounded">margin-top-0</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-1 padding-2 text-center bg-info rounded">margin-top-1</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-2 padding-2 text-center bg-info rounded">margin-top-2</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-3 padding-2 text-center bg-info rounded">margin-top-3</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-4 padding-2 text-center bg-info rounded">margin-top-4</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-5 padding-2 text-center bg-info rounded">margin-top-5</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-10 padding-2 text-center bg-info rounded">margin-top-10</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-15 padding-2 text-center bg-info rounded">margin-top-15</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-20 padding-2 text-center bg-info rounded">margin-top-20</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-25 padding-2 text-center bg-info rounded">margin-top-25</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-top-50 padding-2 text-center bg-info rounded">margin-top-50</div>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Bottom</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-0 padding-2 text-center bg-info rounded">margin-bottom-0</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-1 padding-2 text-center bg-info rounded">margin-bottom-1</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-2 padding-2 text-center bg-info rounded">margin-bottom-2</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-3 padding-2 text-center bg-info rounded">margin-bottom-3</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-4 padding-2 text-center bg-info rounded">margin-bottom-4</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-5 padding-2 text-center bg-info rounded">margin-bottom-5</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-10 padding-2 text-center bg-info rounded">margin-bottom-10</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-15 padding-2 text-center bg-info rounded">margin-bottom-15</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-20 padding-2 text-center bg-info rounded">margin-bottom-20</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-25 padding-2 text-center bg-info rounded">margin-bottom-25</div>
            </div>
        </div>
        <div class="display-flex justify-content-center margin-bottom-2">
            <div class="rounded shorthand-style">
                <div class="margin-bottom-50 padding-2 text-center bg-info rounded">margin-bottom-50</div>
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
margin-auto
```

## Margin helper

### Example: Example 67

Last child (self class)

Child
Child
Child
Child
Child

Last child (parent class)

Child
Child
Child
Child
Child

First child (self class)

Child
Child
Child
Child
Child

First child (parent class)

Child
Child
Child
Child
Child

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-4-sm gap-20">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Last child (self class)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Last child (parent class)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="children-last-margin-bottom-0">
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>First child (self class)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div>
            <div class="margin-top-10 first-child-margin-top-0 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-top-10 first-child-margin-top-0 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-top-10 first-child-margin-top-0 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-top-10 first-child-margin-top-0 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-top-10 first-child-margin-top-0 padding-2 text-center rounded bg-info">Child</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>First child (parent class)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="children-first-margin-top-0">
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
            <div class="margin-bottom-10 padding-2 text-center rounded bg-info">Child</div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
children-first-margin-top-0
```

## Padding

Sizing

### Example: Example 68

Surrouding

padding-0

padding-1

padding-2

padding-3

padding-4

padding-5

padding-10

padding-15

padding-20

padding-25

padding-50

Horizontal

padding-x-0

padding-x-1

padding-x-2

padding-x-3

padding-x-4

padding-x-5

padding-x-10

padding-x-15

padding-x-20

padding-x-25

padding-x-50

Vertical

padding-y-0

padding-y-1

padding-y-2

padding-y-3

padding-y-4

padding-y-5

padding-y-10

padding-y-15

padding-y-20

padding-y-25

padding-y-50

Left

padding-left-0

padding-left-1

padding-left-2

padding-left-3

padding-left-4

padding-left-5

padding-left-10

padding-left-15

padding-left-20

padding-left-25

padding-left-50

Right

padding-right-0

padding-right-1

padding-right-2

padding-right-3

padding-right-4

padding-right-5

padding-right-10

padding-right-15

padding-right-20

padding-right-25

padding-right-50

Top

padding-top-0

padding-top-1

padding-top-2

padding-top-3

padding-top-4

padding-top-5

padding-top-10

padding-top-15

padding-top-20

padding-top-25

padding-top-50

Bottom

padding-bottom-0

padding-bottom-1

padding-bottom-2

padding-bottom-3

padding-bottom-4

padding-bottom-5

padding-bottom-10

padding-bottom-15

padding-bottom-20

padding-bottom-25

padding-bottom-50

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-4-sm grid-cols-7-lg gap-20">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Surrouding</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-0 margin-bottom-5 text-center bg-info rounded">padding-0</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-1 margin-bottom-5 text-center bg-info rounded">padding-1</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-2 margin-bottom-5 text-center bg-info rounded">padding-2</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-3 margin-bottom-5 text-center bg-info rounded">padding-3</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-4 margin-bottom-5 text-center bg-info rounded">padding-4</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-5 margin-bottom-5 text-center bg-info rounded">padding-5</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-10 margin-bottom-5 text-center bg-info rounded">padding-10</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-15 margin-bottom-5 text-center bg-info rounded">padding-15</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-20 margin-bottom-5 text-center bg-info rounded">padding-20</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-25 margin-bottom-5 text-center bg-info rounded">padding-25</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-50 margin-bottom-5 text-center bg-info rounded">padding-50</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Horizontal</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-0 margin-bottom-5 text-center bg-info rounded">padding-x-0</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-1 margin-bottom-5 text-center bg-info rounded">padding-x-1</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-2 margin-bottom-5 text-center bg-info rounded">padding-x-2</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-3 margin-bottom-5 text-center bg-info rounded">padding-x-3</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-4 margin-bottom-5 text-center bg-info rounded">padding-x-4</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-5 margin-bottom-5 text-center bg-info rounded">padding-x-5</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-10 margin-bottom-5 text-center bg-info rounded">padding-x-10</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-15 margin-bottom-5 text-center bg-info rounded">padding-x-15</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-20 margin-bottom-5 text-center bg-info rounded">padding-x-20</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-25 margin-bottom-5 text-center bg-info rounded">padding-x-25</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-x-50 margin-bottom-5 text-center bg-info rounded">padding-x-50</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Vertical</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-0 margin-bottom-5 text-center bg-info rounded">padding-y-0</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-1 margin-bottom-5 text-center bg-info rounded">padding-y-1</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-2 margin-bottom-5 text-center bg-info rounded">padding-y-2</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-3 margin-bottom-5 text-center bg-info rounded">padding-y-3</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-4 margin-bottom-5 text-center bg-info rounded">padding-y-4</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-5 margin-bottom-5 text-center bg-info rounded">padding-y-5</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-10 margin-bottom-5 text-center bg-info rounded">padding-y-10</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-15 margin-bottom-5 text-center bg-info rounded">padding-y-15</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-20 margin-bottom-5 text-center bg-info rounded">padding-y-20</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-25 margin-bottom-5 text-center bg-info rounded">padding-y-25</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-y-50 margin-bottom-5 text-center bg-info rounded">padding-y-50</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Left</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-0 margin-bottom-5 bg-info rounded">padding-left-0</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-1 margin-bottom-5 bg-info rounded">padding-left-1</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-2 margin-bottom-5 bg-info rounded">padding-left-2</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-3 margin-bottom-5 bg-info rounded">padding-left-3</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-4 margin-bottom-5 bg-info rounded">padding-left-4</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-5 margin-bottom-5 bg-info rounded">padding-left-5</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-10 margin-bottom-5 bg-info rounded">padding-left-10</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-15 margin-bottom-5 bg-info rounded">padding-left-15</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-20 margin-bottom-5 bg-info rounded">padding-left-20</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-25 margin-bottom-5 bg-info rounded">padding-left-25</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-left-50 margin-bottom-5 bg-info rounded">padding-left-50</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Right</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-0 margin-bottom-5 text-right bg-info rounded">padding-right-0</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-1 margin-bottom-5 text-right bg-info rounded">padding-right-1</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-2 margin-bottom-5 text-right bg-info rounded">padding-right-2</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-3 margin-bottom-5 text-right bg-info rounded">padding-right-3</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-4 margin-bottom-5 text-right bg-info rounded">padding-right-4</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-5 margin-bottom-5 text-right bg-info rounded">padding-right-5</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-10 margin-bottom-5 text-right bg-info rounded">padding-right-10</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-15 margin-bottom-5 text-right bg-info rounded">padding-right-15</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-20 margin-bottom-5 text-right bg-info rounded">padding-right-20</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-25 margin-bottom-5 text-right bg-info rounded">padding-right-25</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-right-50 margin-bottom-5 text-right bg-info rounded">padding-right-50</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Top</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-0 margin-bottom-5 text-center bg-info rounded">padding-top-0</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-1 margin-bottom-5 text-center bg-info rounded">padding-top-1</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-2 margin-bottom-5 text-center bg-info rounded">padding-top-2</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-3 margin-bottom-5 text-center bg-info rounded">padding-top-3</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-4 margin-bottom-5 text-center bg-info rounded">padding-top-4</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-5 margin-bottom-5 text-center bg-info rounded">padding-top-5</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-10 margin-bottom-5 text-center bg-info rounded">padding-top-10</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-15 margin-bottom-5 text-center bg-info rounded">padding-top-15</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-20 margin-bottom-5 text-center bg-info rounded">padding-top-20</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-25 margin-bottom-5 text-center bg-info rounded">padding-top-25</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-top-50 margin-bottom-5 text-center bg-info rounded">padding-top-50</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Bottom</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-0 margin-bottom-5 text-center bg-info rounded">padding-bottom-0</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-1 margin-bottom-5 text-center bg-info rounded">padding-bottom-1</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-2 margin-bottom-5 text-center bg-info rounded">padding-bottom-2</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-3 margin-bottom-5 text-center bg-info rounded">padding-bottom-3</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-4 margin-bottom-5 text-center bg-info rounded">padding-bottom-4</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-5 margin-bottom-5 text-center bg-info rounded">padding-bottom-5</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-10 margin-bottom-5 text-center bg-info rounded">padding-bottom-10</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-15 margin-bottom-5 text-center bg-info rounded">padding-bottom-15</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-20 margin-bottom-5 text-center bg-info rounded">padding-bottom-20</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-25 margin-bottom-5 text-center bg-info rounded">padding-bottom-25</div>
        </div>
        <div class="display-flex justify-content-center">
            <div class="padding-bottom-50 margin-bottom-5 text-center bg-info rounded">padding-bottom-50</div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
padding-0
```

## Height

### Example: Example 69



#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-5-sm gap-20">
    <div class="bg-info rounded height-20">
    </div>
    <div class="bg-info rounded height-40">
    </div>
    <div class="bg-info rounded height-60">
    </div>
    <div class="bg-info rounded height-80">
    </div>
    <div class="bg-info rounded height-100">
    </div>
</div>
```

#### Classes (css)

```css
height-auto
```

## Width

### Example: Example 70

30px
35px
40px
45px
50px
60px
70px
80px
90px
100px

10pct
20pct
25pct
30pct
33pct
40pct
50pct
60pct
66pct
70pct
75pct
80pct
90pct
100pct

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-20 margin-bottom-25">
    <div class="bg-info rounded height-20 text-center width-0">
    </div>
    <div class="bg-info rounded height-20 text-center width-1">
    </div>
    <div class="bg-info rounded height-20 text-center width-2">
    </div>
    <div class="bg-info rounded height-20 text-center width-3">
    </div>
    <div class="bg-info rounded height-20 text-center width-4">
    </div>
    <div class="bg-info rounded height-20 text-center width-5">
    </div>
    <div class="bg-info rounded height-20 text-center width-10">
    </div>
    <div class="bg-info rounded height-20 text-center width-15">
    </div>
    <div class="bg-info rounded height-20 text-center width-20">
    </div>
    <div class="bg-info rounded height-20 text-center width-25">
    </div>
    <div class="bg-info rounded height-20 text-center width-30">30px</div>
    <div class="bg-info rounded height-20 text-center width-35">35px</div>
    <div class="bg-info rounded height-20 text-center width-40">40px</div>
    <div class="bg-info rounded height-20 text-center width-45">45px</div>
    <div class="bg-info rounded height-20 text-center width-50">50px</div>
    <div class="bg-info rounded height-20 text-center width-60">60px</div>
    <div class="bg-info rounded height-20 text-center width-70">70px</div>
    <div class="bg-info rounded height-20 text-center width-80">80px</div>
    <div class="bg-info rounded height-20 text-center width-90">90px</div>
    <div class="bg-info rounded height-20 text-center width-100">100px</div>
</div>
<div class="display-grid grid-cols-1 gap-5">
    <div class="bg-info rounded padding-5 width-10pct">10pct</div>
    <div class="bg-info rounded padding-5 width-20pct">20pct</div>
    <div class="bg-info rounded padding-5 width-25pct">25pct</div>
    <div class="bg-info rounded padding-5 width-30pct">30pct</div>
    <div class="bg-info rounded padding-5 width-33pct">33pct</div>
    <div class="bg-info rounded padding-5 width-40pct">40pct</div>
    <div class="bg-info rounded padding-5 width-50pct">50pct</div>
    <div class="bg-info rounded padding-5 width-60pct">60pct</div>
    <div class="bg-info rounded padding-5 width-66pct">66pct</div>
    <div class="bg-info rounded padding-5 width-70pct">70pct</div>
    <div class="bg-info rounded padding-5 width-75pct">75pct</div>
    <div class="bg-info rounded padding-5 width-80pct">80pct</div>
    <div class="bg-info rounded padding-5 width-90pct">90pct</div>
    <div class="bg-info rounded padding-5 width-100pct">100pct</div>
</div>
```

#### Classes (css)

```css
width-auto
```

## Content based min-width

The min-width property defines the smallest width an element can shrink to. When using keywords like max-content, min-content, orfit-content, you tell the browser how the element should behave in relation to its content size. These values are especially useful in responsive layouts or flexible components where content-driven sizing is required.

- min-width-min-content The element’s minimum width becomes the smallest possible width without causing content overflow. It allows text wrapping, meaning the element will compress as much as possible while still displaying all content correctly.
- min-width-max-content The element’s minimum width equals the longest unbreakable line of its content. It prevents text or inline items from wrapping, forcing the box to expand horizontally to fit the entire content in one line. This may cause overflow if the content is too wide for its container.
- min-width-fit-content This is a hybrid behavior — the element adapts its width somewhere betweenmin-content and max-content. The browser decides the best fit for the available space, making it suitable for adaptive or flexible layouts.

| Property | Description | Allows wrapping | Typical use |
| --- | --- | --- | --- |
| min-content | Shrinks to the smallest possible width without overflowing. | Yes | Compress content safely |
| max-content | Expands to fit all content on a single line without wrapping. | No | Prevent text breaking or wrapping |
| fit-content | Balances between min-content and max-content; adapts naturally. | Yes | Adaptive layouts |

Navigation

### Example: Example 71

max-content This_is_a_really_long_word_that_will_not_break.

min-content This is a really long text that will break and wrap.

fit-content This text fits naturally within the box.

#### HTML (html)

```html
<div class="display-flex flex-column-xs gap-20 bg-lightest padding-20 rounded" style="max-width: 520px;">
    <div class="bg-info padding-10 rounded min-width-max-content border">
        <b>max-content</b>
        <p class="max-width-150">This_is_a_really_long_word_that_will_not_break.</p>
    </div>
    <div class="bg-info padding-10 rounded min-width-min-content border">
        <b>min-content</b>
        <p class="max-width-150">This is a really long text that will break and wrap.</p>
    </div>
    <div class="bg-info padding-10 rounded min-width-fit-content border">
        <b>fit-content</b>
        <p class="max-width-150">This text fits naturally within the box.</p>
    </div>
</div>
```

#### Classes (css)

```css
width-auto
```

## Breadcrumb

### Example: Example 72

level 1
level 2
level 3
level 4

#### HTML (html)

```html
<ul class="breadcrumb">
    <li>
        <span class="btn btn-link btn-link-inline">
            <span class="rioglyph rioglyph-home margin-right-0">
            </span>
        </span>
    </li>
    <li>
        <span class="link">level 1</span>
    </li>
    <li>
        <span class="link">level 2</span>
    </li>
    <li>
        <span class="link">level 3</span>
    </li>
    <li class="active">level 4</li>
</ul>
```

## Pager

> See Pager for the actual React component.

### Example: Example 73

Pager with label

Previous
The previous chapter

Next
The next chapter

Compact Pager without label

Previous

Next

#### HTML (html)

```html
<div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Pager with label</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex gap-15 max-width-800 margin-bottom-50">
        <div class="Pager bg-white border display-flex justify-space-between align-items-center flex-row-reverse cursor-pointer user-select-none rounded padding-y-15 padding-x-20 width-100pct">
            <div class="display-flex flex-1-1 flex-column align-items-end">
                <div class="text-color-gray line-height-16">Previous</div>
                <div class="text-color-darker text-right text-size-16 text-medium">The previous chapter</div>
            </div>
            <div class="text-size-12 display-grid place-items-center">
                <span class="rioglyph text-color-darker rioglyph-arrow-left margin-right-10 text-size-200pct">
                </span>
            </div>
        </div>
        <div class="Pager bg-white border display-flex justify-space-between align-items-center cursor-pointer user-select-none rounded padding-y-15 padding-x-20 width-100pct">
            <div class="display-flex flex-1-1 flex-column ">
                <div class="text-color-gray line-height-16">Next</div>
                <div class="text-color-darker text-size-16 text-medium">The next chapter</div>
            </div>
            <div class="text-size-12 display-grid place-items-center">
                <span class="rioglyph text-color-darker rioglyph-arrow-right margin-left-10 text-size-200pct">
                </span>
            </div>
        </div>
    </div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Compact Pager without label</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex gap-15 max-width-800 justify-content-between">
        <div class="Pager bg-white border display-flex justify-space-between align-items-center flex-row-reverse pointer-events-none cursor-pointer user-select-none rounded-circle padding-y-5 padding-x-15 width-auto">
            <div class="display-flex flex-1-1 flex-column align-items-end">
                <div class="text-color-light">Previous</div>
            </div>
            <span class="rioglyph text-color-light rioglyph-chevron-left margin-right-5 text-size-10">
            </span>
        </div>
        <div class="Pager bg-white border display-flex justify-space-between align-items-center cursor-pointer user-select-none rounded-circle padding-y-5 padding-x-15 width-auto">
            <div class="display-flex flex-1-1 flex-column ">
                <div class="text-color-darker">Next</div>
            </div>
            <span class="rioglyph text-color-darker rioglyph-chevron-right margin-left-5 text-size-10">
            </span>
        </div>
    </div>
</div>
```

## Pagination

### Example: Usage

1
2
3
4
5

Usage
Use pagination buttons only for UI elements that benefit from stepping through discrete content pages, such as: Image carousels – where users navigate through multiple slides or multi-step flows – to guide users through a process one step at a time.
Not for Tables
Tables should use a “ Load more ” button instead of pagination.
Why "Load more" is preferred
Continuous scanning:
Users can scroll down and view more data without breaking flow.
Less disruption:
Avoids jarring page reloads or resets when switching pages.
Improved comparability:
All previously loaded data stays in view, enabling easier side-by-side comparison of rows.
Less cognitive load:
Users rarely remember what was on “Page 6”, especially when rows are changing. Sequential pages interrupt scanning and exploration.
No page size UI:
You don’t need to offer dropdowns for rows per page, reducing UI clutter.

#### HTML (html)

```html
<div>
    <div class="display-flex gap-50 flex-wrap">
        <ul class="pagination">
            <li class="disabled">
                <span class="rioglyph rioglyph-chevron-left">
                </span>
            </li>
            <li>
                <span>1</span>
            </li>
            <li class="active">
                <span>2</span>
            </li>
            <li>
                <span>3</span>
            </li>
            <li>
                <span>4</span>
            </li>
            <li>
                <span>5</span>
            </li>
            <li>
                <span class="rioglyph rioglyph-chevron-right">
                </span>
            </li>
        </ul>
        <ul class="pagination">
            <li class="disabled">
                <span class="rioglyph rioglyph-chevron-left">
                </span>
            </li>
            <li>
            </li>
            <li>
            </li>
            <li class="active">
            </li>
            <li>
            </li>
            <li>
            </li>
            <li>
                <span class="rioglyph rioglyph-chevron-right">
                </span>
            </li>
        </ul>
    </div>
    <h4 class="margin-top-25 padding-top-10">Usage</h4>
    <p>Use pagination buttons only for UI elements that benefit from stepping through discrete content pages, such as: Image carousels – where users navigate through multiple slides or multi-step flows – to guide users through a process one step at a time.</p>
    <h5 class="display-flex gap-5 align-items-center">
        <span class="rioglyph rioglyph-remove rioglyph-filled text-color-danger text-size-14">
        </span>
        <span>Not for Tables</span>
    </h5>
    <p>Tables should use a “<a class="" href="#/components/loadMore" data-discover="true">Load more</a>” button instead of pagination.</p>
    <h6>Why "Load more" is preferred</h6>
    <ul class="space-y-10">
        <li>
            <b>Continuous scanning:</b>
            <br>Users can scroll down and view more data without breaking flow.
        </li>
        <li>
            <b>Less disruption:</b>
            <br>Avoids jarring page reloads or resets when switching pages.
        </li>
        <li>
            <b>Improved comparability:</b>
            <br>All previously loaded data stays in view, enabling easier side-by-side comparison of rows.
        </li>
        <li>
            <b>Less cognitive load:</b>
            <br>Users rarely remember what was on “Page 6”, especially when rows are changing. Sequential pages interrupt scanning and exploration.
        </li>
        <li>
            <b>No page size UI:</b>
            <br>You don’t need to offer dropdowns for rows per page, reducing UI clutter.
        </li>
    </ul>
</div>
```

## Pills

**Condensed filled nav-pills as view toggle**

For use next to form elements like buttons and selects. This keeps heights aligned and provides a clearer way to indicate different views. Prefer these over the toggle button group for view switching.

### Example: Example 75

Standard

Pill 1
Pill 2
Pill 3
Disabled Pill

Justified

First tab
Second tab with longer content
Third tab
Fourth tab

Justified with icons

Pill 1

Pill 2

Pill 3

Disabled Pill

Justified with word-wrap

First tab
Second tab with longer content
Third tab
Fourth tab

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Standard</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-pills">
            <li class="active">
                <span>Pill 1</span>
            </li>
            <li>
                <span>Pill 2</span>
            </li>
            <li>
                <span>Pill 3</span>
            </li>
            <li class="disabled">
                <span>Disabled Pill</span>
            </li>
        </ul>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Justified</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-pills nav-justified">
            <li class="active">
                <span>First tab</span>
            </li>
            <li>
                <span>Second tab with longer content</span>
            </li>
            <li>
                <span>Third tab</span>
            </li>
            <li>
                <span>Fourth tab</span>
            </li>
        </ul>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Justified with icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-pills">
            <li class="active">
                <div class="display-flex flex-row gap-5 align-items-center">
                    <span class="rioglyph rioglyph-warning-sign text-color-warning">
                    </span>
                    <span>Pill 1</span>
                </div>
            </li>
            <li>
                <div class="display-flex flex-row gap-5 align-items-center">
                    <span class="rioglyph rioglyph-envelope">
                    </span>
                    <span>Pill 2</span>
                </div>
            </li>
            <li>
                <div class="display-flex flex-row gap-5 align-items-center">
                    <span class="rioglyph rioglyph-files">
                    </span>
                    <span>Pill 3</span>
                </div>
            </li>
            <li class="disabled">
                <div class="display-flex flex-row gap-5 align-items-center">
                    <span class="rioglyph rioglyph-download">
                    </span>
                    <span>Disabled Pill</span>
                </div>
            </li>
        </ul>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Justified with word-wrap</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-pills nav-justified nav-justified-word-wrap">
            <li class="active">
                <span>First tab</span>
            </li>
            <li>
                <span>Second tab with longer content</span>
            </li>
            <li>
                <span>Third tab</span>
            </li>
            <li>
                <span>Fourth tab</span>
            </li>
        </ul>
    </div>
</div>
```

#### Classes (css)

```css
nav
```

### Example: Example 76

Filled

First tab
Second tab with longer content
Third tab
Fourth tab

Filled with icons only

Filled condensed (for use with other form elements)

Shipments
Vehicles
Trailer

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Filled</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-pills nav-pills-filled nav-justified">
            <li class="active">
                <span>First tab</span>
            </li>
            <li>
                <span>Second tab with longer content</span>
            </li>
            <li>
                <span>Third tab</span>
            </li>
            <li class="disabled">
                <span>Fourth tab</span>
            </li>
        </ul>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Filled with icons only</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="rounded-none nav nav-pills nav-pills-filled nav-justified text-size-18">
            <li class="active">
                <span class="rioglyph rioglyph-pushpin">
                </span>
            </li>
            <li class="">
                <span class="rioglyph rioglyph-geofence">
                </span>
            </li>
            <li class="">
                <span class="rioglyph rioglyph-workshop">
                </span>
            </li>
            <li class="">
                <span class="rioglyph rioglyph-filling-e-station">
                </span>
            </li>
            <li class="">
                <span class="rioglyph rioglyph-parking">
                </span>
            </li>
        </ul>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Filled condensed (for use with other form elements)</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="max-width-350">
            <ul class="nav nav-pills nav-pills-filled nav-pills-filled-condensed nav-justified shadow-subtle">
                <li class="active">
                    <span class="display-flex flex-row align-items-center gap-5">
                        <span class="rioglyph rioglyph-parcel">
                        </span>
                        <span>Shipments</span>
                    </span>
                </li>
                <li>
                    <span class="display-flex flex-row align-items-center gap-5">
                        <span class="rioglyph rioglyph-truck">
                        </span>
                        <span>Vehicles</span>
                    </span>
                </li>
                <li>
                    <span class="display-flex flex-row align-items-center gap-5">
                        <span class="rioglyph rioglyph-trailer">
                        </span>
                        <span>Trailer</span>
                    </span>
                </li>
            </ul>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
nav
```

### Example: Dolor sit amet

Stacked

Stacked pill 1
Stacked pill 2
Stacked pill 3
Disabled stacked pill

Stacked decent

Stacked pill 1
Stacked pill 2
Stacked pill 3
Disabled stacked pill

Stacked decent menu

Lorem ipsum
Dolor sit amet

Lorem ipsum
Dolor sit amet

Lorem ipsum
Dolor sit amet

Lorem ipsum
Dolor sit amet

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Stacked</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-pills nav-stacked">
            <li class="active">
                <span>Stacked pill 1</span>
            </li>
            <li>
                <span>Stacked pill 2</span>
            </li>
            <li>
                <span>Stacked pill 3</span>
            </li>
            <li class="disabled">
                <span>Disabled stacked pill</span>
            </li>
        </ul>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Stacked decent</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-pills nav-pills-stacked-decent nav-stacked nav-stacked-decent">
            <li class="active">
                <span>Stacked pill 1</span>
            </li>
            <li>
                <span>Stacked pill 2</span>
            </li>
            <li>
                <span>Stacked pill 3</span>
            </li>
            <li class="disabled">
                <span>Disabled stacked pill</span>
            </li>
        </ul>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Stacked decent menu</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-pills nav-pills-stacked-decent nav-stacked nav-stacked-decent">
            <li class="menu-item active">
                <a href="/#">
                    <div class="flex-1-1 display-flex align-items-center gap-10 padding-y-2">
                        <div class="position-relative">
                            <span class="text-size-h4 text-color-primary rioglyph rioglyph-user">
                            </span>
                        </div>
                        <div class="line-height-125rel">
                            <div class="text-size-16">Lorem ipsum</div>
                            <div class="text-size-12 text-color-dark">Dolor sit amet</div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="menu-item">
                <a href="/#">
                    <div class="flex-1-1 display-flex align-items-center gap-10 padding-y-2">
                        <div class="position-relative">
                            <span class="text-size-h4 text-color-primary rioglyph rioglyph-addressbook">
                            </span>
                        </div>
                        <div class="line-height-125rel">
                            <div class="text-size-16">Lorem ipsum</div>
                            <div class="text-size-12 text-color-dark">Dolor sit amet</div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="menu-item">
                <a href="/#">
                    <div class="flex-1-1 display-flex align-items-center gap-10 padding-y-2">
                        <div class="position-relative">
                            <span class="text-size-h4 text-color-primary rioglyph rioglyph-book">
                            </span>
                        </div>
                        <div class="line-height-125rel">
                            <div class="text-size-16">Lorem ipsum</div>
                            <div class="text-size-12 text-color-dark">Dolor sit amet</div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="menu-item disabled">
                <a href="/#">
                    <div class="flex-1-1 display-flex align-items-center gap-10 padding-y-2">
                        <div class="position-relative">
                            <span class="text-size-h4 text-color-light rioglyph rioglyph-api">
                            </span>
                        </div>
                        <div class="line-height-125rel">
                            <div class="text-size-16">Lorem ipsum</div>
                            <div class="text-size-12 text-color-light">Dolor sit amet</div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
```

#### Classes (css)

```css
nav
```

### Example: Example 78

Shipments
Vehicles

Please select Option 1
Option 2

Lane Load ID ETA Status

Rotterdam → Munich LD-48271 10:40 In transit
Hamburg → Lyon LD-51723 12:15 At cross-dock
Milan → Zurich LD-60018 14:05 Delivered

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-left">
                <div class="table-toolbar-column">
                    <ul class="nav nav-pills nav-pills-filled nav-pills-filled-condensed">
                        <li class="active">
                            <span class="display-flex flex-row align-items-center gap-5">
                                <span class="rioglyph rioglyph-parcel">
                                </span>
                                <span>Shipments</span>
                            </span>
                        </li>
                        <li>
                            <span class="display-flex flex-row align-items-center gap-5">
                                <span class="rioglyph rioglyph-truck">
                                </span>
                                <span>Vehicles</span>
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="table-toolbar-column">
                    <div class="select dropdown min-width-200 dropup">
                        <button type="button" id="2" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                            <span class="selected-option-text">
                                <span class="placeholder">Please select</span>
                            </span>
                            <span class="select-toggle-actions">
                                <span class="clearButton hide pointer-events-none">
                                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                    </span>
                                </span>
                                <span class="caret">
                                </span>
                            </span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
                                    <span class="selected-option-dropdown-item">Option 1</span>
                                    <input type="hidden" value="1">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
                                    <span class="selected-option-dropdown-item">Option 2</span>
                                    <input type="hidden" value="2">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column">
                    <div class="table-toolbar-search input-group">
                        <span class="input-group-addon">
                            <span class="rioglyph rioglyph-search">
                            </span>
                        </span>
                        <div class="ClearableInput input-group">
                            <input placeholder="Search in table" class="form-control" type="text" tabindex="0" value="">
                            <span class="clearButton hide">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover table-head-filled table-bordered">
            <thead>
                <tr>
                    <th>Lane</th>
                    <th>Load ID</th>
                    <th>ETA</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Rotterdam → Munich</td>
                    <td>LD-48271</td>
                    <td>10:40</td>
                    <td>In transit</td>
                </tr>
                <tr>
                    <td>Hamburg → Lyon</td>
                    <td>LD-51723</td>
                    <td>12:15</td>
                    <td>At cross-dock</td>
                </tr>
                <tr>
                    <td>Milan → Zurich</td>
                    <td>LD-60018</td>
                    <td>14:05</td>
                    <td>Delivered</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
```

#### Classes (css)

```css
nav
```

## Tabs

Elements

### Example: Example 79

Standard

Tab 1
Tab 2
Tab 3
Disabled tab

Raw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Bordered content

Tab 4
Tab 5

Raw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Justified

Tab 1
Tab 2
Tab 3
Long tab name with line-break

Raw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Justified with word-wrap

Tab 1
Tab 2
Tab 3
Long tab name with line-break

Raw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Standard</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-tabs">
            <li>
                <a href="#tab1" data-toggle="tab">Tab 1</a>
            </li>
            <li>
                <a href="#tab2" data-toggle="tab">Tab 2</a>
            </li>
            <li class="active">
                <a href="#tab3" data-toggle="tab">Tab 3</a>
            </li>
            <li class="disabled">
                <a>Disabled tab</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="tab1">
                <p>Raw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Bordered content</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#tab4" data-toggle="tab">Tab 4</a>
            </li>
            <li>
                <a href="#tab5" data-toggle="tab">Tab 5</a>
            </li>
        </ul>
        <div id="tab4" class="tab-content-bordered">
            <div class="tab-pane fade active in">
                <p>Raw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Justified</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-tabs nav-justified">
            <li class="active">
                <a href="#tab1" data-toggle="tab">Tab 1</a>
            </li>
            <li>
                <a href="#tab2" data-toggle="tab">Tab 2</a>
            </li>
            <li>
                <a href="#tab3" data-toggle="tab">Tab 3</a>
            </li>
            <li>
                <a href="#tab4" data-toggle="tab">Long tab name with line-break</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="tab1">
                <p>Raw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Justified with word-wrap</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="nav nav-tabs nav-justified nav-justified-word-wrap">
            <li>
                <a href="#tab1" data-toggle="tab">Tab 1</a>
            </li>
            <li class="active">
                <a href="#tab2" data-toggle="tab">Tab 2</a>
            </li>
            <li>
                <a href="#tab3" data-toggle="tab">Tab 3</a>
            </li>
            <li>
                <a>Long tab name with line-break</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="tab1">
                <p>Raw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
nav
```

## Alerts

### Example: Lorem ipsum

Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
See More

Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
See More

Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
See More

Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
See More

Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
See More

Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
See More

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-3-md gap-20">
    <div class="alert alert-dismissible alert-primary" data-capture-callout="true">
        <button type="button" class="btn btn-icon-only close" data-dismiss="alert">
            <span class="rioglyph rioglyph-remove">
            </span>
        </button>
        <div class="display-flex gap-10">
            <span class="text-color-primary text-size-h4 rioglyph rioglyph-info-sign">
            </span>
            <div>
                <strong class="text-size-16">Lorem ipsum</strong>
                <div class="margin-y-5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
                <div class="text-medium text-uppercase text-size-12">
                    <a href="#" class="alert-link">See More<span class="text-color-primary margin-left-3 rioglyph rioglyph-new-window">
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="alert alert-dismissible alert-secondary" data-capture-callout="true">
        <button type="button" class="btn btn-icon-only close" data-dismiss="alert">
            <span class="rioglyph rioglyph-remove">
            </span>
        </button>
        <div class="display-flex gap-10">
            <span class="text-color-secondary text-size-h4 rioglyph rioglyph-info-sign">
            </span>
            <div>
                <strong class="text-size-16">Lorem ipsum</strong>
                <div class="margin-y-5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
                <div class="text-medium text-uppercase text-size-12">
                    <a href="#" class="alert-link">See More<span class="text-color-secondary margin-left-3 rioglyph rioglyph-new-window">
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="alert alert-dismissible alert-info" data-capture-callout="true">
        <button type="button" class="btn btn-icon-only close" data-dismiss="alert">
            <span class="rioglyph rioglyph-remove">
            </span>
        </button>
        <div class="display-flex gap-10">
            <span class="text-color-info text-size-h4 rioglyph rioglyph-info-sign">
            </span>
            <div>
                <strong class="text-size-16">Lorem ipsum</strong>
                <div class="margin-y-5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
                <div class="text-medium text-uppercase text-size-12">
                    <a href="#" class="alert-link">See More<span class="text-color-info margin-left-3 rioglyph rioglyph-new-window">
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="alert alert-dismissible alert-success" data-capture-callout="true">
        <button type="button" class="btn btn-icon-only close" data-dismiss="alert">
            <span class="rioglyph rioglyph-remove">
            </span>
        </button>
        <div class="display-flex gap-10">
            <span class="text-color-success text-size-h4 rioglyph rioglyph-ok-sign">
            </span>
            <div>
                <strong class="text-size-16">Lorem ipsum</strong>
                <div class="margin-y-5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
                <div class="text-medium text-uppercase text-size-12">
                    <a href="#" class="alert-link">See More<span class="text-color-success margin-left-3 rioglyph rioglyph-new-window">
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="alert alert-dismissible alert-warning" data-capture-callout="true">
        <button type="button" class="btn btn-icon-only close" data-dismiss="alert">
            <span class="rioglyph rioglyph-remove">
            </span>
        </button>
        <div class="display-flex gap-10">
            <span class="text-color-warning text-size-h4 rioglyph rioglyph rioglyph-exclamation-sign">
            </span>
            <div>
                <strong class="text-size-16">Lorem ipsum</strong>
                <div class="margin-y-5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
                <div class="text-medium text-uppercase text-size-12">
                    <a href="#" class="alert-link">See More<span class="text-color-warning margin-left-3 rioglyph rioglyph-new-window">
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="alert alert-dismissible alert-danger" data-capture-callout="true">
        <button type="button" class="btn btn-icon-only close" data-dismiss="alert">
            <span class="rioglyph rioglyph-remove">
            </span>
        </button>
        <div class="display-flex gap-10">
            <span class="text-color-danger text-size-h4 rioglyph rioglyph rioglyph-error-sign">
            </span>
            <div>
                <strong class="text-size-16">Lorem ipsum</strong>
                <div class="margin-y-5">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
                <div class="text-medium text-uppercase text-size-12">
                    <a href="#" class="alert-link">See More<span class="text-color-danger margin-left-3 rioglyph rioglyph-new-window">
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
alert-primary
```

## Badges

### Example: Example 81

Unlike labels, which are used for categorization and emphasis, badges provide quick contextual information in a compact and visually distinct manner.
Use badges for numeric indicators , such as showing counts (e.g., unread messages, notifications, cart items). They are also useful for small floating highlights on UI elements (e.g., "New" or "Beta"). Badges are commonly placed on icons, buttons, menus, or navigation elements.
Home 1
Profile
Messages 3

0 1 2 3 4 5 6 7
0 1 2 3 4 5 6 7
10 11 12 13 14 15 16 17
Badges on Icons

23 23 23 23 23 23 23 23
Badges as Indicator

Inbox 3
Inbox 99+

#### HTML (html)

```html
<div>
    <p>Unlike labels, which are used for categorization and emphasis, <b>badges provide quick contextual information</b> in a compact and visually distinct manner.</p>
    <p>Use badges for <b>numeric indicators</b>, such as showing counts (e.g., unread messages, notifications, cart items). They are also useful for <b>small floating highlights</b> on UI elements (e.g., "New" or "Beta"). Badges are commonly placed on icons, buttons, menus, or navigation elements.</p>
    <ul class="nav nav-pills margin-top-25">
        <li class="active">
            <span>
                <span>Home</span>
                <span class="badge badge-primary margin-left-5">1</span>
            </span>
        </li>
        <li>
            <span>Profile</span>
        </li>
        <li>
            <span>Messages<span class="badge badge-muted margin-left-5">3</span>
            </span>
        </li>
    </ul>
    <div class="padding-10">
        <div class="padding-top-20 display-flex flex-wrap gap-10">
            <span class="badge badge-default">0</span>
            <span class="badge badge-primary">1</span>
            <span class="badge badge-secondary">2</span>
            <span class="badge badge-info">3</span>
            <span class="badge badge-success">4</span>
            <span class="badge badge-warning">5</span>
            <span class="badge badge-danger">6</span>
            <span class="badge badge-muted">7</span>
        </div>
        <div class="padding-top-20 display-flex flex-wrap gap-10">
            <span class="badge badge-lg badge-default">0</span>
            <span class="badge badge-lg badge-primary">1</span>
            <span class="badge badge-lg badge-secondary">2</span>
            <span class="badge badge-lg badge-info">3</span>
            <span class="badge badge-lg badge-success">4</span>
            <span class="badge badge-lg badge-warning">5</span>
            <span class="badge badge-lg badge-danger">6</span>
            <span class="badge badge-lg badge-muted">7</span>
        </div>
        <div class="padding-top-20 display-flex flex-wrap gap-10">
            <span class="badge badge-xl badge-default">10</span>
            <span class="badge badge-xl badge-primary">11</span>
            <span class="badge badge-xl badge-secondary">12</span>
            <span class="badge badge-xl badge-info">13</span>
            <span class="badge badge-xl badge-success">14</span>
            <span class="badge badge-xl badge-warning">15</span>
            <span class="badge badge-xl badge-danger">16</span>
            <span class="badge badge-xl badge-muted">17</span>
        </div>
        <div class="lead margin-top-25">
            <div class="display-flex justify-content-between">
                <div>Badges on Icons</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-20">
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-default">
                </span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-primary">
                </span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-secondary">
                </span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-info">
                </span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-success">
                </span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-warning">
                </span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-danger">
                </span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-muted">
                </span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-default">23</span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-primary">23</span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-secondary">23</span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-info">23</span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-success">23</span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-warning">23</span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-danger">23</span>
            </span>
            <span class="indicated-icon">
                <span class="rioglyph rioglyph-chat text-color-darker">
                </span>
                <span class="badge badge-indicator badge-indicator-border badge-muted">23</span>
            </span>
        </div>
        <div class="lead margin-top-25">
            <div class="display-flex justify-content-between">
                <div>Badges as Indicator</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-25 margin-bottom-25">
            <div class="indicated-button">
                <button type="button" class="btn btn-primary">Inbox</button>
                <span class="badge badge-primary badge-indicator badge-indicator-border">3</span>
            </div>
            <div class="indicated-button">
                <button type="button" class="btn btn-primary">Inbox</button>
                <span class="badge badge-danger badge-indicator badge-indicator-border badge-indicator-pinging">99+</span>
            </div>
        </div>
        <div class="display-flex flex-wrap gap-25">
            <div class="indicated-button">
                <button type="button" class="btn btn-default btn-icon-only">
                    <span class="rioglyph rioglyph-notification">
                    </span>
                </button>
                <span class="badge badge-default badge-indicator badge-indicator-pinging">
                </span>
            </div>
            <div class="indicated-button">
                <button type="button" class="btn btn-default btn-icon-only">
                    <span class="rioglyph rioglyph-notification">
                    </span>
                </button>
                <span class="badge badge-primary badge-indicator badge-indicator-pinging">
                </span>
            </div>
            <div class="indicated-button">
                <button type="button" class="btn btn-default btn-icon-only">
                    <span class="rioglyph rioglyph-notification">
                    </span>
                </button>
                <span class="badge badge-secondary badge-indicator badge-indicator-pinging">
                </span>
            </div>
            <div class="indicated-button">
                <button type="button" class="btn btn-default btn-icon-only">
                    <span class="rioglyph rioglyph-notification">
                    </span>
                </button>
                <span class="badge badge-info badge-indicator badge-indicator-pinging">
                </span>
            </div>
            <div class="indicated-button">
                <button type="button" class="btn btn-default btn-icon-only">
                    <span class="rioglyph rioglyph-notification">
                    </span>
                </button>
                <span class="badge badge-success badge-indicator badge-indicator-pinging">
                </span>
            </div>
            <div class="indicated-button">
                <button type="button" class="btn btn-default btn-icon-only">
                    <span class="rioglyph rioglyph-notification">
                    </span>
                </button>
                <span class="badge badge-warning badge-indicator badge-indicator-pinging">
                </span>
            </div>
            <div class="indicated-button">
                <button type="button" class="btn btn-default btn-icon-only">
                    <span class="rioglyph rioglyph-notification">
                    </span>
                </button>
                <span class="badge badge-danger badge-indicator badge-indicator-pinging">
                </span>
            </div>
            <div class="indicated-button">
                <button type="button" class="btn btn-default btn-icon-only">
                    <span class="rioglyph rioglyph-notification">
                    </span>
                </button>
                <span class="badge badge-muted badge-indicator badge-indicator-pinging">
                </span>
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
badge-default
```

## Callouts

### Example: Example 82

Callout default
At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.

Callout primary
At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.

Callout secondary
At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.

Callout info
At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.

Callout success
At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.

Callout warning
At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.

Callout danger
At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-3-md gap-20">
    <div class="callout callout-default" data-capture-callout="true">
        <div class=" text-medium text-size-20 line-height-125rel margin-bottom-10">Callout <span>default</span>
        </div>
        <p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p>
    </div>
    <div class="callout callout-primary" data-capture-callout="true">
        <div class="text-color-primary text-medium text-size-20 line-height-125rel margin-bottom-10">Callout <span>primary</span>
        </div>
        <p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p>
    </div>
    <div class="callout callout-secondary" data-capture-callout="true">
        <div class="text-color-secondary text-medium text-size-20 line-height-125rel margin-bottom-10">Callout <span>secondary</span>
        </div>
        <p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p>
    </div>
    <div class="callout callout-info" data-capture-callout="true">
        <div class="text-color-info text-medium text-size-20 line-height-125rel margin-bottom-10">Callout <span>info</span>
        </div>
        <p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p>
    </div>
    <div class="callout callout-success" data-capture-callout="true">
        <div class="text-color-success text-medium text-size-20 line-height-125rel margin-bottom-10">Callout <span>success</span>
        </div>
        <p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p>
    </div>
    <div class="callout callout-warning" data-capture-callout="true">
        <div class="text-color-warning text-medium text-size-20 line-height-125rel margin-bottom-10">Callout <span>warning</span>
        </div>
        <p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p>
    </div>
    <div class="callout callout-danger" data-capture-callout="true">
        <div class="text-color-danger text-medium text-size-20 line-height-125rel margin-bottom-10">Callout <span>danger</span>
        </div>
        <p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p>
    </div>
</div>
```

#### Classes (css)

```css
callout-default
```

## Counter

The counter component is a pure CSS component that can be applied to any element in order to count the child elements in a nice way. This works for list items as well as for div's or other HTML tags.

### Example: Example 83

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### HTML (html)

```html
<div>
    <div class="display-grid grid-cols-1 grid-cols-2-ls gap-20">
        <div class="counter color-gray">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
        <div class="counter color-gray filled">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
    </div>
    <hr>
    <div class="display-grid grid-cols-1 grid-cols-2-ls gap-20">
        <div class="counter color-primary">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
        <div class="counter color-primary filled">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
    </div>
    <hr>
    <div class="display-grid grid-cols-1 grid-cols-2-ls gap-20">
        <div class="counter color-secondary">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
        <div class="counter color-secondary filled">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
    </div>
    <hr>
    <div class="display-grid grid-cols-1 grid-cols-3-ls gap-20">
        <div class="counter size-small">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
        <div class="counter">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
        <div class="counter size-large">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
    </div>
    <hr>
    <div class="display-grid grid-cols-1 grid-cols-3-ls gap-20">
        <div class="counter size-small">
            <div data-count="6">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
        <div class="counter">
            <div data-count="3">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
        <div class="counter size-large">
            <div data-count="8">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
color-gray
```

## Key

### Example: Example 84

Keys example Pro tip: press m to comment
Press ctrl + a to select all

Use lower-case names shift enter ctrl alt
Unicode symbols ⇧ ⇪ ↵ ⌫ → ← ↑ ↓ ⇥ ⇤ ␣

Mac specific keys - see DeviceUtils ⌘ ⌥ ⌃ 

#### HTML (html)

```html
<div>
    <label>Keys example</label>
    <p title="press m to comment">
        <b>Pro tip:</b> press <kbd>m</kbd> to comment
    </p>
    <p title="press ctrl + a to select all">Press <kbd>ctrl</kbd> + <kbd>a</kbd> to select all</p>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>Use lower-case names</label>
    <p>
        <kbd>shift</kbd>
        <kbd>enter</kbd>
        <kbd>ctrl</kbd>
        <kbd>alt</kbd>
    </p>
    <label>Unicode symbols</label>
    <p>
        <kbd>⇧</kbd>
        <kbd>⇪</kbd>
        <kbd>↵</kbd>
        <kbd>⌫</kbd>
        <kbd>→</kbd>
        <kbd>←</kbd>
        <kbd>↑</kbd>
        <kbd>↓</kbd>
        <kbd>⇥</kbd>
        <kbd>⇤</kbd>
        <kbd>␣</kbd>
    </p>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>Mac specific keys - see <a class="" href="#/components/deviceUtils" data-discover="true">DeviceUtils</a>
    </label>
    <p>
        <kbd>⌘</kbd>
        <kbd>⌥</kbd>
        <kbd>⌃</kbd>
        <kbd></kbd>
    </p>
</div>
```

## Labels

> Note: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.

### Example: Example 85

Labels are small, colored indicators used to represent statuses, categories, or highlights in the UI.
The standard labels have a light background and are ideal for subtle status indications that blend naturally with the interface.
The filled labels use a bold background color, making them more prominent—best suited for drawing attention to critical statuses or highlighting important information.

Standard labels
default
primary
secondary
info
success
warning
danger
muted

Filled labels
default
primary
secondary
info
success
warning
danger
muted

Labels width icons
default
primary
secondary
info
success
warning
danger
muted

Filled labels width icons
default
primary
secondary
info
success
warning
danger
muted

Condensed labels
default
primary
secondary
info
success
warning
danger
muted

Condensed and filled labels
default
primary
secondary
info
success
warning
danger
muted

#### HTML (html)

```html
<p class="margin-bottom-5 margin-top-0">Labels are small, colored indicators used to represent statuses, categories, or highlights in the UI.</p>
<ul class="space-y-5 margin-bottom-20">
    <li>The <b>standard labels</b> have a light background and are ideal for subtle status indications that blend naturally with the interface.</li>
    <li>The <b>filled labels</b> use a bold background color, making them more prominent—best suited for drawing attention to critical statuses or highlighting important information.</li>
</ul>
<div class="row">
    <div class="col-lg-6 margin-bottom-25">
        <h5>Standard labels</h5>
        <div class="display-flex flex-wrap gap-10">
            <div class="label label-default">default</div>
            <div class="label label-primary">primary</div>
            <div class="label label-secondary">secondary</div>
            <div class="label label-info">info</div>
            <div class="label label-success">success</div>
            <div class="label label-warning">warning</div>
            <div class="label label-danger">danger</div>
            <div class="label label-muted">muted</div>
        </div>
    </div>
    <div class="col-lg-6 margin-bottom-25">
        <h5>Filled labels</h5>
        <div class="display-flex flex-wrap gap-10">
            <div class="label label-default label-filled">default</div>
            <div class="label label-primary label-filled">primary</div>
            <div class="label label-secondary label-filled">secondary</div>
            <div class="label label-info label-filled">info</div>
            <div class="label label-success label-filled">success</div>
            <div class="label label-warning label-filled">warning</div>
            <div class="label label-danger label-filled">danger</div>
            <div class="label label-muted label-filled">muted</div>
        </div>
    </div>
    <div class="col-lg-6 margin-bottom-25">
        <h5>Labels width icons</h5>
        <div class="display-flex flex-wrap gap-10">
            <div class="label label-default">
                <span class="rioglyph rioglyph-user">
                </span>
                <span>default</span>
            </div>
            <div class="label label-primary">
                <span class="rioglyph rioglyph-user">
                </span>
                <span>primary</span>
            </div>
            <div class="label label-secondary">
                <span class="rioglyph rioglyph-driver">
                </span>
                <span>secondary</span>
            </div>
            <div class="label label-info">
                <span class="rioglyph rioglyph-truck">
                </span>
                <span>info</span>
            </div>
            <div class="label label-success">
                <span class="rioglyph rioglyph-van">
                </span>
                <span>success</span>
            </div>
            <div class="label label-warning">
                <span class="rioglyph rioglyph-trailer">
                </span>
                <span>warning</span>
            </div>
            <div class="label label-danger">
                <span class="rioglyph rioglyph-trailer">
                </span>
                <span>danger</span>
            </div>
            <div class="label label-muted">
                <span class="rioglyph rioglyph-user">
                </span>
                <span>muted</span>
            </div>
        </div>
    </div>
    <div class="col-lg-6 margin-bottom-25">
        <h5>Filled labels width icons</h5>
        <div class="display-flex flex-wrap gap-10">
            <div class="label label-default label-filled">
                <span>default</span>
                <span class="rioglyph rioglyph-trailer">
                </span>
            </div>
            <div class="label label-primary label-filled">
                <span>primary</span>
                <span class="rioglyph rioglyph-truck">
                </span>
            </div>
            <div class="label label-secondary label-filled">
                <span>secondary</span>
                <span class="rioglyph rioglyph-car">
                </span>
            </div>
            <div class="label label-info label-filled">
                <span>info</span>
                <span class="rioglyph rioglyph-businessman">
                </span>
            </div>
            <div class="label label-success label-filled">
                <span>success</span>
                <span class="rioglyph rioglyph-user">
                </span>
            </div>
            <div class="label label-warning label-filled">
                <span>warning</span>
                <span class="rioglyph rioglyph-car">
                </span>
            </div>
            <div class="label label-danger label-filled">
                <span>danger</span>
                <span class="rioglyph rioglyph-driver">
                </span>
            </div>
            <div class="label label-muted label-filled">
                <span>muted</span>
                <span class="rioglyph rioglyph-driver">
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg-6 margin-bottom-25">
        <h5>Condensed labels</h5>
        <div class="display-flex flex-wrap gap-10">
            <div class="label label-default label-condensed">default</div>
            <div class="label label-primary label-condensed">primary</div>
            <div class="label label-secondary label-condensed">secondary</div>
            <div class="label label-info label-condensed">info</div>
            <div class="label label-success label-condensed">success</div>
            <div class="label label-warning label-condensed">warning</div>
            <div class="label label-danger label-condensed">danger</div>
            <div class="label label-muted label-condensed">muted</div>
        </div>
    </div>
    <div class="col-lg-6 margin-bottom-25">
        <h5>Condensed and filled labels</h5>
        <div class="display-flex flex-wrap gap-10">
            <div class="label label-default label-filled label-condensed">default</div>
            <div class="label label-primary label-filled label-condensed">primary</div>
            <div class="label label-secondary label-filled label-condensed">secondary</div>
            <div class="label label-info label-filled label-condensed">info</div>
            <div class="label label-success label-filled label-condensed">success</div>
            <div class="label label-warning label-filled label-condensed">warning</div>
            <div class="label label-danger label-filled label-condensed">danger</div>
            <div class="label label-muted label-filled label-condensed">muted</div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
label-default
```

## Lists

### Example: Example 86

Ordered list

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Unordered list

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Square list

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

Lorem ipsum dolor sit amet, dui eget elit.

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-3-sm gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Ordered list</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul>
            <li>
                Lorem ipsum dolor sit amet, dui eget elit.</li>
            <li>
                Lorem ipsum dolor sit amet, dui eget elit.</li>
            <li>
                Lorem ipsum dolor sit amet, dui eget elit.</li>
            <ul>
                <li>
                    Lorem ipsum dolor sit amet, dui eget elit.</li>
                <li>
                    Lorem ipsum dolor sit amet, dui eget elit.</li>
                <li>
                    Lorem ipsum dolor sit amet, dui eget elit.</li>
            </ul>
        </ul>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Unordered list</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ol>
            <li>
                Lorem ipsum dolor sit amet, dui eget elit.</li>
            <li>
                Lorem ipsum dolor sit amet, dui eget elit.</li>
            <li>
                Lorem ipsum dolor sit amet, dui eget elit.</li>
            <ol>
                <li>
                    Lorem ipsum dolor sit amet, dui eget elit.</li>
                <li>
                    Lorem ipsum dolor sit amet, dui eget elit.</li>
                <li>
                    Lorem ipsum dolor sit amet, dui eget elit.</li>
            </ol>
        </ol>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Square list</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <ul class="square-list">
            <li>
                Lorem ipsum dolor sit amet, dui eget elit.</li>
            <li>
                Lorem ipsum dolor sit amet, dui eget elit.</li>
            <li>
                Lorem ipsum dolor sit amet, dui eget elit.</li>
        </ul>
    </div>
</div>
```

## List groups

### Example: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

List group item default
List group item primary
List group item secondary
List group item info
List group item success
List group item warning
List group item danger

Lorem ipsum dolor sit amet
3

Lorem ipsum dolor sit amet
3

Lorem ipsum dolor sit amet
3

Lorem ipsum dolor sit amet
3

Lorem ipsum dolor sit amet
3

Lorem ipsum dolor sit amet
3

Lorem ipsum dolor sit amet
3

List group item link (a) List group item link (a) List group item link (a) List group item link (a)
List group item link (.list-group-item-link)
List group item link (.list-group-item-link)
List group item link (.list-group-item-link)
List group item link (.list-group-item-link)

Headline default
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

default

Headline primary
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

primary

Headline secondary
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

secondary

Headline info
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

info

Headline success
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

success

Headline warning
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

warning

Headline danger
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

danger

Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

3

Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

3

Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

3

Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

3

Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

3

Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

3

Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

3

#### HTML (html)

```html
<div>
    <div class="row">
        <div class="col-md-4">
            <ul class="list-group border rounded margin-bottom-20">
                <li class="list-group-item list-group-item-default">List group item <span>default</span>
                </li>
                <li class="list-group-item list-group-item-primary">List group item <span>primary</span>
                </li>
                <li class="list-group-item list-group-item-secondary">List group item <span>secondary</span>
                </li>
                <li class="list-group-item list-group-item-info">List group item <span>info</span>
                </li>
                <li class="list-group-item list-group-item-success">List group item <span>success</span>
                </li>
                <li class="list-group-item list-group-item-warning">List group item <span>warning</span>
                </li>
                <li class="list-group-item list-group-item-danger">List group item <span>danger</span>
                </li>
            </ul>
        </div>
        <div class="col-md-4">
            <ul class="list-group border rounded margin-bottom-20">
                <li class="list-group-item">
                    <div class="display-flex">
                        <div class="width-100pct">Lorem ipsum dolor sit amet</div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-default">3</span>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="display-flex">
                        <div class="width-100pct">Lorem ipsum dolor sit amet</div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-primary">3</span>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="display-flex">
                        <div class="width-100pct">Lorem ipsum dolor sit amet</div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-secondary">3</span>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="display-flex">
                        <div class="width-100pct">Lorem ipsum dolor sit amet</div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-info">3</span>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="display-flex">
                        <div class="width-100pct">Lorem ipsum dolor sit amet</div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-success">3</span>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="display-flex">
                        <div class="width-100pct">Lorem ipsum dolor sit amet</div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-warning">3</span>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="display-flex">
                        <div class="width-100pct">Lorem ipsum dolor sit amet</div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-danger">3</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-md-4">
            <div class="list-group border rounded margin-bottom-20">
                <a href="#" class="list-group-item">List group item link (a)</a>
                <a href="#" class="list-group-item">List group item link (a)</a>
                <a href="#" class="list-group-item">List group item link (a)</a>
                <a href="#" class="list-group-item">List group item link (a)</a>
            </div>
            <div class="list-group border rounded margin-bottom-20">
                <div class="list-group-item list-group-item-link">List group item link (.list-group-item-link)</div>
                <div class="list-group-item list-group-item-link">List group item link (.list-group-item-link)</div>
                <div class="list-group-item list-group-item-link">List group item link (.list-group-item-link)</div>
                <div class="list-group-item list-group-item-link">List group item link (.list-group-item-link)</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="list-group border rounded margin-bottom-20">
                <button class="list-group-item list-group-item-default">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline <span>default</span>
                            </div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="label label-default label-filled">
                                <span class="text-capitalize">default</span>
                            </span>
                        </div>
                    </div>
                </button>
                <button class="list-group-item list-group-item-primary">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline <span>primary</span>
                            </div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="label label-primary label-filled">
                                <span class="text-capitalize">primary</span>
                            </span>
                        </div>
                    </div>
                </button>
                <button class="list-group-item list-group-item-secondary">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline <span>secondary</span>
                            </div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="label label-secondary label-filled">
                                <span class="text-capitalize">secondary</span>
                            </span>
                        </div>
                    </div>
                </button>
                <button class="list-group-item list-group-item-info">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline <span>info</span>
                            </div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="label label-info label-filled">
                                <span class="text-capitalize">info</span>
                            </span>
                        </div>
                    </div>
                </button>
                <button class="list-group-item list-group-item-success">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline <span>success</span>
                            </div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="label label-success label-filled">
                                <span class="text-capitalize">success</span>
                            </span>
                        </div>
                    </div>
                </button>
                <button class="list-group-item list-group-item-warning">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline <span>warning</span>
                            </div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="label label-warning label-filled">
                                <span class="text-capitalize">warning</span>
                            </span>
                        </div>
                    </div>
                </button>
                <button class="list-group-item list-group-item-danger">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline <span>danger</span>
                            </div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="label label-danger label-filled">
                                <span class="text-capitalize">danger</span>
                            </span>
                        </div>
                    </div>
                </button>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="list-group border rounded">
                <div class="list-group-item">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline</div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-default">3</span>
                        </div>
                    </div>
                </div>
                <div class="list-group-item">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline</div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-primary">3</span>
                        </div>
                    </div>
                </div>
                <div class="list-group-item">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline</div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-secondary">3</span>
                        </div>
                    </div>
                </div>
                <div class="list-group-item">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline</div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-info">3</span>
                        </div>
                    </div>
                </div>
                <div class="list-group-item">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline</div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-success">3</span>
                        </div>
                    </div>
                </div>
                <div class="list-group-item">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline</div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-warning">3</span>
                        </div>
                    </div>
                </div>
                <div class="list-group-item">
                    <div class="display-flex gap-10">
                        <div class="width-100pct">
                            <div class="text-size-20 text-medium">Headline</div>
                            <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
                        </div>
                        <div class="flex-1-1-0">
                            <span class="badge badge-danger">3</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
list-group border rounded
```

## Panels

### Example: Example 88

panel-heading 1

panel-body
panel-footer

panel-heading 1 1

panel-body
panel-footer

panel-heading 1 1

panel-body
panel-footer

panel-heading 1 1

panel-body
panel-footer

panel-heading 1 1

panel-body
panel-footer

panel-heading 1 1

panel-body
panel-footer

panel-heading 1 1

panel-body
panel-footer

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-md gap-20">
    <div class="panel panel-default margin-bottom-0">
        <div class="panel-heading">
            <div class="display-flex column-gap-10 justify-content-between">
                <span>panel-heading</span>
                <div class="display-flex column-gap-5">
                    <span>
                    </span>
                    <span>
                        <span class="badge badge-primary">1</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="panel-body">panel-body</div>
        <div class="panel-footer">panel-footer</div>
    </div>
    <div class="panel panel-primary margin-bottom-0">
        <div class="panel-heading">
            <div class="display-flex column-gap-10 justify-content-between">
                <span>panel-heading</span>
                <div class="display-flex column-gap-5">
                    <span>
                        <span class="badge">1</span>
                    </span>
                    <span>
                        <span class="badge badge-secondary">1</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="panel-body">panel-body</div>
        <div class="panel-footer">panel-footer</div>
    </div>
    <div class="panel panel-secondary margin-bottom-0">
        <div class="panel-heading">
            <div class="display-flex column-gap-10 justify-content-between">
                <span>panel-heading</span>
                <div class="display-flex column-gap-5">
                    <span>
                        <span class="badge">1</span>
                    </span>
                    <span>
                        <span class="badge badge-primary">1</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="panel-body">panel-body</div>
        <div class="panel-footer">panel-footer</div>
    </div>
    <div class="panel panel-info margin-bottom-0">
        <div class="panel-heading">
            <div class="display-flex column-gap-10 justify-content-between">
                <span>panel-heading</span>
                <div class="display-flex column-gap-5">
                    <span>
                        <span class="badge">1</span>
                    </span>
                    <span>
                        <span class="badge badge-primary">1</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="panel-body">panel-body</div>
        <div class="panel-footer">panel-footer</div>
    </div>
    <div class="panel panel-success margin-bottom-0">
        <div class="panel-heading">
            <div class="display-flex column-gap-10 justify-content-between">
                <span>panel-heading</span>
                <div class="display-flex column-gap-5">
                    <span>
                        <span class="badge">1</span>
                    </span>
                    <span>
                        <span class="badge badge-primary">1</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="panel-body">panel-body</div>
        <div class="panel-footer">panel-footer</div>
    </div>
    <div class="panel panel-warning margin-bottom-0">
        <div class="panel-heading">
            <div class="display-flex column-gap-10 justify-content-between">
                <span>panel-heading</span>
                <div class="display-flex column-gap-5">
                    <span>
                        <span class="badge">1</span>
                    </span>
                    <span>
                        <span class="badge badge-primary">1</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="panel-body">panel-body</div>
        <div class="panel-footer">panel-footer</div>
    </div>
    <div class="panel panel-danger margin-bottom-0">
        <div class="panel-heading">
            <div class="display-flex column-gap-10 justify-content-between">
                <span>panel-heading</span>
                <div class="display-flex column-gap-5">
                    <span>
                        <span class="badge">1</span>
                    </span>
                    <span>
                        <span class="badge badge-primary">1</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="panel-body">panel-body</div>
        <div class="panel-footer">panel-footer</div>
    </div>
</div>
```

#### Classes (css)

```css
panel-default
```

## Progress bars

### Example: Example 89

Standard

Striped

Animated

Indeterminate

Stacked

Stacked ratings

Stacked ratings with custom icon overlay
Poor Excelent

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-md gap-20">
    <div>
        <h5>Standard</h5>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-primary" style="width: 10%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-secondary" style="width: 20%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-info" style="width: 30%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-success" style="width: 40%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-warning" style="width: 50%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-danger" style="width: 60%;">
            </div>
        </div>
    </div>
    <div>
        <h5>Striped</h5>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-primary" style="width: 10%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-secondary" style="width: 20%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-info" style="width: 30%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-success" style="width: 40%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-warning" style="width: 50%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-danger" style="width: 60%;">
            </div>
        </div>
    </div>
    <div>
        <h5>Animated</h5>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-primary" style="width: 10%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-secondary" style="width: 20%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-info" style="width: 30%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-success" style="width: 40%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-warning" style="width: 50%;">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-danger" style="width: 60%;">
            </div>
        </div>
    </div>
    <div>
        <h5>Indeterminate</h5>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-indeterminate progress-bar-primary">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-indeterminate progress-bar-secondary">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-indeterminate progress-bar-info">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-indeterminate progress-bar-success">
            </div>
        </div>
        <div class="progress margin-bottom-20">
            <div class="progress-bar progress-bar-indeterminate progress-bar-warning">
            </div>
        </div>
        <div class="progress margin-bottom-20 width-50pct">
            <div class="progress-bar progress-bar-indeterminate progress-bar-danger" style="--indeterminate-width: 40px;">
            </div>
        </div>
    </div>
</div>
<h5>Stacked</h5>
<div class="bs-component">
    <div class="progress">
        <div class="progress-bar progress-bar-success progress-divider" style="width: 35%;">
        </div>
        <div class="progress-bar progress-bar-warning progress-divider" style="width: 20%;">
        </div>
        <div class="progress-bar progress-bar-info progress-divider progress-bar-striped progress-bar-animated" style="width: 10%;">
        </div>
    </div>
</div>
<h5 class="margin-top-25">Stacked ratings</h5>
<div class="bs-component">
    <div class="progress">
        <div class="progress-bar bg-rating-1 progress-divider" style="width: 15%;">
        </div>
        <div class="progress-bar bg-rating-2 progress-divider" style="width: 20%;">
        </div>
        <div class="progress-bar bg-rating-3 progress-divider" style="width: 25%;">
        </div>
        <div class="progress-bar bg-rating-4 progress-divider" style="width: 15%;">
        </div>
        <div class="progress-bar bg-rating-5 progress-divider" style="width: 25%;">
        </div>
    </div>
</div>
<div class="Divider position-relative width-100pct margin-top-25" style="padding-top: 15px; padding-bottom: 15px;">
    <div class="divider-line bg-light" style="width: 100%; height: 1px;">
    </div>
</div>
<h5>Stacked ratings with custom icon overlay</h5>
<div>
    <div class="display-flex justify-content-between">
        <label>Poor</label>
        <label>Excelent</label>
    </div>
    <div class="position-relative">
        <div class="progress">
            <div class="progress-bar bg-rating-1 progress-divider" style="width: 15%;">
            </div>
            <div class="progress-bar bg-rating-2 progress-divider" style="width: 20%;">
            </div>
            <div class="progress-bar bg-rating-3 progress-divider" style="width: 25%;">
            </div>
            <div class="progress-bar bg-rating-4 progress-divider" style="width: 15%;">
            </div>
            <div class="progress-bar bg-rating-5 progress-divider" style="width: 25%;">
            </div>
        </div>
        <span class="
                            bg-success
                            rounded-circle
                            border border-color-white border-width-2
                            shadow-accent
                            width-25
                            height-25
                            position-absolute
                            top-50pct
                            translate-x-50pct-y-50pct
                            display-grid place-items-center" style="left: 65%;">
            <span class="rioglyph rioglyph-truck">
            </span>
        </span>
    </div>
</div>
```

#### Classes (css)

```css
progress
```

## Wells

Forms

### Example: Example 90

Hi, my name is well-sm

Hi, my name is well

Hi, my name is well-lg

#### HTML (html)

```html
<div class="row">
    <div class="col-lg-4">
        <div class="well well-sm">Hi, my name is <code class="code-inline">well-sm</code>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="well">Hi, my name is <code class="code-inline">well</code>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="well well-lg">Hi, my name is <code class="code-inline">well-lg</code>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
well
```

## Forms

### Example: Example 91

Legend

Email
Password
Textarea

Number with controls
Number without controls

Radios Option one
Option two

Checkbox Lorem ipsum dolor sit amet.

Native Selects 1 2 3 4 5
Cancel Submit

Disabled input
Input success
Input warning
Input error

Total length m

Height m

Total length m

Height m

Total length m

Height m

Default input Some input info for the user
Input addon label Label Label

Input addons .00

Input groups Button

Button

Input with dropdown Action

Action

Default input Some input info for the user This is an error message
Input addon label Label This is a warning message Label

Input addons .00

Input groups Button

Button

Input with dropdown Action

Action

#### HTML (html)

```html
<div>
    <div class="row equal-height">
        <div class="col-12 col-md-6 margin-bottom-15">
            <div class="panel panel-default panel-body height-100pct shadow-default">
                <legend class="display-flex justify-content-between">
                    <span>Legend</span>
                    <div class="btn-group">
                        <div class="uikit-switch">
                            <label class="switch-label uikit-switch">
                                <input type="checkbox" class="switch-input">
                                <div class="switch-content" style="color: var(--brand-primary);">
                                    <div class="switch-text" data-on="Horizontal" data-off="Horizontal">
                                    </div>
                                    <div class="switch-handle">
                                    </div>
                                </div>
                            </label>
                        </div>
                    </div>
                </legend>
                <form>
                    <fieldset>
                        <div class="">
                            <div class="form-group ">
                                <label for="inputEmail">Email</label>
                                <input type="text" class="form-control" id="inputEmail" placeholder="Email" autocomplete="username">
                            </div>
                            <div class="form-group ">
                                <label for="inputPassword">Password</label>
                                <input type="password" class="form-control" id="inputPassword" placeholder="Password" autocomplete="current-password">
                            </div>
                            <div class="form-group ">
                                <label for="textArea">Textarea</label>
                                <textarea class="form-control" rows="3" id="textArea">
</textarea>
                            </div>
                        </div>
                        <hr>
                        <div class="display-flex gap-10">
                            <div class="form-group flex-1-1">
                                <label for="numberControls">Number with controls</label>
                                <input id="numberControls" type="number" placeholder="123456789" class="form-control">
                            </div>
                            <div class="form-group flex-1-1">
                                <label for="numberNoControls">Number without controls</label>
                                <input id="numberNoControls" type="number" placeholder="123456789" class="form-control no-controls">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Radios</label>
                            <div>
                                <label class="radio" for="radio1">
                                    <input type="radio" id="radio1" name="radioGroup">
                                    <span class="radio-text">
                                        <span>Option one</span>
                                    </span>
                                </label>
                            </div>
                            <div>
                                <label class="radio" for="radio2">
                                    <input type="radio" id="radio2" name="radioGroup">
                                    <span class="radio-text">
                                        <span>Option two</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="checkbox">Checkbox</label>
                            <div>
                                <label class="checkbox">
                                    <input id="checkbox" type="checkbox">
                                    <span class="checkbox-text">
                                        <span>Lorem ipsum dolor sit amet.</span>
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="select">Native Selects</label>
                            <select class="form-control" id="select">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="display-flex justify-content-end">
                                <button type="reset" class="btn btn-default margin-right-10">Cancel</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
        <div class="col-12 col-md-6 margin-bottom-15">
            <div class="panel panel-default panel-body height-100pct shadow-default">
                <form>
                    <div class="form-group">
                        <label for="disabledInput">Disabled input</label>
                        <input disabled="" class="form-control" id="disabledInput" type="text" placeholder="Disabled input here...">
                    </div>
                    <div class="form-group">
                        <div class="form-group has-success">
                            <label for="inputSuccess">Input success</label>
                            <input type="text" class="form-control" id="inputSuccess">
                        </div>
                        <div class="form-group has-warning">
                            <label for="inputWarning">Input warning</label>
                            <input type="text" class="form-control" id="inputWarning">
                        </div>
                        <div class="form-group has-error">
                            <label for="inputError">Input error</label>
                            <input type="text" class="form-control" id="inputError">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="totalLength">Total length</label>
                        <div class="input-group">
                            <input id="totalLength" class="form-control" type="text" value="6.52">
                            <div class="input-group-addon">m</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="height">Height</label>
                        <div class="input-group">
                            <input id="height" class="form-control" type="text" value="2.55">
                            <div class="input-group-addon">m</div>
                        </div>
                    </div>
                    <div class="form-group has-feedback has-error">
                        <label for="totalLength2">Total length</label>
                        <div class="input-group">
                            <input id="totalLength2" class="form-control" type="text" value="6.52">
                            <div class="input-group-addon">m</div>
                        </div>
                    </div>
                    <div class="form-group has-feedback has-warning">
                        <label for="height2">Height</label>
                        <div class="input-group">
                            <input id="height2" class="form-control" type="text" value="2.55">
                            <div class="input-group-addon">m</div>
                        </div>
                    </div>
                    <div class="form-group has-feedback has-success">
                        <label for="totalLength3">Total length</label>
                        <div class="input-group">
                            <input id="totalLength3" class="form-control" type="text" value="6.52">
                            <div class="input-group-addon">m</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="height3">Height</label>
                        <div class="input-group">
                            <input id="height3" class="form-control" type="text" disabled="" value="2.55">
                            <div class="input-group-addon">m</div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row equal-height">
        <div class="col-12 col-md-6 margin-bottom-15">
            <div class="panel panel-default panel-body height-100pct shadow-default">
                <form>
                    <div class="form-group">
                        <label for="defaultInput" class="display-inline-flex flex-wrap justify-content-between width-100pct">Default input<span class="text-italic">Some input info for the user</span>
                        </label>
                        <input id="defaultInput" type="text" class="form-control" value="rio">
                    </div>
                    <div class="form-group">
                        <label for="inputAddonLabel">Input addon label</label>
                        <div class="input-group">
                            <span class="input-group-addon input-group-addon-label">Label</span>
                            <input id="inputAddonLabel" class="form-control">
                            <span class="input-group-addon input-group-addon-label">Label</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputAddons">Input addons</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="rioglyph rioglyph-start">
                                </span>
                            </span>
                            <input id="InputAddons" class="form-control">
                            <span class="input-group-addon">.00</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputGroups">Input groups</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="rioglyph rioglyph-time">
                                </span>
                            </span>
                            <input id="inputGroups" type="text" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Button</button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="rioglyph rioglyph-search">
                                </span>
                            </span>
                            <input type="text" class="form-control" placeholder="Search">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button">Button</button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputWithDropdown">Input with dropdown</label>
                        <div class="input-group">
                            <input id="inputWithDropdown" class="form-control">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action<span class="caret">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action<span class="caret">
                                    </span>
                                </button>
                            </div>
                            <input class="form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-12 col-md-6 margin-bottom-15">
            <div class="panel panel-default panel-body height-100pct shadow-default">
                <form>
                    <div class="form-group has-feedback has-error">
                        <label for="defaultInput2" class="display-inline-flex flex-wrap justify-content-between width-100pct">Default input<span class="text-italic">Some input info for the user</span>
                        </label>
                        <input id="defaultInput2" type="text" class="form-control" value="invalid input">
                        <span class="form-control-feedback rioglyph rioglyph-error-sign">
                        </span>
                        <span class="help-block">
                            <span>This is an error message</span>
                        </span>
                    </div>
                    <div class="form-group has-feedback has-warning">
                        <label for="inputWithWarning">Input addon label</label>
                        <div class="input-group">
                            <span class="input-group-addon input-group-addon-label">Label</span>
                            <div class="form-control-feedback-wrapper">
                                <input id="inputWithWarning" class="form-control">
                                <span class="form-control-feedback rioglyph rioglyph-warning-sign">
                                </span>
                                <span class="help-block">
                                    <span>This is a warning message</span>
                                </span>
                            </div>
                            <span class="input-group-addon input-group-addon-label">Label</span>
                        </div>
                    </div>
                    <div class="form-group has-feedback has-error">
                        <label for="inputWithError">Input addons</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="rioglyph rioglyph-start">
                                </span>
                            </span>
                            <div class="form-control-feedback-wrapper">
                                <input id="inputWithError" class="form-control">
                                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                                </span>
                            </div>
                            <span class="input-group-addon">.00</span>
                        </div>
                    </div>
                    <div class="form-group has-feedback has-error">
                        <label for="inputGroupsWithError">Input groups</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="rioglyph rioglyph-time">
                                </span>
                            </span>
                            <input id="inputGroupsWithError" type="text" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Button</button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group has-feedback has-error">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="rioglyph rioglyph-search">
                                </span>
                            </span>
                            <input type="text" class="form-control" placeholder="Search">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button">Button</button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group has-feedback has-error">
                        <label for="inputDropdownWithError">Input with dropdown</label>
                        <div class="input-group">
                            <input id="inputDropdownWithError" class="form-control">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action<span class="caret">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group has-feedback has-error">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action<span class="caret">
                                    </span>
                                </button>
                            </div>
                            <input class="form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
```

## Form sized examples

### Example: Example 92

Size by form-Group class
form-group-sm
form-group-sm XX

form-group-sm 1 2 3 4 5

form-group-sm
form-group
form-group XX

form-group
form-group 1 2 3 4 5

form-group-lg XX

form-group-lg
form-group-lg
form-group-lg 1 2 3 4 5

Size by Input Class
input-sm
input-group-sm XX

input-sm
input-group-sm 1 2 3 4 5

input
input-group XX

input
input-group 1 2 3 4 5

input-lg
input-group-lg XX

input-lg
input-group-lg 1 2 3 4 5

#### HTML (html)

```html
<div class="row equal-height">
    <div class="col-12 col-md-6 margin-bottom-15">
        <div class="panel panel-default panel-body height-100pct shadow-default">
            <div class="h5">Size by form-Group class</div>
            <div class="form-group form-group-sm">
                <label for="input1">form-group-sm</label>
                <input id="input1" class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
            </div>
            <div class="form-group form-group-sm">
                <label for="input2">form-group-sm</label>
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-heart">
                        </span>
                    </span>
                    <input id="input2" class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
                    <span class="input-group-addon">XX</span>
                </div>
            </div>
            <div class="form-group form-group-sm">
                <label for="select1">form-group-sm</label>
                <select class="form-control" id="select1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
            <hr class="margin-top-25 margin-bottom-15">
            <div class="form-group form-group-sm has-error has-feedback">
                <label for="input3">form-group-sm</label>
                <input id="input3" type="text" class="form-control">
                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                </span>
            </div>
            <div class="form-group">
                <label for="input4">form-group</label>
                <input id="input4" class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
            </div>
            <div class="form-group">
                <label for="input5">form-group</label>
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-heart">
                        </span>
                    </span>
                    <input id="input5" class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
                    <span class="input-group-addon">XX</span>
                </div>
            </div>
            <div class="form-group has-error has-feedback">
                <label for="input6">form-group</label>
                <input id="input6" type="text" class="form-control">
                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                </span>
            </div>
            <div class="form-group">
                <label for="select2">form-group</label>
                <select class="form-control" id="select2">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
            <hr class="margin-top-25 margin-bottom-15">
            <div class="form-group form-group-lg">
                <label for="input7">form-group-lg</label>
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-heart">
                        </span>
                    </span>
                    <input id="input7" class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
                    <span class="input-group-addon">XX</span>
                </div>
            </div>
            <div class="form-group form-group-lg">
                <label for="input8">form-group-lg</label>
                <input id="input8" class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
            </div>
            <div class="form-group form-group-lg has-error has-feedback">
                <label for="input9">form-group-lg</label>
                <input id="input9" type="text" class="form-control">
                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                </span>
            </div>
            <div class="form-group form-group-lg">
                <label for="select3">form-group-lg</label>
                <select class="form-control" id="select3">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 margin-bottom-15">
        <div class="panel panel-default panel-body height-100pct shadow-default">
            <div class="h5">Size by Input Class</div>
            <div class="form-group">
                <label for="input10">input-sm</label>
                <input id="input10" class="form-control input-sm" type="text" placeholder="Lorem Ipsum Dolor">
            </div>
            <div class="form-group">
                <label for="input11">input-group-sm</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-heart">
                        </span>
                    </span>
                    <input id="input11" class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
                    <span class="input-group-addon">XX</span>
                </div>
            </div>
            <div class="form-group has-error has-feedback">
                <label for="input12">input-sm</label>
                <input id="input12" type="text" class="form-control input-sm">
                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                </span>
            </div>
            <div class="form-group">
                <label for="select4">input-group-sm</label>
                <div class="input-group input-group-sm">
                    <select class="form-control" id="select4">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
            </div>
            <hr class="margin-top-25 margin-bottom-15">
            <div class="form-group">
                <label for="input13">input</label>
                <input id="input13" class="form-control input" type="text" placeholder="Lorem Ipsum Dolor">
            </div>
            <div class="form-group">
                <label for="input14">input-group</label>
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-heart">
                        </span>
                    </span>
                    <input id="input14" class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
                    <span class="input-group-addon">XX</span>
                </div>
            </div>
            <div class="form-group has-error has-feedback">
                <label for="input15">input</label>
                <input id="input15" type="text" class="form-control input">
                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                </span>
            </div>
            <div class="form-group">
                <label for="select5">input-group</label>
                <div class="input-group">
                    <select class="form-control" id="select5">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
            </div>
            <hr class="margin-top-25 margin-bottom-15">
            <div class="form-group">
                <label for="input16">input-lg</label>
                <input id="input16" class="form-control input-lg" type="text" placeholder="Lorem Ipsum Dolor">
            </div>
            <div class="form-group">
                <label for="input17">input-group-lg</label>
                <div class="input-group input-group-lg">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-heart">
                        </span>
                    </span>
                    <input id="input17" class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
                    <span class="input-group-addon">XX</span>
                </div>
            </div>
            <div class="form-group has-error has-feedback">
                <label for="input18">input-lg</label>
                <input id="input18" type="text" class="form-control input-lg">
                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                </span>
            </div>
            <div class="form-group">
                <label for="select6">input-group-lg</label>
                <div class="input-group input-group-lg">
                    <select class="form-control" id="select6">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>
```

## Form with fieldset and legend

An HTML <fieldset> element is used to group related elements within a form. It is particularly useful for organizing complex forms by creating logical sections, improving both the form's structure and user experience. The <fieldset> can be paired with a <legend> element to provide a caption for the grouped content, making the form easier to understand and navigate.

Allows for selective processing of grouped data, making it useful for handling specific sections of a form independently when used with the FormData API.

### Example: Example 93

A form with fieldset Lorem ipsum
Dolor Sit amet

Lorem ipsum

Lorem ipsum

A form with fieldset disabled Lorem ipsum
Dolor Sit amet

Lorem ipsum

Lorem ipsum

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-sm gap-20">
    <fieldset>
        <div class="panel panel-default panel-body height-100pct shadow-default">
            <legend>A form with fieldset</legend>
            <div class="form-group">
                <label class="width-100pct">
                    <div>Lorem ipsum</div>
                    <input class="form-control margin-y-5" type="text" placeholder="Lorem Ipsum Dolor">
                    <div>Dolor Sit amet </div>
                </label>
            </div>
            <div class="form-group">
                <label class="width-100pct">
                    <div class="margin-bottom-5">Lorem ipsum</div>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="rioglyph rioglyph-user">
                            </span>
                        </span>
                        <input class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
                    </div>
                </label>
            </div>
            <div class="form-group has-error has-feedback">
                <label for="fieldset_1">Lorem ipsum</label>
                <input id="fieldset_1" type="text" class="form-control">
                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                </span>
            </div>
        </div>
    </fieldset>
    <fieldset disabled="">
        <div class="panel panel-default panel-body height-100pct shadow-default">
            <legend>A form with fieldset disabled</legend>
            <div class="form-group">
                <label class="width-100pct">
                    <div class="margin-bottom-5">Lorem ipsum</div>
                    <input class="form-control margin-y-5" type="text" placeholder="Lorem Ipsum Dolor">
                    <div>Dolor Sit amet </div>
                </label>
            </div>
            <div class="form-group">
                <label class="width-100pct">
                    <div class="margin-bottom-5">Lorem ipsum</div>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="rioglyph rioglyph-user">
                            </span>
                        </span>
                        <input class="form-control" type="text" placeholder="Lorem Ipsum Dolor">
                    </div>
                </label>
            </div>
            <div class="form-group has-error has-feedback">
                <label for="fieldset_2">Lorem ipsum</label>
                <input id="fieldset_2" type="text" class="form-control">
                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                </span>
            </div>
        </div>
    </fieldset>
</div>
```

## Input resize

Animate

### Example: Example 94

resize-none resize-vertical

#### HTML (html)

```html
<div>
    <code class="code-inline-first">resize-none</code>
    <code class="code-inline">resize-vertical</code>
</div>
```

## CSS Animations

### Example: Example 95

slide

fade

scale

rotate

slide-out

left up down right

3s 2s 1s 09s 08s 07s 06s 05s 04s 03s 02s 01s

d-3s d-2s d-1s d-09s d-08s d-07s d-06s d-05s d-04s d-03s d-02s d-01s

one time loop restart

linear ease ease-in ease-out ease-in-out

infinite no repeat repeat-1 repeat-2 repeat-3

Test animation Reset

#### React (tsx)

```tsx
import { useState } from 'react';

import classNames from '@rio-cloud/rio-uikit/classNames';
import RadioButton from '@rio-cloud/rio-uikit/RadioButton';

import AnimationDelayControl from './controls/AnimationDelayControl';
import AnimationDirectionControl from './controls/AnimationDirectionControl';
import AnimationDurationControl from './controls/AnimationDurationControl';
import AnimationLoopingControl from './controls/AnimationLoopingControl';
import AnimationEasingControl from './controls/AnimationEasingControl';
import AnimationPlaybackControl from './controls/AnimationPlaybackControl';
import AnimationRepeatControl from './controls/AnimationRepeatControl';
import type {
    AnimationDelay,
    AnimationDirection,
    AnimationDuration,
    AnimationEasing,
    AnimationLooping,
    AnimationRepeat,
} from './controls/animationControlOptions';

const AnimationsSlideExample = () => {
    const [currentAnimationType, setCurrentAnimationType] = useState('slide-out');
    const [currentAnimationDirection, setCurrentAnimationDirection] = useState<AnimationDirection>('left');
    const [currentAnimation, setCurrentAnimation] = useState<AnimationRepeat>('infinite');
    const [currentAnimationLooping, setCurrentAnimationLooping] = useState<AnimationLooping>('loop');
    const [currentAnimationEasing, setCurrentAnimationEasing] = useState<AnimationEasing>('ease-in-out');
    const [currentAnimationDelay, setCurrentAnimationDelay] = useState<AnimationDelay>('01s');
    const [currentAnimationDuration, setCurrentAnimationDuration] = useState<AnimationDuration>('1s');
    const [playAnimation, setPlayAnimation] = useState(false);

    const resetAnimation = () => setPlayAnimation(false);

    const animationClassName = classNames(
        playAnimation &&
            `animated-${currentAnimationDuration} animated-delay-${currentAnimationDelay} ${currentAnimation} ${currentAnimationEasing}`,
        playAnimation && currentAnimationLooping !== 'one-time' && currentAnimationLooping,
        playAnimation && `${currentAnimationType}-${currentAnimationDirection}`
    );

    return (
        <>
            <div className='display-flex justify-content-center'>
                <RadioButton
                    name='type'
                    onChange={() => {
                        setCurrentAnimationType('slide-out');
                        resetAnimation();
                    }}
                    checked={currentAnimationType === 'slide-out'}
                    inline
                >
                    slide-out
                </RadioButton>
            </div>
            <hr />
            <AnimationDirectionControl
                value={currentAnimationDirection}
                onChange={value => {
                    setCurrentAnimationDirection(value);
                    resetAnimation();
                }}
            />
            <hr />
            <AnimationDurationControl
                value={currentAnimationDuration}
                onChange={value => {
                    setCurrentAnimationDuration(value);
                    resetAnimation();
                }}
            />
            <hr />
            <AnimationDelayControl
                value={currentAnimationDelay}
                onChange={value => {
                    if (!value) {
                        return;
                    }

                    setCurrentAnimationDelay(value);
                    resetAnimation();
                }}
            />
            <hr />
            <AnimationLoopingControl
                value={currentAnimationLooping}
                onChange={value => {
                    setCurrentAnimationLooping(value);
                    resetAnimation();
                }}
            />
            <hr />
            <AnimationEasingControl
                value={currentAnimationEasing}
                onChange={value => {
                    setCurrentAnimationEasing(value);
                    resetAnimation();
                }}
            />
            <hr />
            <AnimationRepeatControl
                value={currentAnimation}
                onChange={value => {
                    setCurrentAnimation(value);
                    resetAnimation();
                }}
            />
            <hr />
            <AnimationPlaybackControl
                isPlaying={playAnimation}
                onPlay={() => setPlayAnimation(true)}
                onReset={resetAnimation}
            />
            <hr />
            <div className='display-flex justify-content-center align-items-center height-300 overflow-hidden'>
                <div className={animationClassName}>
                    <svg
                        className='margin-5 margin-left-0 scale-200'
                        width='50'
                        height='50'
                        xmlns='http://www.w3.org/2000/svg'
                    >
                        <path
                            d={
                                'M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 ' +
                                '3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.' +
                                '8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 ' +
                                '6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 ' +
                                '0-2.7-2.2-4.9-4.9-4.9z'
                            }
                            fillRule='evenodd'
                        />
                    </svg>
                </div>
            </div>
            <hr />
            <div className='display-flex justify-content-center'>
                <code className='code hidden-empty'>{animationClassName}</code>
            </div>
        </>
    );
};

export default AnimationsSlideExample;
```

#### HTML (html)

```html
<div>
    <ul class="nav nav-pills nav-pills-filled nav-justified margin-bottom-25">
        <li class="active">
            <div role="button" tabindex="0" class="text-transform-capitalize">slide</div>
        </li>
        <li class="">
            <div role="button" tabindex="0" class="text-transform-capitalize">fade</div>
        </li>
        <li class="">
            <div role="button" tabindex="0" class="text-transform-capitalize">scale</div>
        </li>
        <li class="">
            <div role="button" tabindex="0" class="text-transform-capitalize">rotate</div>
        </li>
    </ul>
    <div class="margin-top-15">
        <div class="display-flex justify-content-center">
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="type" value="" checked="">
                <span class="radio-text">
                    <span>slide-out</span>
                </span>
            </label>
        </div>
        <hr>
        <div class="display-flex justify-content-center">
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="direction" value="" checked="">
                <span class="radio-text">
                    <span>left</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="direction" value="">
                <span class="radio-text">
                    <span>up</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="direction" value="">
                <span class="radio-text">
                    <span>down</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="direction" value="">
                <span class="radio-text">
                    <span>right</span>
                </span>
            </label>
        </div>
        <hr>
        <div class="display-flex flex-wrap justify-content-center">
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>3s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>2s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="" checked="">
                <span class="radio-text">
                    <span>1s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>09s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>08s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>07s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>06s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>05s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>04s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>03s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>02s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="duration" value="">
                <span class="radio-text">
                    <span>01s</span>
                </span>
            </label>
        </div>
        <hr>
        <div class="display-flex flex-wrap justify-content-center">
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-3s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-2s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-1s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-09s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-08s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-07s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-06s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-05s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-04s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-03s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="">
                <span class="radio-text">
                    <span>d-02s</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="delay" value="" checked="">
                <span class="radio-text">
                    <span>d-01s</span>
                </span>
            </label>
        </div>
        <hr>
        <div class="display-flex justify-content-center">
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="looping" value="">
                <span class="radio-text">
                    <span>one time</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="looping" value="" checked="">
                <span class="radio-text">
                    <span>loop</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="looping" value="">
                <span class="radio-text">
                    <span>restart</span>
                </span>
            </label>
        </div>
        <hr>
        <div class="display-flex justify-content-center">
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="easing" value="">
                <span class="radio-text">
                    <span>linear</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="easing" value="">
                <span class="radio-text">
                    <span>ease</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="easing" value="">
                <span class="radio-text">
                    <span>ease-in</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="easing" value="">
                <span class="radio-text">
                    <span>ease-out</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="easing" value="" checked="">
                <span class="radio-text">
                    <span>ease-in-out</span>
                </span>
            </label>
        </div>
        <hr>
        <div class="display-flex justify-content-center">
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="animation" value="" checked="">
                <span class="radio-text">
                    <span>infinite</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="animation" value="">
                <span class="radio-text">
                    <span>no repeat</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="animation" value="">
                <span class="radio-text">
                    <span>repeat-1</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="animation" value="">
                <span class="radio-text">
                    <span>repeat-2</span>
                </span>
            </label>
            <label class="radio radio-inline" tabindex="0">
                <input type="radio" class="" name="animation" value="">
                <span class="radio-text">
                    <span>repeat-3</span>
                </span>
            </label>
        </div>
        <hr>
        <div class="display-flex justify-content-center">
            <button type="button" class="btn btn-primary btn-component margin-right-10" tabindex="0">Test animation</button>
            <button type="button" class="btn btn-default btn-component margin-left-10" tabindex="0">Reset</button>
        </div>
        <hr>
        <div class="display-flex justify-content-center align-items-center height-300 overflow-hidden">
            <div class="">
                <svg class="margin-5 margin-left-0 scale-200" width="50" height="50" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 50V0h50v50H0zm45.3-23.95c0-4.55-3.7-8.25-8.25-8.25s-8.25 3.7-8.25 8.25 3.7 8.25 8.25 8.25 8.25-3.7 8.25-8.25zm-23.6 7.8h5.05V18.2H21.7v15.65zm-8-15.65H5.25v15.65h4.9V27.6l4.25 6.25h5.35l-4.1-6.25c.45-.15.85-.4 1.15-.7 1.1-.9 1.8-2.3 1.8-3.8 0-2.7-2.2-4.9-4.9-4.9z" fill-rule="evenodd">
                    </path>
                </svg>
            </div>
        </div>
        <hr>
        <div class="display-flex justify-content-center">
            <code class="code hidden-empty">
            </code>
        </div>
    </div>
</div>
```

## Transition

CSS Filter

### Example: Example 96

Transition properties

transition-opacity
transition-position
transition-all

Transition timing functions

transition-ease
transition-ease-in-out

Transition duration

transition-duration-01
transition-duration-02
transition-duration-03
transition-duration-04
transition-duration-05

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-3-sm gap-50">
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Transition properties</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div>
            <code class="code margin-right-5">transition-opacity</code>
        </div>
        <div>
            <code class="code margin-right-5">transition-position</code>
        </div>
        <div>
            <code class="code margin-right-5">transition-all</code>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Transition timing functions</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div>
            <code class="code margin-right-5">transition-ease</code>
        </div>
        <div>
            <code class="code margin-right-5">transition-ease-in-out</code>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>Transition duration</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div>
            <code class="code margin-right-5">transition-duration-01</code>
        </div>
        <div>
            <code class="code margin-right-5">transition-duration-02</code>
        </div>
        <div>
            <code class="code margin-right-5">transition-duration-03</code>
        </div>
        <div>
            <code class="code margin-right-5">transition-duration-04</code>
        </div>
        <div>
            <code class="code margin-right-5">transition-duration-05</code>
        </div>
    </div>
</div>
```

## Blur

### Example: Example 97



#### HTML (html)

```html
<div class="display-flex flex-wrap gap-20">
    <div class="blur-0 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-1 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-2 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-3 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-4 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-5 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-6 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-7 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-8 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-9 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-10 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-20 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-30 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-40 width-30 height-30 rounded-circle bg-primary">
    </div>
    <div class="blur-50 width-30 height-30 rounded-circle bg-primary">
    </div>
</div>
```

#### Classes (css)

```css
blur-0
```

## Backdrop blur

Utilities

### Example: Example 98

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.

#### HTML (html)

```html
<div class="position-relative">
    <div class="max-width-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.</div>
    <div class="position-absolute top-15 left-15 space-y-10 pointer-events-none">
        <div class="display-flex flex-wrap gap-20">
            <div class="backdrop-blur-1 width-60 height-60 border rounded">
            </div>
            <div class="backdrop-blur-2 width-60 height-60 border rounded">
            </div>
            <div class="backdrop-blur-3 width-60 height-60 border rounded">
            </div>
            <div class="backdrop-blur-4 width-60 height-60 border rounded">
            </div>
            <div class="backdrop-blur-5 width-60 height-60 border rounded">
            </div>
        </div>
        <div class="display-flex flex-wrap gap-20">
            <div class="position-relative">
                <div class="position-absolute inset-0 bg-primary opacity-10 rounded">
                </div>
                <div class="backdrop-blur-1 width-60 height-60 border rounded position-relative">
                </div>
            </div>
            <div class="position-relative">
                <div class="position-absolute inset-0 bg-primary opacity-20 rounded">
                </div>
                <div class="backdrop-blur-2 width-60 height-60 border rounded position-relative">
                </div>
            </div>
            <div class="position-relative">
                <div class="position-absolute inset-0 bg-primary opacity-30 rounded">
                </div>
                <div class="backdrop-blur-3 width-60 height-60 border rounded position-relative">
                </div>
            </div>
            <div class="position-relative">
                <div class="position-absolute inset-0 bg-primary opacity-40 rounded">
                </div>
                <div class="backdrop-blur-4 width-60 height-60 border rounded position-relative">
                </div>
            </div>
            <div class="position-relative">
                <div class="position-absolute inset-0 bg-primary opacity-50 rounded">
                </div>
                <div class="backdrop-blur-5 width-60 height-60 border rounded position-relative">
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
backdrop-blur-1
```

## Aspect ratio

The aspect-ratio class property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

### Example: Example 99

With fixed width

1
1-2
2-1
4-3
16-9
16-10

With fixed height

1
1-2
2-1
4-3
16-9
16-10

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-20">
    <div class="margin-bottom-20">
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>With fixed width</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-column flex-wrap gap-20">
            <div class="width-50 bg-info rounded aspect-ratio-1 display-grid place-items-center">1</div>
            <div class="width-50 bg-info rounded aspect-ratio-1-2 display-grid place-items-center">1-2</div>
            <div class="width-50 bg-info rounded aspect-ratio-2-1 display-grid place-items-center">2-1</div>
            <div class="width-50 bg-info rounded aspect-ratio-4-3 display-grid place-items-center">4-3</div>
            <div class="width-50 bg-info rounded aspect-ratio-16-9 display-grid place-items-center">16-9</div>
            <div class="width-50 bg-info rounded aspect-ratio-16-10 display-grid place-items-center">16-10</div>
        </div>
    </div>
    <div>
        <div class="lead ">
            <div class="display-flex justify-content-between">
                <div>With fixed height</div>
            </div>
            <hr class="margin-top-10 border-color-light">
        </div>
        <div class="display-flex flex-wrap gap-20">
            <div class="height-50 bg-info rounded aspect-ratio-1 display-grid place-items-center">1</div>
            <div class="height-50 bg-info rounded aspect-ratio-1-2 display-grid place-items-center">1-2</div>
            <div class="height-50 bg-info rounded aspect-ratio-2-1 display-grid place-items-center">2-1</div>
            <div class="height-50 bg-info rounded aspect-ratio-4-3 display-grid place-items-center">4-3</div>
            <div class="height-50 bg-info rounded aspect-ratio-16-9 display-grid place-items-center">16-9</div>
            <div class="height-50 bg-info rounded aspect-ratio-16-10 display-grid place-items-center">16-10</div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
aspect-ratio-1
```

## Inset

### Example: Example 100

inset-0

inset-x-0

inset-y-0

Base element
Shorthand element

#### HTML (html)

```html
<div>
    <div class="display-flex flex-wrap gap-20 margin-bottom-20">
        <div>
            <label>inset-0</label>
            <div class="width-100 aspect-ratio-1 position-relative bg-lightest rounded shorthand-style">
                <div class="bg-info inset-0">
                </div>
            </div>
        </div>
        <div>
            <label>inset-x-0</label>
            <div class="width-100 aspect-ratio-1 position-relative bg-lightest rounded shorthand-style display-grid place-items-center">
                <div class="bg-info inset-x-0 padding-10">
                </div>
            </div>
        </div>
        <div>
            <label>inset-y-0</label>
            <div class="width-100 aspect-ratio-1 position-relative bg-lightest rounded shorthand-style display-grid place-items-center">
                <div class="bg-info inset-y-0 padding-10">
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="display-flex gap-20">
        <div class="display-flex align-items-center">
            <span class="display-inline-block width-20 height-20 bg-lightest rounded shorthand-style margin-right-5">
            </span>Base element
        </div>
        <div class="display-flex align-items-center">
            <span class="display-inline-block width-20 height-20 bg-info rounded margin-right-5">
            </span>Shorthand element
        </div>
    </div>
</div>
```

#### Classes (css)

```css
inset-0
```

## Helper

Transform

### Example: Example 101

clearance clearfix children-first-border-top-none first-child-border-top-none children-last-border-bottom-none last-child-border-bottom-none children-first-margin-top-0 first-child-margin-top-0 children-last-margin-bottom-0 last-child-margin-bottom-0

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-5 margin-bottom-20">
    <code class="code">clearance</code>
    <code class="code">clearfix</code>
    <code class="code">children-first-border-top-none</code>
    <code class="code">first-child-border-top-none</code>
    <code class="code">children-last-border-bottom-none</code>
    <code class="code">last-child-border-bottom-none</code>
    <code class="code">children-first-margin-top-0</code>
    <code class="code">first-child-margin-top-0</code>
    <code class="code">children-last-margin-bottom-0</code>
    <code class="code">last-child-margin-bottom-0</code>
</div>
```

## Rotate

> Note: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.

### Example: Example 102

Rotate 360°

Rotate -5° to 5°

#### HTML (html)

```html
<div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Rotate 360°</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex flex-wrap gap-20 margin-bottom-20">
        <div class="width-50 height-50 bg-info rounded position-relative rotate-0">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-45">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-90">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-135">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-180">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-225">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-270">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-315">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-360">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
    </div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Rotate -5° to 5°</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex flex-wrap gap-20">
        <div class="width-50 height-50 bg-info rounded position-relative rotate--5">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate--4">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate--3">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate--2">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate--1">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-1">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-2">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-3">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-4">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
        <div class="width-50 height-50 bg-info rounded position-relative rotate-5">
            <div class="width-10 height-10 bg-white position-absolute left-5 top-5">
            </div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
rotate-0
```

## Scale

> Note: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.

### Example: Example 103

Scale

Hover scale

#### HTML (html)

```html
<div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Scale</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex flex-wrap gap-20 margin-bottom-50">
        <div class="width-20 height-20 bg-info rounded scale-50">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-80">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-90">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-100">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-105">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-130">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-140">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-150">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-160">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-170">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-180">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-190">
        </div>
        <div class="width-20 height-20 bg-info rounded scale-200">
        </div>
    </div>
    <div class="lead ">
        <div class="display-flex justify-content-between">
            <div>Hover scale</div>
        </div>
        <hr class="margin-top-10 border-color-light">
    </div>
    <div class="display-flex flex-wrap gap-20 margin-bottom-20">
        <div class="width-20 height-20 bg-info rounded hover-scale-50">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-80">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-90">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-100">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-105">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-130">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-140">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-150">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-160">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-170">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-180">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-190">
        </div>
        <div class="width-20 height-20 bg-info rounded hover-scale-200">
        </div>
    </div>
</div>
```

#### Classes (css)

```css
scale-50
```

## Translate

Translate classes to move certain element with css transform. For example you can useposition-relative for the parent element and for the child element a combination of something likeposition-absolutetop-50pcttranslate-x-50pct-y-50pctleft-50pct

> Note: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform Syntax.

Visibility

### Example: Example 104



#### HTML (html)

```html
<div>
    <div class="position-relative padding-top-25 padding-bottom-25">
        <hr class="margin-0 border-width-2">
        <span class="
                    bg-white
                    padding-10
                    text-size-h3
                    position-absolute
                    top-50pct
                    left-50pct
                    translate-x-50pct-y-50pct">
            <span class="rioglyph rioglyph-driver">
            </span>
            <span class="rioglyph rioglyph-arrow-right margin-left-5 margin-right-5">
            </span>
            <span class="rioglyph rioglyph-driver">
            </span>
        </span>
    </div>
</div>
```

#### Classes (css)

```css
translate-x-50pct
```

## Display

### Example: Example 105

display-block display-inline-block display-flex display-inline-flex display-inline display-none

#### HTML (html)

```html
<div>
    <code class="code-inline-first">display-block</code>
    <code class="code-inline">display-inline-block</code>
    <code class="code-inline">display-flex</code>
    <code class="code-inline">display-inline-flex</code>
    <code class="code-inline">display-inline</code>
    <code class="code-inline">display-none</code>
</div>
```

#### Classes (css)

```css
...-xs
```

## Overflow

### Example: Example 106

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

#### HTML (html)

```html
<div class="row margin-top-25 margin-bottom-25">
    <div class="col-12 col-ls-4 margin-bottom-25-xs">
        <div class="bg-white padding-10 height-100 overflow-hidden">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

            In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

            Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</div>
    </div>
    <div class="col-12 col-ls-4 margin-bottom-25-xs">
        <div class="bg-white padding-10 height-100 overflow-x-hidden overflow-y-scroll">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

            In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

            Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</div>
    </div>
    <div class="col-12 col-ls-4">
        <div class="bg-white padding-10 height-100 overflow-x-scroll overflow-y-hidden">
            <div class="width-500">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</div>
        </div>
    </div>
</div>
```

#### Classes (css)

```css
overflow-auto
```

## Visibility

### Example: Example 107

Visible only at a certain breakpoint

visible-xs visible-ls visible-sm visible-md visible-lg visible-xl
Visible from a certain breakpoint

visible-min-ls visible-min-sm visible-min-md visible-min-lg
Hidden only at a certain breakpoint

hidden-xs hidden-ls hidden-sm hidden-md hidden-lg hidden-xl
Hidden from a certain breakpoint

hidden-min-ls hidden-min-sm hidden-min-md hidden-min-lg
Hidden when element is empty

hidden-empty
screen-xs: >480px screen-ls: 480px screen-sm: 768px screen-md: 992px screen-lg: 1200px screen-xl: 1700px

.visible-xs Visible Hidden Hidden Hidden Hidden Hidden
.visible-ls Hidden Visible Hidden Hidden Hidden Hidden
.visible-sm Hidden Hidden Visible Hidden Hidden Hidden
.visible-md Hidden Hidden Hidden Visible Hidden Hidden
.visible-lg Hidden Hidden Hidden Hidden Visible Hidden
.visible-xl Hidden Hidden Hidden Hidden Hidden Visible

.hidden-xs Hidden Visible Visible Visible Visible Visible
.hidden-ls Visible Hidden Visible Visible Visible Visible
.hidden-sm Visible Visible Hidden Visible Visible Visible
.hidden-md Visible Visible Visible Hidden Visible Visible
.hidden-lg Visible Visible Visible Visible Hidden Visible
.hidden-xl Visible Visible Visible Visible Visible Hidden

.visible-min-ls Hidden Visible Visible Visible Visible Visible
.visible-min-sm Hidden Hidden Visible Visible Visible Visible
.visible-min-md Hidden Hidden Hidden Visible Visible Visible
.visible-min-lg Hidden Hidden Hidden Hidden Visible Visible

.hidden-min-ls Visible Hidden Hidden Hidden Hidden Hidden
.hidden-min-sm Visible Visible Hidden Hidden Hidden Hidden
.hidden-min-md Visible Visible Visible Hidden Hidden Hidden
.hidden-min-lg Visible Visible Visible Visible Hidden Hidden

Print

visible-print visible-print-inline hidden-print

Visibility only classes

All the above classes for hidden and visible are based on "display: none". The following class affects only visibility, allowing it to impact surrounding elements.
visibility-hidden

#### HTML (html)

```html
<div>
    <div>
        <div class="margin-bottom-20">
            <div class="description-headline">
                <h5 class="margin-top-0">Visible only at a certain breakpoint</h5>
            </div>
        </div>
        <code class="code-inline-first">visible-xs</code>
        <code class="code-inline">visible-ls</code>
        <code class="code-inline">visible-sm</code>
        <code class="code-inline">visible-md</code>
        <code class="code-inline">visible-lg</code>
        <code class="code-inline">visible-xl</code>
    </div>
    <div>
        <div class="margin-top-25 margin-bottom--5">
            <div class="description-headline">
                <h5 class="">Visible from a certain breakpoint</h5>
            </div>
        </div>
        <code class="code-inline-first">visible-min-ls</code>
        <code class="code-inline">visible-min-sm</code>
        <code class="code-inline">visible-min-md</code>
        <code class="code-inline">visible-min-lg</code>
    </div>
    <div>
        <div class="margin-top-25 margin-bottom--5">
            <div class="description-headline">
                <h5 class="">Hidden only at a certain breakpoint</h5>
            </div>
        </div>
        <code class="code-inline-first">hidden-xs</code>
        <code class="code-inline">hidden-ls</code>
        <code class="code-inline">hidden-sm</code>
        <code class="code-inline">hidden-md</code>
        <code class="code-inline">hidden-lg</code>
        <code class="code-inline">hidden-xl</code>
    </div>
    <div>
        <div class="margin-top-25 margin-bottom--5">
            <div class="description-headline">
                <h5 class="">Hidden from a certain breakpoint</h5>
            </div>
        </div>
        <code class="code-inline-first">hidden-min-ls</code>
        <code class="code-inline">hidden-min-sm</code>
        <code class="code-inline">hidden-min-md</code>
        <code class="code-inline">hidden-min-lg</code>
    </div>
    <div>
        <div class="margin-top-25 margin-bottom--5">
            <div class="description-headline">
                <h5 class="">Hidden when element is empty</h5>
            </div>
        </div>
        <code class="code-inline-first">hidden-empty</code>
    </div>
    <div class="table-responsive margin-top-15">
        <table class="table table-grid-lines table-sticky-column-first border">
            <thead>
                <tr>
                    <th>
                    </th>
                    <th>screen-xs: &gt;480px</th>
                    <th>screen-ls: 480px</th>
                    <th>screen-sm: 768px</th>
                    <th>screen-md: 992px</th>
                    <th>screen-lg: 1200px</th>
                    <th>screen-xl: 1700px</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-nowrap">
                        <code>.visible-xs</code>
                    </td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.visible-ls</code>
                    </td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.visible-sm</code>
                    </td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.visible-md</code>
                    </td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.visible-lg</code>
                    </td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.visible-xl</code>
                    </td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td colspan="7">
                    </td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.hidden-xs</code>
                    </td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.hidden-ls</code>
                    </td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.hidden-sm</code>
                    </td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.hidden-md</code>
                    </td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.hidden-lg</code>
                    </td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.hidden-xl</code>
                    </td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td colspan="7">
                    </td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.visible-min-ls</code>
                    </td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.visible-min-sm</code>
                    </td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.visible-min-md</code>
                    </td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.visible-min-lg</code>
                    </td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td colspan="7">
                    </td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.hidden-min-ls</code>
                    </td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.hidden-min-sm</code>
                    </td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.hidden-min-md</code>
                    </td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                </tr>
                <tr>
                    <td class="text-nowrap">
                        <code>.hidden-min-lg</code>
                    </td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-info">Visible</td>
                    <td class="text-center bg-lightest">Hidden</td>
                    <td class="text-center bg-lightest">Hidden</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="Divider position-relative width-100pct margin-top-25" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div>
        <div class="margin-top-25 margin-bottom--5">
            <div class="description-headline">
                <h5 class="">Print</h5>
            </div>
        </div>
        <code class="code-inline-first">visible-print</code>
        <code class="code-inline">visible-print-inline</code>
        <code class="code-inline">hidden-print</code>
    </div>
    <div class="Divider position-relative width-100pct margin-top-25" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div>
        <div class="margin-bottom-0">
            <div class="description-headline">
                <h5 class="">Visibility only classes</h5>
            </div>
        </div>
        <p>All the above classes for hidden and visible are based on "display: none". The following class affects only visibility, allowing it to impact surrounding elements.</p>
        <code class="code-inline-first">visibility-hidden</code>
    </div>
</div>
```

## Z-index

### Example: Example 108



#### HTML (html)

```html
<div class="display-flex">
    <div class="bg-info width-50 height-50 rounded rotate-45 z-index-2 position-relative">
    </div>
    <div class="shorthand-style width-50 height-50 rounded bg-success rotate-45 z-index-3 hover-z-index-1 position-relative">
    </div>
    <div class="bg-info width-50 height-50 rounded rotate-45 z-index-2 position-relative">
    </div>
</div>
```

#### Classes (css)

```css
z-index-1
```