Cards can include text, icons, images, and interactive elements such as buttons and links. They’re available in different orientations, content setups, and slot options, giving flexibility while keeping the core structure consistent. You can fine-tune background, borders, shadows, and corners to fit your design, but the content should stay focused so the card remains clear and easy to scan.
Layout Variants
Basic Cards can be displayed vertically or horizontally, depending on the layout needs. The vertically arranged cards work well in stacked or grid layouts, while horizontally arranged cards are ideal for tighter spaces or when the image or icon should sit beside the text. Choose the orientation that best supports the content and the surrounding design.
Content Variants
Basic Cards provide a default slot that allows consumers to add custom content at the bottom of the card, spanning the full width. This is useful for adding buttons, links, lists, or any other SDX components to enhance the card's functionality.
Image Cards
Images can be displayed in a variety of aspect ratios to fit different types of content and layouts. The chosen ratio impacts both the visual balance of the card and how much emphasis is placed on the image versus the text. Ratios can be applied in either vertical or horizontal card orientation. image-object-fit should be set depending on the type of the image.
Selectable Cards
To make cards selectable, wrap each card within an sdx-input-item inside an sdx-input-group. Usetheme="indicator-less" on the input group to hide the default radio/checkbox indicators. An optional tag can be placed as a slot within the input-item, which will be positioned at the top of the card. Tags can be used to show selection status or additional information.
If there is a sdx-button present, the basic card will only be interactable through that particular element. In this case, the consumer needs to map the click event to the input item's input event.
Custom Cards
See the example on how to build a card using CSS variables.