Card
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
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 = {}
)
React Native
The CustomCard 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 xs, sm, md or lg parameter.
import { colors } from '../../style';
import CustomCard from '../../components/common/CustomCard';
import PlaceholderIcon from '../../../assets/icons/svg_js/placeholderIcon';
export default function ScreenName() {
return (
<View>
<CustomCard
icon={<PlaceholderIcon fill={colors.black} />}
title="Title"
description="Description"
size="lg"
/>
<CustomCard
icon={<PlaceholderIcon fill={colors.black} />}
title="Title"
description="Description"
size="md"
/>
</View>
);
}
3. State
You can edit the state with the default , active or disabled parameter.
import { colors } from '../../style';
import CustomCard from '../../components/common/CustomCard';
import PlaceholderIcon from '../../../assets/icons/svg_js/placeholderIcon';
export default function ScreenName() {
return (
<View>
<CustomCard
icon={<PlaceholderIcon fill={colors.black} />}
title="Title"
description="Description"
state="active"
/>
<CustomCard
icon={<PlaceholderIcon fill={colors.black} />}
title="Title"
description="Description"
state="default"
/>
<CustomCard
icon={<PlaceholderIcon fill={colors.grey500} />}
title="Title"
description="Description"
state="disabled"
/>
</View>
);
}
4. Description Toggle
You can edit the showDescription with the true or false parameter.
import { colors } from '../../style';
import CustomCard from '../../components/common/CustomCard';
import PlaceholderIcon from '../../../assets/icons/svg_js/placeholderIcon';
export default function ScreenName() {
return (
<View>
<CustomCard
icon={<PlaceholderIcon fill={colors.black} />}
title="Title"
description="Description"
showDescription={true} // default
/>
<CustomCard
icon={<PlaceholderIcon fill={colors.black} />}
title="Title"
description="Description"
showDescription={false}
/>
</View>
);
}
Discover more content
You have questions or need help?
You want to try?
Save time and money?