Card
Cards function as a universal container that holds content and actions related to a specific topic.
| Type | Resource |
|---|---|
| Design | Figma |
| Mobile | Mobile Storybook |
| Code | Gitlab |
Usage
To implement card, you can use this tag Card in the Kotlin file.
import id.co.biofarma.binduiandroid.components.card.Card Card(
type = "stacked",
variant = "outline",
borderSize = "none",
imageUrl = "https://cdn.britannica.com/20/194520-050-DCAE62F1/New-World-Sylvilagus-cottontail-rabbits.jpg",
header = {},
body = {
Text(
text = "Rabbit",
style = Typography.Title.XSmall,
color = PrimitiveColors.Neutral_900,
modifier = Modifier.padding(vertical = pxToDp(8f))
)
Text(
text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
style = Typography.Body.Small,
color = PrimitiveColors.Neutral_500,
maxLines = 2,
overflow = TextOverflow.Ellipsis
)
},
footer = {
Button(
text = "DETAIL",
size = "xs",
radius = "xs",
type = "ghost",
onClick = { Log.d("Card", "Button clicked!") }
)
Spacer(modifier = Modifier.padding(8.dp))
Button(
text = "SAVE",
size = "xs",
radius = "xs",
onClick = { Log.d("Card", "Button clicked!") }
)
}
)Example
Variant
Set the variant prop to outline, filled or elevated.
Type
Set the type prop to stacked or horizontal.
Radius
Set the borderSize prop to none, xs, sm, md, lg, or xl.
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| id | false | - | string | Unique identifier for the component |
| type | false | stacked | stacked horizontal | Card content positioned such as stacked and horizontal |
| variant | true | outline | outline filled elevated | The visual variant style of the card. |
| borderSize | false | - | none xs sm md lg xl | Corner radius for card |
| imageUrl | false | - | url | A place for media image |
| header | false | - | Composeable | A composable function for header content. |
| body | true | - | Composeable | A composable function for body content. |
| footer | false | - | Composeable | A composable function for footer content. |
| style | false | - | modifier | To decorate or add behavior to Compose UI elements |