Card

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

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.

Basic Example

Cards are customizable content holders built with as little markup and styles as possible. They are based on flexbox, offering easy alignment and they mix 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>
    <template #image>
        <img src="../../../assets/images/placeholder-500x250.jpg" alt="Card Image" />
    </template>
    <h4 class="card-title">
        Card Title
    </h4>
    <p class="card-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="card-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>

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 #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 #footer>
        Card Footer
    </template>
</i-card>

Image Header

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>
    <template #image>
        <img src="../../../assets/images/placeholder-500x250.jpg" alt="Card Image" />
    </template>
    Some quick example text to build on the card title and make up the bulk of the card's content.
</i-card>

Size Variants

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>

Color Variants

Inkline includes several predefined card colors that you can use within your application. You can apply a style using the color 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 color="light">
    <template #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 color="dark">
    <template #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 color="primary">
    <template #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 color="secondary">
    <template #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 color="success">
    <template #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 color="danger">
    <template #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 color="warning">
    <template #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 color="info">
    <template #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>

Configuration

Props

Use props to modify the component’s design and behavior.

  • Property
    color
    Type'primary' | 'success' | 'light' | 'dark' | 'info' | 'success' | 'warning' | 'danger'
    Default'light'
    Description The color variant of the card
  • Property
    size
    Type'sm' | 'md' | 'lg'
    Default'md'
    Description The size variant of the card

Slots

Use slots to insert custom content into well-defined component locations.

  • Property
    default
    Description Slot for default card content
  • Property
    header
    Description Slot for card header content
  • Property
    footer
    Description Slot for card footer content
  • Property
    image
    Description Slot for card image

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

  • Property
    ----background
    Valuecolor('white')
    Description The background of the card component
  • Property
    ----border-top-color
    Valuecolor('light')
    Description The border top color of the card component
  • Property
    ----border-right-color
    Valuecolor('light')
    Description The border right color of the card component
  • Property
    ----border-bottom-color
    Valuecolor('light')
    Description The border bottom color of the card component
  • Property
    ----border-left-color
    Valuecolor('light')
    Description The border left color of the card component
  • Property
    ----border-color
    Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
    Description The border color of the card component
  • Property
    ----border-style
    Valuevar(--border-style)
    Description The border style of the card component
  • Property
    ----border-top-width
    Valuevar(--border-top-width)
    Description The border top width of the card component
  • Property
    ----border-right-width
    Valuevar(--border-right-width)
    Description The border right width of the card component
  • Property
    ----border-bottom-width
    Valuevar(--border-bottom-width)
    Description The border bottom width of the card component
  • Property
    ----border-left-width
    Valuevar(--border-left-width)
    Description The border left width of the card component
  • Property
    ----border-width
    Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
    Description The border width of the card component
  • Property
    ----border-top-left-radius
    Valuevar(--border-top-left-radius)
    Description The border top left radius of the card component
  • Property
    ----border-top-right-radius
    Valuevar(--border-top-right-radius)
    Description The border top right radius of the card component
  • Property
    ----border-bottom-right-radius
    Valuevar(--border-bottom-right-radius)
    Description The border bottom right radius of the card component
  • Property
    ----border-bottom-left-radius
    Valuevar(--border-bottom-left-radius)
    Description The border bottom left radius of the card component
  • Property
    ----border-radius
    Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
    Description The border radius of the card component
  • Property
    ----box-shadow-offset-x
    Valuevar(--box-shadow-offset-x)
    Description The box shadow horizontal offset of the card component
  • Property
    ----box-shadow-offset-y
    Valuevar(--box-shadow-offset-y)
    Description The box shadow vertical offset of the card component
  • Property
    ----box-shadow-blur-radius
    Valuevar(--box-shadow-blur-radius)
    Description The box shadow blur radius of the card component
  • Property
    ----box-shadow-spread-radius
    Valuevar(--box-shadow-spread-radius)
    Description The box shadow spread radius of the card component
  • Property
    ----box-shadow-color
    Valuevar(--box-shadow-color)
    Description The box shadow spread radius of the card component
  • Property
    ----box-shadow
    Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
    Description The box shadow of the card component
  • Property
    ----color
    Valuecontrast-color($color-light)
    Description The color of the card component
  • Property
    ----font-size
    Valuefont-size()
    Description The font size of the card component
  • Property
    ----font-weight
    Valuefont-weight('normal')
    Description The font weight of the card component
  • Property
    ----line-height
    Valuevar(--line-height)
    Description The line height of the card component
  • Property
    ----padding-top
    Valuevar(--padding-top)
    Description The padding top of the card component
  • Property
    ----padding-right
    Valuevar(--padding-right)
    Description The padding right of the card component
  • Property
    ----padding-bottom
    Valuevar(--padding-bottom)
    Description The padding bottom of the card component
  • Property
    ----padding-left
    Valuevar(--padding-left)
    Description The padding left of the card component
  • Property
    ----padding
    Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
    Description The padding of the card component
  • Property
    ----header--background
    Valuecolor('light-25')
    Description The background of the modal component header
  • Property
    ----header--border-color
    Valuevar(----border-color)
    Description The border color of the modal component header
  • Property
    ----header--border-style
    Valuevar(----border-style)
    Description The border style of the modal component header
  • Property
    ----header--border-top-width
    Valuevar(----border-top-width)
    Description The border top width of the modal component header
  • Property
    ----header--border-right-width
    Valuevar(----border-right-width)
    Description The border right width of the modal component header
  • Property
    ----header--border-bottom-width
    Valuevar(----border-bottom-width)
    Description The border bottom width of the modal component header
  • Property
    ----header--border-left-width
    Valuevar(----border-left-width)
    Description The border left width of the modal component header
  • Property
    ----header--border-width
    Valuevar(----header--border-top-width) var(----header--border-right-width) var(----header--border-bottom-width) var(----header--border-left-width)
    Description The border width of the modal component header
  • Property
    ----header--color
    Valuevar(----color)
    Description The color of the modal component header
  • Property
    ----header--padding-top
    Valuevar(----padding-top)
    Description The padding top of the modal component header
  • Property
    ----header--padding-right
    Valuevar(----padding-right)
    Description The padding right of the modal component header
  • Property
    ----header--padding-bottom
    Valuevar(----padding-bottom)
    Description The padding bottom of the modal component header
  • Property
    ----header--padding-left
    Valuevar(----padding-left)
    Description The padding left of the modal component header
  • Property
    ----header--padding
    Valuevar(----header--padding-top) var(----header--padding-right) var(----header--padding-bottom) var(----header--padding-left)
    Description The padding of the modal component header
  • Property
    ----body--background
    Valuevar(----background)
    Description The background of the modal component body
  • Property
    ----body--border-color
    Valuevar(----border-color)
    Description The border color of the modal component body
  • Property
    ----body--border-style
    Valuevar(----border-style)
    Description The border style of the modal component body
  • Property
    ----body--border-top-width
    Valuevar(----border-top-width)
    Description The border top width of the modal component body
  • Property
    ----body--border-right-width
    Valuevar(----border-right-width)
    Description The border right width of the modal component body
  • Property
    ----body--border-bottom-width
    Valuevar(----border-bottom-width)
    Description The border bottom width of the modal component body
  • Property
    ----body--border-left-width
    Valuevar(----border-left-width)
    Description The border left width of the modal component body
  • Property
    ----body--border-width
    Valuevar(----body--border-top-width) var(----body--border-right-width) var(----body--border-bottom-width) var(----body--border-left-width)
    Description The border width of the modal component body
  • Property
    ----body--color
    Valuevar(----color)
    Description The color of the modal component body
  • Property
    ----body--padding-top
    Valuevar(----padding-top)
    Description The padding top of the modal component body
  • Property
    ----body--padding-right
    Valuevar(----padding-right)
    Description The padding right of the modal component body
  • Property
    ----body--padding-bottom
    Valuevar(----padding-bottom)
    Description The padding bottom of the modal component body
  • Property
    ----body--padding-left
    Valuevar(----padding-left)
    Description The padding left of the modal component body
  • Property
    ----body--padding
    Valuevar(----body--padding-top) var(----body--padding-right) var(----body--padding-bottom) var(----body--padding-left)
    Description The padding of the modal component body
  • Property
    ----footer--background
    Valuecolor('light-25')
    Description The background of the modal component footer
  • Property
    ----footer--border-color
    Valuevar(----border-color)
    Description The border color of the modal component footer
  • Property
    ----footer--border-style
    Valuevar(----border-style)
    Description The border style of the modal component footer
  • Property
    ----footer--border-top-width
    Valuevar(----border-top-width)
    Description The border top width of the modal component footer
  • Property
    ----footer--border-right-width
    Valuevar(----border-right-width)
    Description The border right width of the modal component footer
  • Property
    ----footer--border-bottom-width
    Valuevar(----border-bottom-width)
    Description The border bottom width of the modal component footer
  • Property
    ----footer--border-left-width
    Valuevar(----border-left-width)
    Description The border left width of the modal component footer
  • Property
    ----footer--border-width
    Valuevar(----footer--border-top-width) var(----footer--border-right-width) var(----footer--border-bottom-width) var(----footer--border-left-width)
    Description The border width of the modal component footer
  • Property
    ----footer--color
    Valuevar(----color)
    Description The color of the modal component footer
  • Property
    ----footer--padding-top
    Valuevar(----padding-top)
    Description The padding top of the modal component footer
  • Property
    ----footer--padding-right
    Valuevar(----padding-right)
    Description The padding right of the modal component footer
  • Property
    ----footer--padding-bottom
    Valuevar(----padding-bottom)
    Description The padding bottom of the modal component footer
  • Property
    ----footer--padding-left
    Valuevar(----padding-left)
    Description The padding left of the modal component footer
  • Property
    ----footer--padding
    Valuevar(----footer--padding-top) var(----footer--padding-right) var(----footer--padding-bottom) var(----footer--padding-left)
    Description The padding of the modal component footer