SushiCard

A customizable card component for the Sushi design system.

SushiCard provides a surface for displaying related content in a contained unit. It supports:

• Custom shapes including rounded corners and ticket shapes
• Solid and dashed borders
• Elevation control
• Custom background colors
• Content composition through ColumnScope

Example

The SushiCard component is used to create cards with various styles and configurations.

// Basic card with rounded corners
SushiCard(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        SushiText(
            props = SushiTextProps(
                text = "Card Title",
                type = SushiTextType.SemiBold600
            )
        )

        SushiText(
            props = SushiTextProps(
                text = "Card content goes here with any composable content",
                type = SushiTextType.Regular400
            ),
            modifier = Modifier.padding(top = 8.dp)
        )
    }
}

// Card with custom background color and elevation
SushiCard(
    containerColor = SushiTheme.colors.blue.v100,
    elevation = 8.dp,
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    // Card content here
}

// Card with solid border
SushiCard(
    border = BorderStroke(1.dp, SushiTheme.colors.grey.v300.value),
    shape = RoundedCornerShape(12.dp),
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    // Card content here
}

// Card with dashed border and ticket shape
SushiCard(
    shape = TicketShape(16.dp.toPx(), 0.7f),
    borderConfig = DashedBorderConfig(
        color = SushiTheme.colors.red.v500.value,
        width = 2.dp,
        dashWidth = 5.dp,
        dashGap = 6.dp,
        shape = TicketShape(16.dp.toPx(), 0.7f)
    ),
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    // Card content here
}

Component API

SushiCard

Parameter	Description
modifier	The modifier to be applied to the card
borderConfig	Optional configuration for custom borders (e.g., dashed borders)
shape	The shape of the card (defaults to rounded corners)
containerColor	The background color of the card
border	Optional border stroke for the card (for solid borders)
elevation	The elevation of the card which determines its shadow
content	The composable content to be displayed inside the card

DashedBorderConfig

Parameter	Description
color	The color of the border
width	The thickness of the border line
dashWidth	The width of each dash in the pattern
dashGap	The gap between each dash in the pattern
shape	The shape to apply the border to (e.g., rectangle, rounded corner)