Cards

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.

Playground

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?

disabled

API

Functional Components

Cardactions

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.

Cardsubtitle

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

Cardtext

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

Cardtitle

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

Examples

Below are some simple and complex examples.

Outlined

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.

Grids

Using grids, you can create beautiful layouts.

Horizontal

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.

Edit This Page on GitHub

Last Updated: 2022-10-03