Setting Card

Display setting options with a title and optional subtitle

npm create webcore@latest add SettingCard

Use the SettingCard component to present configuration options in cards labeled with titles and optional subtitles:

<div class="flex column sm">
    <SettingCard
        title="Security emails"
        subTitle="Get security alerts for logins."
    >
        <Switch toggled={true} />
    </SettingCard>
    <SettingCard
        title="Marketing emails"
        subTitle="Get email about updates."
    >
        <Switch />
    </SettingCard>
</div>

If you have your utility styles enabled, you can use the above classes to align multiple SettingCard components under each other with a small gap. Each SettingCard component can have a title and subTitle prop. To create the input, simply pass your components as the child for the SettingCard:

---
import { Checkbox } from 'webcoreui/astro'
---

<SettingCard
    title="Security emails"
    subTitle="Get security alerts for logins."
>
    <Checkbox />
</SettingCard>

---
import { Button } from 'webcoreui/astro'
---

<SettingCard
    title="Security emails"
    subTitle="Get security alerts for logins."
>
    <Button>Toggle</Button>
</SettingCard>

You can use the following components in Webcore in combination with the SettingCard component to build different kinds of settings:

• Button: Interactive UI components for triggering actions.
• Checkbox: Component to toggle between two states.
• Input: General component for taking user input from fields.
• Radio: Component for selecting a single option from a predefined set of choices.
• Select: Use this component to allow users to choose an option from a predefined list, displayed in a dropdown.
• Switch: Functionally identical to a checkbox with an appearance similar to physical on/off switches.
• Textarea: Multiline input field for large amounts of text.

Additional Content

You can also add any additional content to the SettingCard component, like icons, labels, and other elements using the additional-content slot:

<SettingCard
    title="Notifications"
    subTitle="Get email notifications on user activity"
>
    <Checkbox label="Toggle all" />

    <div slot="additional-content" class="flex column sm">
        <Switch label="Marketing" small={true} />
        <Switch label="Promotional" small={true} />
        <Switch label="Social" small={true} />
    </div>
</SettingCard>

API

type SettingCardProps = {
   title: string
   subTitle?: string
} & CardProps