The Card component is a versatile component that can be used for anything from a panel to a static image. The card component has numerous helper components to make markup as easy as possible.


A card has 4 basic components,: CardTitle, CardSubtitle, CardText and CardActions.

Card Title
Subtitle Text
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed exercitationem repellat voluptatum nostrum! Reprehenderit temporibus modi perspiciatis perferendis totam placeat vitae omnis ipsa quibusdam animi?


Functional Components


The container used for placing actions for a card, such as Button or Menu. Also applies special margin to buttons so that they properly line up with other card content areas.


Provides a default font-size and padding for card subtitles. Font-size can be overwritten with typography classes.


Primarily used for text content in a card. Applies padding for text, reduces its font-size to .875rem.


Provides a default font-size and padding for card titles. Font-size can be overwritten with typography classes.


Below are some simple and complex examples.


An outlined card has 0 elevation and contains a soft border.

Custom Actions

With a simple conditional, you can easily add supplementary text that is hidden until opened.


Using grids, you can create beautiful layouts.


Using flexbox helper classes, you can create customized horizontal cards.

Information Cards

Cards are entry points to more detailed information. To keep things concise, ensure to limit the number of actions the user can take.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2022-10-03