Clickable Card
9.1.1
The Clickable Card component is a helpful wrapper for various types of content. The container itself is one large touch target.
| Namn | Typ | Beskrivning |
|---|---|---|
border | boolean | If the card has a border. Default true for white background color |
checked | boolean | If the card is checked |
customAttribute | { attribute: string; value: string | number; } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
disableFocusOffset | boolean | If the focus styling should be displayed without an offset. Needed for CampaignCard, PrioCard, InformationCard |
enhancedFocus | boolean | Option to display focus styling with white inner border in addition to the blue outline. Can be used in situations where the focus styling can be difficult to perceive, such as the start page. |
isFocused | boolean | If the card should display in focused state with blue outline or not. Note: This is only needed for CheckboxCard and RadioButtonCard which cannot use the default button focus styling |
sx | SxProps<Theme> | The system prop that allows defining system overrides as well as additional CSS styles. |
variant | "active" | "comment" | "critical" | "error" | "inactive" | "information" | "success" | "urgent" | "severe" | Defines the visual style variant of the card: - active: Green border indicating selection - comment: Light gray background for comment sections - critical: Red background for critical information - error: Red border for error states - inactive: Default state with optional border - information: Blue background for informational content - success: Green background for success states - urgent: Yellow background for urgent information |
npm install @sj-ab/component-library.ui.cardClickableCard renderas som en knapp (<button type="button">) eller som en länk <a href>.
När ett kort ska ha interaktivitet och fungera som en länk eller knapp så måste alltid ClickableCard användas istället för vanliga Card.
ClickableCard har inbyggt stöd för fokusmarkering och har rätt semantik för hjälpmedel för att kommunicera att den är interaktiv.
Placera aldrig ett annat interaktivt element som till exempel en knapp eller ett formulärsobjekt inuti ett ClickableCard! Det är inte tillåtet enligt HTML-standarden och kommer att orsaka problem för skärmläsare och andra hjälpmedel
Importer av Clickable Card
Repos med Clickable Card
Senaste installerade version av Clickable Card
Äldsta installerade version av Clickable Card