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 (Card Shell)
Card Shell is the foundation Basic Card is built on – it's where the background, border, shadow, and radius rules live. Most of the time you don't need to think about it: just use Basic Card's variants above. Reach for Card Shell directly only when you're building something Basic Card genuinely can't do, like a custom layout or interaction pattern that doesn't fit available options.
With card shell you have control over background color, border color, border width, shadow, radius and content.
How to build it correctly
Card Shell isn't a plug-and-play component with a prop list – you build it yourself, in your own HTML and CSS, using SDX's design tokens. This is the one rule that matters most: every value you use has to come from an SDX token, never a hardcoded number or colour. So instead of writing border-radius: 8px, you write border-radius: var(--sdx-border-radius-medium). Same for colours, spacing, border widths – the token, never a value you typed in yourself.
See the example on how to build a card using CSS variables.