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 Title
Card Subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Example LinkBody
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.
Header and Footer
Optionally, you can provide a header or a footer for your cards.
Image Header
You can provide an image at the top of the card, using the image
slot.

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
.
Color Variants
Inkline includes several predefined card colors that you can use within your application. You can apply a style using the color
property.
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