Card

Ready Added in 2.0.0

Create layout boxes with different styles.

Usage

The Card component consists of the card itself, the card body and an optional card title. Typically, cards are arranged in grid columns from the Grid component.

Class Description
.gls-card Add this class to a <div> element to define the Card component.
.gls-card-body Add this class to the card to create padding between the card and its content.
.gls-card-title Add this class to a heading to define a card title. 
<div class="gls-card gls-card-body">
    <h3 class="gls-card-title"></h3>
</div>

By default, a card is blank. That is why it is important to add a modifier class for styling. In our example we are using the .gls-card-default class.

  • Default

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

  • <div class="gls-card gls-card-default gls-card-body gls-width-1-2@m">
    <h3 class="gls-card-title">Default</h3>
    <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Guidelines

When to use

  • Content has multiple types of data
  • Content does not require direct comparison (a table may work better in this case)
  • Content is highly variable in length
  • Content needs to be organized into digestible groups or sections

Note Text links are generally not suitable within a card. Instead use a button or link element as a call to action.

Style modifiers

Gloss includes a number of modifiers that can be used to add a specific style to cards.

Class Description
.gls-card-default Add this class to create a visually styled box.
.gls-card-outline Add this class to add a border and use a white background.
.gls-card-primary Add this class to modify the card and emphasize it with a primary color.
.gls-card-secondary Add this class to modify the card and give it a secondary background color.
.gls-card-tertiary Add this class to modify the card and give it a tertiary background color. 
<div class="gls-card gls-card-default"></div>

<div class="gls-card gls-card-outline"></div>

<div class="gls-card gls-card-primary"></div>

<div class="gls-card gls-card-secondary"></div>

<div class="gls-card gls-card-tertiary"></div>

  • Default

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Outline

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Primary

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Secondary

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Tertiary

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div class="gls-child-width-1-3@m gls-grid-small gls-grid-match" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">
            <h3 class="gls-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-outline gls-card-body">
            <h3 class="gls-card-title">Outline</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-primary gls-card-body">
            <h3 class="gls-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-secondary gls-card-body">
            <h3 class="gls-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-tertiary gls-card-body">
            <h3 class="gls-card-title">Tertiary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

Hover modifier

To create a hover effect on the card, add the .gls-card-hover class. This comes in handy when working with anchors and can be combined with the other card modifiers.

<div class="gls-card gls-card-hover"></div>

  • Hover

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Default

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Outline

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Primary

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Secondary

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Tertiary

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div class="gls-child-width-1-2@s gls-grid-match" gls-grid>
    <div>
        <div class="gls-card gls-card-hover gls-card-body">
            <h3 class="gls-card-title">Hover</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-hover gls-card-body">
            <h3 class="gls-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-outline gls-card-hover gls-card-body">
            <h3 class="gls-card-title">Outline</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-primary gls-card-hover gls-card-body gls-light">
            <h3 class="gls-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-secondary gls-card-hover gls-card-body gls-light">
            <h3 class="gls-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-tertiary gls-card-hover gls-card-body gls-light">
            <h3 class="gls-card-title">Tertiary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

Size modifiers

You can apply different size modifiers to cards that will decrease or increase their padding.

Class Description
.gls-card-small Add this class to apply a smaller padding.
.gls-card-large Add this class to apply a larger padding. 
<div class="gls-card gls-card-small gls-card-default"></div>

<div class="gls-card gls-card-large gls-card-default"></div>

  • Small

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

    Large

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

  • <div class="gls-child-width-1-2@s" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-small gls-card-body">
            <h3 class="gls-card-title">Small</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-large gls-card-body">
            <h3 class="gls-card-title">Large</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Header & footer

You can also divide a card into header and footer — around the default body. Just add the .gls-card-header or .gls-card-footer class to a <div> element inside the card.

<div class="gls-card">
    <div class="gls-card-header">
        <h3 class="gls-card-title"></h3>
    </div>
    <div class="gls-card-body"></div>
    <div class="gls-card-footer"></div>
</div>

  • Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Read more 
  • <div class="gls-card gls-card-default gls-width-1-2@m">
    <div class="gls-card-header">
        <div class="gls-grid-small gls-flex-middle" gls-grid>
            <div class="gls-width-auto">
                <img class="gls-border-circle" width="40" height="40" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg">
            </div>
            <div class="gls-width-expand">
                <h3 class="gls-card-title gls-margin-remove-bottom">Title</h3>
                <p class="gls-text-meta gls-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
            </div>
        </div>
    </div>
    <div class="gls-card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
    <div class="gls-card-footer">
        <a href="#" class="gls-button gls-button-text">Read more</a>
    </div>
</div>

Media

To display an image inside a card without any spacing, add one of the following classes to a <div> around the <img> element. Mind that you need to modify the source order accordingly.

Class Description
.gls-card-media-top This class indicates that the media element is aligned to the top.
.gls-card-media-bottom This class indicates that the media element is aligned to the bottom.
.gls-card-media-left This class indicates that the media element is aligned to the left.
.gls-card-media-right This class indicates that the media element is aligned to the right. 
<div class="gls-card gls-card-default">
    <div class="gls-card-media-top">
        <img src="" width="" height="" alt="">
    </div>
    <div class="gls-card-body"></div>
</div>

  • Media Top

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Media Bottom

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div class="gls-child-width-1-2@m" gls-grid>
    <div>
        <div class="gls-card gls-card-default">
            <div class="gls-card-media-top">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt="">
            </div>
            <div class="gls-card-body">
                <h3 class="gls-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-default">
            <div class="gls-card-body">
                <h3 class="gls-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="gls-card-media-bottom">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt="">
            </div>
        </div>
    </div>
</div>

Horizontal alignment

The .gls-card-media-left or the .gls-card-media-right classes are used to reset border radius or similar where necessary. They don’t create the actual layout.

To do that, you could for example add the .gls-cover-container class from the Cover component. Add the gls-cover attribute to the image element and use the Grid and Width components to achieve the alignment. Create a <canvas> element with your image’s width and height, so that it will retain its dimensions, if the grid stacks on smaller viewports. This is just one way of creating a side by side layout.

<div class="gls-card gls-card-default gls-child-width-1-2" gls-grid>
    <div class="gls-card-media-left gls-cover-container">
        <img src="" alt="" gls-cover>
        <canvas width="" height=""></canvas>
    </div>
    <div>
        <div class="gls-card-body"></div>
    </div>
</div>

  • Media Left

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Media Right

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div class="gls-card gls-card-default gls-grid-collapse gls-child-width-1-2@s gls-margin" gls-grid>
    <div class="gls-card-media-left gls-cover-container">
        <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
        <canvas width="600" height="400"></canvas>
    </div>
    <div>
        <div class="gls-card-body">
            <h3 class="gls-card-title">Media Left</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>

<div class="gls-card gls-card-default gls-grid-collapse gls-child-width-1-2@s gls-margin" gls-grid>
    <div class="gls-flex-last@s gls-card-media-right gls-cover-container">
        <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
        <canvas width="600" height="400"></canvas>
    </div>
    <div>
        <div class="gls-card-body">
            <h3 class="gls-card-title">Media Right</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>

Badge

To position a badge inside a card, add the .gls-card-badge class to a container element. To style the badge, you can use one of the other components, for example the Label.

<div class="gls-card gls-card-body">
    <div class="gls-card-badge gls-label"></div>
</div>
  • Badge

    Title

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

  • <div class="gls-card gls-card-default gls-card-body gls-width-1-2@m">
    <div class="gls-card-badge gls-label gls-label-primary">Badge</div>
    <h3 class="gls-card-title">Title</h3>
    <p>Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>