Cards
A card serves as an overview and entry point for more detailed information and can offer direct access to the most important actions of an item.
Last updated
A card serves as an overview and entry point for more detailed information and can offer direct access to the most important actions of an item.
Last updated
The Kirigami types and are used to implement the popular card component used on many mobile and web platforms. Cards can be used to display a collection of information or actions in an attractive and distinctive way.
Kirigami also offers 3 kinds of and to aid you in presenting your cards with beautiful and responsive layouts.
A is the simplest type of card. It's just a rectangle with a shadow, which can contain any in it. It can also have Items assigned to its or properties. In this case a is its header
and a is the card's .
Important
A inherits from and provides more features out of the box. Cards inherit the same and from an Abstract Card, but you are encouraged to use a and a set of in the actions
group instead.
A is most useful when the cards being presented are either not instantiated by a model or are instantiated by a model that always has very few items. They are presented as a grid of two columns which will remain centered if the application is really wide, or become a single column if there is not enough space for two columns, such as a mobile phone screen.
is better suited for larger models.
A should always be contained within a .
A card can optionally be oriented horizontally. In this case it will be wider than tall, and is better suited to being placed in a . If you must put it in a , it will have a of 2
by default.
A is a list view that can be used with components.
A will stretch child cards to its own width. This component should therefore only be used with cards which will look good at any horizontal size. Use of a component inside it is discouraged, unless it has as its property.
The choice between using this view with components or a conventional with / components is purely an aesthetic one.