Maskowlabs Logo Maskowlabs

Cards

Cards are a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Log in to your account

Enter your credentials

 1<x-card form>
 2    <x-card.header title="Log in to your account">Enter your credentials</x-card.header>
 3    <x-card.body gap="4">
 4        <x-input label="Email Address" placeholder="Enter your email address" />
 5        <x-input label="Password" placeholder="Enter your password" type="password">
 6            <x-slot:labelAddon>
 7                <x-button type="link" size="sm">Forgot Password?</x-button>
 8            </x-slot:labelAddon>
 9        </x-input>
10        <x-checkbox label="Remember me" />
11    </x-card.body>
12    <x-card.footer gap="2" flex-column>
13        <x-button type="primary" class="w-100">Log In</x-button>
14        <x-button type="transparent" class="w-100">Create an account</x-button>
15    </x-card.footer>
16</x-card>

Description

Add a line of text below the title with the description attribute of <x-card.header>. Without it, the slot of the header is used as description, as in the first example. If both are set, the attribute wins and the slot is not shown.

Team members

Invite and manage the people in your team.

This is a default card. You can add any content here. 
1<x-card>
2    <x-card.header title="Team members" description="Invite and manage the people in your team." /> 
3    <x-card.body>
4        This is a default card. You can add any content here.
5    </x-card.body>
6</x-card>

Border

Add a border the header or footer by adding the border attribute.

Default Card

This is a default card. You can add any content here. 
 1<x-card>
 2    <x-card.header border title="Default Card" /> 
 3    <x-card.body>
 4        This is a default card. You can add any content here.
 5    </x-card.body>
 6    <x-card.footer border flex gap="2"> 
 7        <x-button type="primary" size="sm">Primary</x-button>
 8        <x-button type="gray" size="sm">Secondary</x-button>
 9    </x-card.footer>
10</x-card>

Header Actions

Add actions to the header by using the actions slot.

Inline Action

This is a default card. You can add any content here.

Dropdown Action

This is a default card. You can add any content here. 
 1<x-card>
 2    <x-card.header title="Inline Action">
 3        <x-slot:actions>
 4            <x-checkbox size="sm" reverse label="Show details" />
 5        </x-slot:actions>
 6    </x-card.header>
 7    <x-card.body>
 8        This is a default card. You can add any content here.
 9    </x-card.body>
10</x-card>
11 
12<x-card>
13    <x-card.header border title="Dropdown Action">
14        <x-slot:actions>
15            <x-dropdown id="card-dropdown-10482">
16                <x-slot:toggle type="transparent" icon="ellipsis-vertical--micro" size="sm"></x-slot:toggle>
17 
18                <x-button type="transparent" icon="document--outline">Details</x-button>
19                <x-button type="transparent" icon="users--outline">Members</x-button>
20                <x-button type="transparent" icon="check--outline">Tasks</x-button>
21 
22            </x-dropdown>
23        </x-slot:actions>
24    </x-card.header>
25    <x-card.body>
26        This is a default card. You can add any content here.
27    </x-card.body>
28</x-card>