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.
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.
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.
You can provide an image at the top of the card, using the
You're able to use the
size modifier to control the text and spacing size of your cards, using one of the available sizes:
The default size is set to
Inkline includes several predefined card styles that you can use within your application. You can apply a style using the
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.
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.