Code examples
<CardSelect> <CardSelectTrigger>Ways to travel</Heading> <CardSelectContent> <Heading>Ways to travel</Heading> <Text> There are lots of ways to travel. Buses, trains and ferries are just three. </Text> </CardSelectContent> </CardSelect>
Guidelines
Card selects are buttons that trigger an "overlay card," which appears on top of other content. They are used to hide and reveal information and can be utilized to trigger contextual menus or display arbitrary information. This helps keep the design clean, making it easier to navigate and establish a clear hierarchy for the flow of information.
Examples of use include larger menus or situations where users need a clear overview on an information-dense page.
Card selects come in three variants: Core, Ghost, and Floating. In their default states, Core has a shadow, Outline has a stroke, and Ghost appears only as text. All three variants can include a chevron and one or two icons. In many cases, it is advisable to limit the use of icons, while the chevron is often useful when revealing new content.
Card selects are available in small, medium, and large sizes and are designed in four states.
Code
<CardSelect />
import { CardSelect } from "@vygruppen/spor-react";
Shows a trigger button. When clicked, the children is shown as a floating card.
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | The content that's shown when open | |
crossOffset | number | Amount of pixels to offset the card horizontally | |
defaultOpen | boolean | The default state if not controlled | |
icon | React.ReactNode | Rendered to the left in the trigger button | |
label | string | The label of the trigger button | |
onOpenChange | function | Function invoked when the popover opens or closes | |
onToggle | (isOpen: boolean) => void | Callback for when the component is toggled. New state passed as an argument | |
open | boolean | Makes the CardSelect open state controllable | |
positioning | {{placement: "top" | "right" | "bottom" | "left"}} | Default "bottom" | |
size | "sm" | "md" | "lg" | Default "md" | |
variant | "ghost" | "core" | "floating" | The design of the trigger button. Defaults to "core" | |
withChevron | boolean | Whether or not to show a chevron to the right. Default true |
<CardSelectTrigger />
import { CardSelectTrigger } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Content of triggerButton | |
icon | React.ReactNode | Icon to be shown on the left side of trigger | |
variant | "core" | "ghost" | "floating" | Defaults to "core" | |
withChevron | boolean | Wether or not to show chevron on right side of trigger |
<CardSelectContent />
import { CardSelectContent } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Content of the card |