Lexicon v1.0.32

Cards (Flexbox)

Vertical Card

Combine Cards and Simple Flexbox Grid to build cards with CSS Flexible Box.

thumbnail
10 Most Delicious Space Foods

Number 1

Mystery Meal

Because you like to live life on the edge of space.

Horizontal Card

Add class flex-container to the card element, to the card-section, and tweak a few styles to change the orientation of the card.

<style>
    #uxglHorizontalCard1 {
        max-width: 300px;
    }

    #uxglHorizontalCard1 .figure {
        border-radius: 4px 4px 0 0;
        overflow: hidden;
    }

    #uxglHorizontalCard1.flex-container {
        max-width: none;
    }

    #uxglHorizontalCard1.flex-container .figure {
        border-radius: 4px 0 0 4px;
       width: 150px;
    }
</style>

Toggle Class: flex-container

thumbnail
10 Most Delicious Space Foods

Number 1

Mystery Meal

Because you like to live life on the edge of space.

Checkable Cards

Wrap cards with: 

<div class="checkbox">
    <label>
        <input type="checkbox" />
        ... Card Markup Here ...
    </label>
</div>
to create a checkable card.