Skip to content

Latest commit

 

History

History
377 lines (331 loc) · 13.3 KB

card.md

File metadata and controls

377 lines (331 loc) · 13.3 KB
Raw

Card

Cards provide you with a flexible and extensible content container with multiple color variants and options.{.lead}

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Example

Cards are customizable content holders built with as little markup and styles as possible. They are based on flexbox, offering easy alignment and mixing well with other components.

By default, cards are set to have width: 100%, fully spanning the width of the parent container.

Card Image

Card Title

Card Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Example Link 
<i-card>
    <img slot="image" src=".." alt="Card Image" />
    <h4 class="title">Card Title</h4>
    <p class="subtitle">Card Subtitle</p>
    <p>
        Some quick example text to build on the card title and make up the bulk of the card's content.
    </p>
    <a class="link" href="https://inkline.io">Example Link</a>
</i-card>

Body

The building block of a card is the card body. All the content placed in the default component slot will be placed inside the body.

Some quick example text to build on the card title and make up the bulk of the card's content. 
<i-card>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

Header and Footer

Optionally, you can provide a header or a footer for your cards.

Card Header Some quick example text to build on the card title and make up the bulk of the card's content. Card Footer 
<i-card>
    <template slot="header">Card Header</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
    <template slot="footer">Card Footer</template>
</i-card>

Card Images

You can provide an image at the top of the card, using the image slot.

Card Image

Some quick example text to build on the card title and make up the bulk of the card's content. 
<i-card>
    <img slot="image" src=".." alt="Card Image" />
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

Sizes

You're able to use the size modifier to control the text and spacing size of your cards, using one of the available sizes: sm, md, and lg. The default size is set to md.

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. 
<i-card size="sm">
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>
<i-card size="md">
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>
<i-card size="lg">
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

Variants

Inkline includes several predefined card styles that you can use within your application. You can apply a style using the variant property.

Light Card Some quick example text to build on the card title and make up the bulk of the card's content. Dark Card Some quick example text to build on the card title and make up the bulk of the card's content. Primary Card Some quick example text to build on the card title and make up the bulk of the card's content. Secondary Card Some quick example text to build on the card title and make up the bulk of the card's content. Success Card Some quick example text to build on the card title and make up the bulk of the card's content. Danger Card Some quick example text to build on the card title and make up the bulk of the card's content. Warning Card Some quick example text to build on the card title and make up the bulk of the card's content. Info Card Some quick example text to build on the card title and make up the bulk of the card's content. 
<i-card variant="light">
    <template slot="header">Light Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>
<i-card variant="dark">
    <template slot="header">Dark Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>
<i-card variant="primary">
    <template slot="header">Primary Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>
<i-card variant="secondary">
    <template slot="header">Secondary Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>
<i-card variant="success">
    <template slot="header">Success Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>
<i-card variant="danger">
    <template slot="header">Danger Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>
<i-card variant="warning">
    <template slot="header">Warning Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>
<i-card variant="info">
    <template slot="header">Info Card</template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

Component API

Here you can find a list of the various customization options you can use for the card component as props, as well as available slots.

size Sets the size of the card component. String sm, md, lg md variant Sets the color variant of the card component. String primary, secondary, light, dark, success, danger, warning, info primary default Slot for card default content.

Sass Variables

Here you can find a list of the Sass variables you can use for the card components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

$card-font-size $font-size $card-font-weight $font-weight-normal $card-line-height $line-height $card-border-width $border-width $card-border-radius $border-radius $card-padding-base $spacer $card-padding size-map($card-padding-base, $sizes, $size-multipliers) $card-background-darken rgba(0, 0, 0, 0.1) $card-variants ('basic', 'brand', 'monochrome-white', 'neutral', 'state') $card-variant-color-light $variant-color-light $card-variant-color-dark $variant-color-dark