Utility

Ready Added in 2.0.0

A collection of useful utility classes to style your content.

Panel

Gloss uses panels to outline certain sections of your content. These can be arranged in grid columns from the Grid component, for example.

Add the .gls-panel class to a <div> element to create a position context, set box-sizing to border-box, apply a clearfix and to remove the bottom margin of its last child element.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="gls-child-width-1-3@s" gls-grid>
    <div>
        <div class="gls-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="gls-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="gls-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
</div>

Add the .gls-panel-scrollable class to give the panel a fixed height and make it scrollable, if its content exceeds the height. You can also add one of the .gls-height-* classes to apply a different height.

- Category 1
- Category 2
  - Category 2.1
  - Category 2.2
  - Category 2.3
    - Category 2.3.1
    - Category 2.3.2
  - Category 2.4
- Category 3
- Category 4

<div class="gls-panel gls-panel-scrollable">
    <ul class="gls-list">
        <li><label><input class="gls-checkbox" type="checkbox"> Category 1</label></li>
        <li>
            <label><input class="gls-checkbox" type="checkbox"> Category 2</label>
            <ul>
                <li><label><input class="gls-checkbox" type="checkbox"> Category 2.1</label></li>
                <li><label><input class="gls-checkbox" type="checkbox"> Category 2.2</label></li>
                <li>
                    <label><input class="gls-checkbox" type="checkbox"> Category 2.3</label>
                    <ul>
                        <li><label><input class="gls-checkbox" type="checkbox"> Category 2.3.1</label></li>
                        <li><label><input class="gls-checkbox" type="checkbox"> Category 2.3.2</label></li>
                    </ul>
                </li>
                <li><label><input class="gls-checkbox" type="checkbox"> Category 2.4</label></li>
            </ul>
        </li>
        <li><label><input class="gls-checkbox" type="checkbox"> Category 3</label></li>
        <li><label><input class="gls-checkbox" type="checkbox"> Category 4</label></li>
    </ul>

</div>

Clearing and floating

Floating elements are taken from the document flow and aligned to the left or right side of their container. It is important to clear floats or in the worst case, you might end up with a scrambled site. The following classes will help you to set up basic layouts.

Class	Description
`.gls-float-left`	Add this class to float the element to the left.
`.gls-float-right`	Add this class to float the element to the right.
`.gls-clearfix`	Add this class to a parent container to clear floats. Alternatively, you can create a new block format context, e.g. by adding the `.gls-overflow-hidden` class.

Right

Left

<div class="gls-clearfix">
    <div class="gls-float-right">
        <div class="gls-card gls-card-default gls-card-body">Right</div>
    </div>
    <div class="gls-float-left">
        <div class="gls-card gls-card-default gls-card-body">Left</div>
    </div>
</div>

Overflow

These utilities provide different classes to modify an element’s overflow behavior.

Class	Description
`.gls-overflow-hidden`	Add this class to clip content that exceeds the dimensions of its container.
`.gls-overflow-auto`	Add this class to create a container that provides a horizontal or vertical scrollbar whenever the elements content it are wider or higher than the container itself.

Note The .gls-overflow-auto class is useful when having to handle tables on a responsive website, which at some point would just get too big. It also works great on <pre> elements.

Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading
Table Footer	Table Footer	Table Footer	Table Footer	Table Footer	Table Footer	Table Footer	Table Footer
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data

<div class="gls-overflow-auto gls-height-small">
    <table class="gls-table gls-table-striped gls-table-condensed gls-text-nowrap">
        <thead>
            <tr>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
        </tbody>
    </table>
</div>

Overflow Auto

Add the gls-overflow-auto attribute to expand an element’s height to make it fill the remaining height of a parent container. It provides a vertical scrollbar if its content is higher than the expanded height.

Some content before the overflow auto container.

Some content after the overflow auto container.

<div class="gls-height-medium">
    <div class="js-wrapper">

        <p>Some content before the overflow auto container.</p>

        <div gls-overflow-auto="selContainer: .gls-height-medium; selContent: .js-wrapper">
            <div class="gls-grid-small" gls-grid>
                <div class="gls-width-1-2"><img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt=""></div>
                <div class="gls-width-1-2"><img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt=""></div>
                <div class="gls-width-1-2"><img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt=""></div>
                <div class="gls-width-1-2"><img src="https://utahhealthcare.github.io/gloss-docs/images/photo2.jpg" width="1800" height="1200" alt=""></div>
            </div>
        </div>

        <p>Some content after the overflow auto container.</p>

    </div>
</div>

It’s often used within the Modal component.

<div id="my-id" gls-modal>
    <div class="gls-modal-dialog" gls-overflow-auto></div>
</div>

Open

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<a class="gls-button gls-button-default" href="#modal-overflow" gls-toggle>Open</a>

<div id="modal-overflow" gls-modal>
    <div class="gls-modal-dialog">

        <button class="gls-modal-close-default" type="button" gls-close></button>

        <div class="gls-modal-header">
            <h2 class="gls-modal-title">Headline</h2>
        </div>

        <div class="gls-modal-body" gls-overflow-auto>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

        <div class="gls-modal-footer gls-text-right">
            <button class="gls-button gls-button-default gls-modal-close" type="button">Cancel</button>
            <button class="gls-button gls-button-primary" type="button">Save</button>
        </div>

    </div>
</div>

You can change the target heights by adding the selContainer and selContent options to the attribute. Learn more

Option	Value	Default	Description
`selContainer`	String	`.gls-modal`	CSS selector for the container element which provides the height.
`selContent`	String	`.gls-modal-dialog`	CSS selector for the element which wraps the inner content to provide its height.

Resize

These utilities provide different classes for resizing elements.

Class	Description
`.gls-resize`	Add this class to enable horizontal and vertical resizing.
`.gls-resize-vertical`	Add this class to enable only vertical resizing.

Grab and drag the bottom right corner of each box below to resize it

            
<!-- Resize vertically -->
<div gls-grid>
    <div class="gls-width-1-2">...</div>
    <div class="gls-width-1-2">...</div>
</div>

<div class="gls-child-width-1-2" gls-grid>
    <div></div>
    <div></div>
</div>

            
<!-- Resize horizontally and vertically -->
<div gls-grid>
    <div class="gls-width-1-2">...</div>
    <div class="gls-width-1-2">...</div>
</div>

<div class="gls-child-width-1-2" gls-grid>
    <div></div>
    <div></div>
</div>

<div class="gls-child-width-1-2@s" gls-grid>
    <div>
        <pre class="gls-resize-vertical">
            <code>
&lt;!-- Resize vertically --&gt;
&lt;div gls-grid&gt;
    &lt;div class="gls-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="gls-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="gls-child-width-1-2" gls-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
    <div>
        <pre class="gls-resize">
            <code>
&lt;!-- Resize horizontally and vertically --&gt;
&lt;div gls-grid&gt;
    &lt;div class="gls-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="gls-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="gls-child-width-1-2" gls-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
</div>

Display

Add one of these classes to change the display properties of an element.

Class	Description
`.gls-display-block`	Forces the element to behave like a block element.
`.gls-display-inline`	Forces the element to behave like an inline element.
`.gls-display-inline-block`	Forces the element to behave like an inline-block element.

Inline

These classes are often used to create a position context on containers with an image as a child. The container keeps the same size as the image as well as the responsive behavior. That way content that is placed on top of the image with the Position component will not flow out of the image dimensions.

Class	Description
`.gls-inline`	Add this class to apply inline-block behavior to an element, add a max-width of 100% and to create a position context.
`.gls-inline-clip`	Same as `.gls-inline`, it but also clips overflowing child elements.

<div class="gls-inline">
    <img src="" width="" height="" alt="">
    <div class="gls-position-cover"></div>
</div>

Overlay

<div class="gls-inline">
    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="300" height="200" alt="">
    <div class="gls-position-medium gls-position-cover gls-overlay gls-overlay-default gls-flex gls-flex-center gls-flex-middle">Overlay</div>
</div>

Responsive objects

In Gloss <img>, <canvas>, <audio> and <video> elements adapt to the width of their parent container by default. To apply responsive behavior to iframes, add the gls-responsive attribute . For other elements or to apply a different behavior, just add one of the following classes.

Class	Description
`.gls-responsive-width`	Add this class to apply the same responsive behavior to any other element. It adjusts the object’s width according to its parent’s width, keeping the original aspect ratio.
`.gls-responsive-height`	Add this class to adjust the object’s height (instead of its width) according to its parent’s height, keeping the original aspect ratio.
`.gls-preserve-width`	Add this class to avoid the default responsive behavior and preserve the original image dimensions. You can also add the class to a parent element and it will be applied to all relevant elements content it. If you are embedding Google Maps into your site, you may need this to fix the map’s images.

<img class="gls-responsive-height" src="" width="" height="" alt="">

<iframe src="" width="" height="" gls-responsive></iframe>

Object Fit and Position

Define how the content of an image or video should be resized to fit its element.

Class	Description
`.gls-object-cover`	Scales the image by keeping its aspect ratio to completely cover the content box.
`.gls-object-contain`	Scales the image by keeping its aspect ratio as far as its width and height can fit inside the content box.
`.gls-object-fill`	Scales the image to fill the element’s content box.
`.gls-object-none`	Doesn’t scale the image at all.
`.gls-object-scale-down`	Like contain, but never up-scales.

Note Since images and video are responsive by default in UIki, it’s mandatory to set the aspect ratio when using one of these classes.

<img class="gls-object-cover" src="" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1">

<div class="gls-child-width-1-2@s" gls-grid>
    <div>
        <img class="gls-object-cover" src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
    </div>
    <div>
        <img class="gls-object-contain" src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
    </div>
</div>

To modify the alignment of the image or video within its element, add one of the gls-object-position-* classes.

Class	Description
`.gls-object-position-top-left`	Align to the top left.
`.gls-object-position-top-center`	Align to the top.
`.gls-object-position-top-right`	Align to the top right.
`.gls-object-position-center-left`	Align to the left.
`.gls-object-position-center-center`	Align to the center.
`.gls-object-position-center-right`	Align to the right.
`.gls-object-position-bottom-left`	Align to the bottom left.
`.gls-object-position-bottom-center`	Align to the bottom.
`.gls-object-position-bottom-right`	Align to the bottom right.

Border radius

To modify the border radius of an element, like an image, add one of the following classes.

Class	Description
`.gls-border-rounded`	Add this class to apply rounded corners.
`.gls-border-circle`	Add this class to apply a circled shape.
`.gls-border-pill`	Add this class to apply a pill shape.

<img class="gls-border-rounded" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="200" height="200" alt="Border rounded">
<img class="gls-border-circle" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="200" height="200" alt="Border circle">
<img class="gls-border-pill" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="200" height="200" alt="Border pill">

Box shadow

You can apply different box shadows to elements. Just add one of the following classes.

Class	Description
`.gls-box-shadow-small`	Add this class to apply a small box shadow.
`.gls-box-shadow-medium`	Add this class to apply a medium box shadow.
`.gls-box-shadow-large`	Add this class to apply a large box shadow.
`.gls-box-shadow-xlarge`	Add this class to apply a very large box shadow.

<div class="gls-box-shadow-small"></div>

Small

Medium

Large

X-Large

<div class="gls-child-width-1-2@s gls-text-center" gls-grid>
    <div>
        <div class="gls-box-shadow-small gls-padding">Small</div>
    </div>

    <div>
        <div class="gls-box-shadow-medium gls-padding">Medium</div>
    </div>

    <div>
        <div class="gls-box-shadow-large gls-padding">Large</div>
    </div>

    <div>
        <div class="gls-box-shadow-xlarge gls-padding">X-Large</div>
    </div>
</div>

Box shadow bottom

To apply a box shadow at the bottom of an element so that appears to be hovering, add the .gls-box-shadow-bottom class. This can also be combined with one of the other .gls-box-shadow-* modifiers.

<div class="gls-box-shadow-bottom"></div>

Box shadow bottom

<div class="gls-box-shadow-bottom gls-box-shadow-small gls-width-1-2@s gls-text-center">
    <div class="gls-background-default gls-padding-large">
        Box shadow bottom
    </div>
</div>

Hover

To apply a box shadow on hover, add one of the following classes. This can also be used to modify the shadow size on hover. To do so, just combine them with one of the classes above.

Class	Description
`.gls-box-shadow-hover-small`	Add this class to apply a small box shadow on hover.
`.gls-box-shadow-hover-medium`	Add this class to apply a medium box shadow on hover.
`.gls-box-shadow-hover-large`	Add this class to apply a large box shadow on hover.
`.gls-box-shadow-hover-xlarge`	Add this class to apply a very large box shadow on hover.

<div class="gls-box-shadow-hover-small"></div>

Hover Small

Hover X-Large

Small + Hover Large

X-Large + Hover Medium

<div class="gls-child-width-1-2@s gls-text-center" gls-grid>
    <div>
        <div class="gls-box-shadow-hover-small gls-padding">Hover Small</div>
    </div>

    <div>
        <div class="gls-box-shadow-hover-xlarge gls-padding">Hover X-Large</div>
    </div>

    <div>
        <div class="gls-box-shadow-small gls-box-shadow-hover-large gls-padding">Small + Hover Large</div>
    </div>

    <div>
        <div class="gls-box-shadow-xlarge gls-box-shadow-hover-medium gls-padding">X-Large + Hover Medium</div>
    </div>
</div>

Drop cap

With the .gls-dropcap class you can achieve a drop cap within a text by adding it directly to the <p> element.

Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="gls-dropcap">Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Logo

With the new .gls-logo class you can easily define your logo, for example within your navbar.

<a class="gls-logo" href=""></a>

Logo
```
<a class="gls-logo" href="#">Logo</a>
```

Add the .gls-light class from the Inverse component when displaying the image on dark backgrounds, so that its color will automatically be inverted for better visibility.

Logo

<div class="gls-panel gls-padding gls-background-tertiary gls-light">
    <a class="gls-logo" href="#">Logo</a>
</div>

Logo image

You can also use an <img> element, for example an SVG, as a logo.

<a class="gls-logo" href="">
    <img src="" width="" height="" alt="">
</a>

You can even automatically display alternative logos for light and dark backgrounds by using the Inverse component. Just add the .gls-logo-inverse class to a second logo image. Depending on the color mode, the inverted logo will be displayed when the .gls-light or .gls-dark class is applied to the parent element.

<div class="gls-light">
    <a class="gls-logo" href="">
        <img src="" width="" height="" alt="">
        <img class="gls-logo-inverse" src="" width="" height="" alt="">
    </a>
</div>

<div class="gls-child-width-expand@s" gls-grid>
    <div>
        <div class="gls-panel gls-padding gls-background-muted">
            <a class="gls-logo" href="#">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/logo-placeholder.svg" width="130" height="70" alt="">
                <img class="gls-logo-inverse" src="https://utahhealthcare.github.io/gloss-docs/images/logo-placeholder-light.svg" width="130" height="70" alt="">
            </a>
        </div>
    </div>
    <div>
        <div class="gls-panel gls-padding gls-background-tertiary gls-light">
            <a class="gls-logo" href="#">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/logo-placeholder.svg" width="130" height="70" alt="">
                <img class="gls-logo-inverse" src="https://utahhealthcare.github.io/gloss-docs/images/logo-placeholder-light.svg" width="130" height="70" alt="">
            </a>
        </div>
    </div>
</div>

Note To inject an SVG logo as inline SVG, use the SVG component.

Blend modes

Add one of the following classes to apply different blend modes to your backgrounds, for example when placing them on images. You can combine these with the Overlay component. For a better understanding of how background blend modes work, take a look at this CSS Tricks article.

Class	Description
`.gls-blend-multiply`	This class sets the blend mode to multiply.
`.gls-blend-screen`	This class sets the blend mode to screen.
`.gls-blend-overlay`	This class sets the blend mode to overlay.
`.gls-blend-darken`	This class sets the blend mode to darken.
`.gls-blend-lighten`	This class sets the blend mode to lighten.
`.gls-blend-color-dodge`	This class sets the blend mode to color dodge.
`.gls-blend-color-burn`	This class sets the blend mode to color burn.
`.gls-blend-hard-light`	This class sets the blend mode to hard light.
`.gls-blend-soft-light`	This class sets the blend mode to soft light.
`.gls-blend-difference`	This class sets the blend mode to difference.
`.gls-blend-exclusion`	This class sets the blend mode to exclusion.
`.gls-blend-hue`	This class sets the blend mode to hue.
`.gls-blend-saturation`	This class sets the blend mode to saturation.
`.gls-blend-color`	This class sets the blend mode to color.
`.gls-blend-luminosity`	This class sets the blend mode to luminosity.

<div class="gls-position-relative">
    <div class="gls-blend-multiply gls-overlay gls-overlay-primary"></div>
    <img src="" width="" height="" alt="">
</div>

Multiply

Screen

Overlay

Darken

Lighten

Color Dodge

Color Burn

Hard Light

Soft Light

Difference

Exclusion

Hue

Saturation

Color

Luminosity

<div class="gls-child-width-1-2 gls-child-width-1-3@s gls-grid-small gls-light" gls-grid>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-multiply" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Multiply">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Multiply</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-screen" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Screen">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Screen</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-overlay" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Overlay">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Overlay</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-darken" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Darken">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Darken</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-lighten" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Lighten">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Lighten</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-color-dodge" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Color Dodge">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Color Dodge</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-color-burn" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Color Burn">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Color Burn</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-hard-light" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Hard Light">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Hard Light</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-soft-light" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Soft Light">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Soft Light</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-difference" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Difference">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Difference</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-exclusion" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Exclusion">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Exclusion</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-hue" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Hue">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Hue</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-saturation" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Saturation">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Saturation</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-color" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Color">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Color</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-inline gls-background-primary">
            <img class="gls-blend-luminosity" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="Blend Luminosity">
            <div class="gls-position-center">
                <p class="gls-h4 gls-margin-remove">Luminosity</p>
            </div>
        </div>
    </div>
</div>

Transform center

To center an element to itself, add the gls-transform-center class. This is particularly useful for absolute positioning.

<div class="gls-inline">
    <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt="">
    <a class="gls-position-absolute gls-transform-center" style="left: 50%; top: 50%" href="#" gls-marker></a>
</div>

Transform origin

To modify the origin of an animation, like scaling, add one of the gls-transform-origin-* classes. This can be combined with the Animation component.

Class	Description
`.gls-transform-origin-top-left`	The transition originates from the top left.
`.gls-transform-origin-top-center`	The transition originates from the top.
`.gls-transform-origin-top-right`	The transition originates from the top right.
`.gls-transform-origin-center-left`	The transition originates from the left.
`.gls-transform-origin-center-right`	The transition originates from the right.
`.gls-transform-origin-bottom-left`	The transition originates from the bottom left.
`.gls-transform-origin-bottom-center`	The transition originates from the bottom.
`.gls-transform-origin-bottom-right`	The transition originates from the bottom right.

<div class="gls-transform-origin-bottom-right gls-animation-scale-up"></div>

Bottom Right

Top Center

Bottom Center

<div class="gls-child-width-1-3@m" gls-grid>
    <div class="gls-animation-toggle" tabindex="0">
        <div class="gls-transform-origin-bottom-right gls-card gls-card-default gls-card-body gls-animation-scale-up">
            <p class="gls-text-center">Bottom Right</p>
        </div>
    </div>
    <div class="gls-animation-toggle" tabindex="0">
        <div class="gls-transform-origin-top-center gls-card gls-card-default gls-card-body gls-animation-scale-up">
            <p class="gls-text-center">Top Center</p>
        </div>
    </div>
    <div class="gls-animation-toggle" tabindex="0">
        <div class="gls-transform-origin-bottom-center gls-card gls-card-default gls-card-body gls-animation-scale-up">
            <p class="gls-text-center">Bottom Center</p>
        </div>
    </div>
</div>

Disabled

To disable the click behavior of any element, like a <a>, <button> or <iframe> element, add the .gls-disabled class.

Disabled

<a class="gls-disabled gls-button gls-button-default" href="#">Disabled</a>

Drag

To apply a move cursor to elements that are being dragged, add the .gls-drag class.

<div class="gls-drag"></div>

<div class="gls-drag gls-width-small gls-padding gls-background-muted gls-text-center">
    <i gls-icon="icon: move; ratio: 2"></i>
</div>

To create a box shadow on an upload area when dragging a file over it, add the .gls-dragover class.