Documentation
Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'
Card
Description
- Purpose
- A card is a flexible content container for small chunks of structured data. Cards are often used in so-called Decks which are a gallery of Cards.
- Composition
- Cards contain a header, which often includes an Image or Icon and a Title as well as possible actions as Default Buttons and 0 to n sections that may contain further textual descriptions, links and buttons. The size of the cards in decks may be set to extra small (12 cards per row), small (6 cards per row, default), medium (4 cards per row), large (3 cards per row), extra large (2 cards per row) and full (1 card per row). The number of cards per row is responsively adapted, if the size of the screen is changed.
- Effect
- Cards may contain Interaction Triggers.
Rivals
- Heading Panel
- Heading Panels fill up the complete available width in the Center Content Section. Multiple Heading Panels are stacked vertically.
- Block Panels
- Block Panels are used in Sidebars
Rules
- Composition
- Cards MUST contain a title.
- Cards SHOULD contain an Image or Icon in the header section.
- Cards MAY contain Interaction Triggers.
- Style
- Sections of Cards MUST be separated by Dividers.
- Accessibility
- If multiple Cards are used, they MUST be contained in a Deck.
Relations
- Parents
- UIComponent
- Descendants
- Standard
- Repository Object