Container that groups related content and actions.
Use the asChild prop to render the card as a link or a button. This prop adds styles for the interactive states, like hover and focus.
13 variants found
<Card asChild size="1" variant="ghost">
<button
onClick={() => {
setIsFeedbackDialogOpen(true);
setOpen(false);
}}
>
<Flex align="center" gap="4">
<IconPanel size="3">
<Pencil2Icon strokeWidth={1.5} />
</IconPanel>
<div>
<Heading as="h4" size="2">
Feedback
</Heading>
<Text as="p" size="2">
Help us improve the dashboard, documentation, and
products.
</Text>
</div>
</Flex>
</button>
</Card><Card asChild size="1" variant="ghost">
<button
onClick={() => {
contactSupport({
name: user?.name,
email: user?.email,
});
setOpen(false);
}}
>
<Flex align="center" gap="4">
<IconPanel size="3">
<EnvelopeClosedIcon strokeWidth={1.5} />
</IconPanel>
<div>
<Heading as="h4" size="2">
Contact us
</Heading>
<Text as="p" size="2">
Need help with something else? Contact our support team.
</Text>
</div>
</Flex>
</button>
</Card><Box width="100%">
<Card size="4" variant="classic">
<Flex direction="column">
<SegmentedControl.Root
mb="5"
size="2"
value={tab}
onValueChange={(value: string) => {
const urlSearchParams = new URLSearchParams(
searchParams,
);
urlSearchParams.set('tab', value);
router.push(
`${pathname}?${urlSearchParams.toString()}`,
);
}}
>
<SegmentedControl.Item value="profile">
Return an SSO profile
</SegmentedControl.Item>
<SegmentedControl.Item value="error">
Return an error
</SegmentedControl.Item>
</SegmentedControl.Root>
</Flex>
<Grid>
<Box gridColumn="1" gridRow="1" {...profileTabProps}>
<SsoForm
connectionId={connectionId}
loginHint={loginHint}
relayState={relayState}
onFormSubmit={onFormSubmit}
/>
</Box>
<Box gridColumn="1" gridRow="1" {...errorTabProps}>
<ErrorForm
connectionId={connectionId}
relayState={relayState}
onFormSubmit={onFormSubmit}
/>
</Box>
</Grid>
</Card>
</Box>2 variants found
/p/:portalSessionId/sso/:connectionId/verification/success
/p/:portalSessionId/directory-sync/:directoryId/completed
Used 153 times across 2 packages
variant
size
100 files
/p/:portalSessionId/directory-sync/:directoryId/google-workspace/filter-groups-v2
/p/:portalSessionId/directory-sync/:directoryId/completed
/p/:portalSessionId/directory-sync/role-assignment
Show 90 more files