Lexicon v1.0.32

Cards

Card

A container styled like a card for your stuff. Combine different Lexicon components inside a card to create a variety of cards.

thumbnail
JB

Joe Bloggs

Administrator

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

<div class="card">...</div>

Horizontal Card with Simple Grid

Use card-row with card-col-content and card-col-field to create a number of custom horizontal cards. card-col-content fills the remaining space when used in conjunction with card-col-field. card-col-field will only be as wide as the content inside.

This text will fill the remaining space. 
<div class="card card-horizontal">
    <div class="card-row card-row-padded">
        <div class="card-col-field">
            <span aria-hidden="true" class="icon-folder-close-alt sticker sticker-default sticker-static sticker-lg"></span>
        </div>
        <div class="card-col-content card-col-gutters">
            <span>This text will fill the remaining space.</span>
        </div>
    </div>
</div>

Horizontal Cards with Fixed Width Content

Set a fixed width on the content inside card-col-field.

thumbnail

So ristretto cappuccino

Wings eu, pumpkin spice robusta.

thumbnail

So ristretto cappuccino

Wings eu, pumpkin spice robusta.

So ristretto cappuccino

Wings eu, pumpkin spice robusta.

thumbnail

So ristretto cappuccino

Wings eu, pumpkin spice robusta.

thumbnail
Really super insanely just incredibly long and totally not possible word. ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Truncating Text Inside Card

Add class truncate-text on whatever text you want to be truncated.

thumbnail

So ristretto cappuccino

Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.

Card Row Vertical Alignment Helpers

Vertically align content by setting the css property vertical-align on the card-col and align content horizontally by using text-align or use the helper classes card-row-valign-bottomand card-row-valign-top on the card-row to vertically align all columns inside the row.

top
middle
bottom
left
center
right
<div class="card card-horizontal">
    <div class="card-row">
        <div class="card-col-field" style="vertical-align: top;">top</div>
        <div class="card-col-field">middle</div>
        <div class="card-col-field" style="vertical-align: bottom;">bottom</div>
    </div>
</div>

Add gutters to a specific card card column by using the class card-col-gutters.

thumbnail

So ristretto cappuccino

Wings eu, pumpkin spice robusta.

<div class="card card-horizontal">
    <div class="card-row">
        <div class="card-col-field">
            <img alt="thumbnail" src="/images/thumbnail_coffee.jpg" style="width: 150px;">
        </div>

        <div class="card-col-content card-col-gutters">
            ...
        </div>
    </div>
</div>

Use card-row-padded on card-row to add some spacing around a horizontal card.

thumbnail

So ristretto cappuccino

Wings eu, pumpkin spice robusta.

<div class="card card-horizontal">
    <div class="card-row card-row-padded">
        ...
    </div>
</div>

Card Helper Classes

Use classes card-rounded, card-circle, or card-square on the card to quickly shape the borders.

card-col-field
card-col-field
card-col-field
card-col-field
card-col-field
card-col-field
<div class="card card-horizontal card-rounded">...</div>
<div class="card card-circle card-horizontal">...</div>
<div class="card card-horizontal card-square">...</div>
We didn't add overflow: hidden to the card class because it prevents nested dropdowns, popups, and tooltips from fully displaying. You can work around this by adding border-radius to the image or overflow: hidden to the card.
When using card border helper classes with images as the first or last item, add the css property overflow: hidden to the card or border-radius to the image.
thumbnail

Joe Bloggs

Administrator

Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.

Space Program

Because you live life on the edge of space.

Card Dividers

Use <div class="divider"></div> to create a horizontal division between content inside a card.

card-col-field

Title

card-col-field

Checkbox Card

We have created a pattern to add checkboxes to cards, just wrap the checkbox and card in:

<div class="checkbox checkbox-card checkbox-top-left">
    <label>
        <input type="checkbox">
    </label>
    <div class="card">...</div>
</div>
thumbnail PNG
Aldcott Gage George Polwarth-Kitchener thumbnail_dock.jpg Approved
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Clickable Checkbox Card

To make the whole card clickable just wrap the checkbox and card in:

<div class="checkbox checkbox-card checkbox-top-left">
    <label>
        <input type="checkbox">
        <div class="card">...</div>
    </label>
</div>

Radio Card

We have created a pattern to add radio inputs to cards, just wrap the radio input and card in:

<div class="radio radio-card radio-top-left">
    <label>
        <input type="radio">
    </label>
    <div class="card">...</div>
</div>
thumbnail PNG
Aldcott Gage George Polwarth-Kitchener thumbnail_dock.jpg Approved
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Clickable Radio Card

To make the whole card clickable just wrap the radio input and card in:

<div class="radio radio-card radio-top-left">
    <label>
        <input type="radio">
        <div class="card">...</div>
    </label>
</div>