Card
You can edit 8 Components for free. Get premium for unlimited access.
Displays a card with header, content, and footer.
Figma
The Card component is used to group elements together and allows quick access to features.
1. Reference
This component inherits props from the Card.
2. Size
You can edit the size with the md or lg parameter.
Image 2.1 : Size md
Image 2.2 : Size lg
3. State
You can edit the state with the default, active or disabled parameter.
Image 3.1 : State default
Image 3.2 : State active
Image 3.3 : State disabled
4. Description
You can edit the description with the true or false parameter.
Image 4.1 : Description true
Image 4.2 : Description false
SwiftUI
The DLCard component is used to group elements together and allows quick access to features.
1. Reference
This component inherits props from the Card.
-
-
-
2. Size
You can edit the size with the .md or .lg parameter.
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .lg,
state: .normal
)
DLCard(
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .md,
state: .normal
)
3. State
You can edit the state with the .normal or .disabled parameter.
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .lg,
state: .disabled
)
DLCard(
icon: "ic_Placeholder",
title: "Title",
description: "Description",
size: .md,
state: .disabled
)
Jetpack Compose
The Card component is used to group elements together and allows quick access to features.
1. Reference
This component inherits props from the Card.
-
-
-
2. Size
You can edit the size with the CardSize.md or CardSize.lg parameter.
title = "Title",
description = "Description",
size = CardSize.lg,
icon = R.drawable.ic_crop,
state = CardState.default,
onClick = {}
)
Card(
title = "Title",
description = "Description",
size = CardSize.md,
icon = R.drawable.ic_crop,
state = CardState.default,
onClick = {}
)
3. State
You can edit the state with the CardState.default or CardState.disabled parameter.
title = "Title",
description = "Description",
size = CardSize.lg,
icon = R.drawable.ic_crop,
state = CardState.disabled,
onClick = {}
)
Card(
title = "Title",
description = "Description",
size = CardSize.md,
icon = R.drawable.ic_crop,
state = CardState.disabled,
onClick = {}
)
Preview
Preview
Code
DlCard(
icon: DlPlaceholderIcon(),
title: 'Title',
description: 'Description',
size: DlCardSize.lg,
)Usage
Add this code example to your project to see how the component works.
DlCard(
icon: DlPlaceholderIcon(),
title: 'Title',
description: 'Description',
size: DlCardSize.lg,
enableActiveState: true,
)API Reference
DlCard is a clickable, token-based content card with interchangeable icon, optional description, size variants md and lg and optional active toggle status.
Examples
Size
Preview
Code
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Expanded(
child: DlCard(
icon: DlPlaceholderIcon(),
title: 'Title',
description: 'Description',
size: DlCardSize.lg,
),
),
SizedBox(width: DlSpacingTokens.p_16),
Expanded(
child: DlCard(
icon: DlPlaceholderIcon(),
title: 'Title',
description: 'Description',
size: DlCardSize.md,
),
),
],
)State
Preview
Code
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Expanded(
child: DlCard(
icon: DlPlaceholderIcon(),
title: 'Title',
description: 'Description',
size: DlCardSize.lg,
enableActiveState: true,
),
),
SizedBox(width: DlSpacingTokens.p_16),
Expanded(
child: DlCard(
icon: DlPlaceholderIcon(),
title: 'Title',
description: 'Description',
size: DlCardSize.lg,
),
),
SizedBox(width: DlSpacingTokens.p_16),
Expanded(
child: DlCard(
icon: DlPlaceholderIcon(),
title: 'Title',
description: 'Description',
size: DlCardSize.lg,
state: DlCardState.disabled,
),
),
],
)Without Description
Preview
Code
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Expanded(
child: DlCard(
icon: DlPlaceholderIcon(),
title: 'Title',
description: 'Description',
size: DlCardSize.lg,
),
),
SizedBox(width: DlSpacingTokens.p_16),
Expanded(
child: DlCard(
icon: DlPlaceholderIcon(),
title: 'Title',
size: DlCardSize.lg,
),
),
],
)Discover more content
You have questions or need help?
You want to try?
Save time and money?