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>
    

Scrollable panel

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.

  • <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
  • <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.
  • Border rounded Border circle Border pill
  • <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>
    

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

<a class="gls-logo" href=""></a>
  • <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.

  • <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>
  • Blend Multiply

    Multiply

    Blend Screen

    Screen

    Blend Overlay

    Overlay

    Blend Darken

    Darken

    Blend Lighten

    Lighten

    Blend Color Dodge

    Color Dodge

    Blend Color Burn

    Color Burn

    Blend Hard Light

    Hard Light

    Blend Soft Light

    Soft Light

    Blend Difference

    Difference

    Blend Exclusion

    Exclusion

    Blend Hue

    Hue

    Blend Saturation

    Saturation

    Blend Color

    Color

    Blend Luminosity

    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.