52 lines
840 B
CSS
52 lines
840 B
CSS
/* Card component styles */
|
|
|
|
/* Block */
|
|
.card {
|
|
@apply relative flex flex-col gap-3 overflow-visible p-4;
|
|
@apply shadow-surface;
|
|
border-radius: min(32px, var(--radius-3xl));
|
|
}
|
|
|
|
/* Element - header */
|
|
.card__header {
|
|
@apply flex flex-col;
|
|
}
|
|
|
|
/* Element - title */
|
|
.card__title {
|
|
@apply text-sm leading-6 font-medium text-foreground;
|
|
}
|
|
|
|
/* Element - description */
|
|
.card__description {
|
|
@apply text-sm leading-5 text-muted;
|
|
}
|
|
|
|
/* Element - content */
|
|
.card__content {
|
|
@apply flex flex-1 flex-col gap-1;
|
|
}
|
|
|
|
/* Element - footer */
|
|
.card__footer {
|
|
@apply flex flex-row items-center;
|
|
}
|
|
|
|
/* Modifier - variant */
|
|
|
|
.card--transparent {
|
|
@apply border-none bg-transparent shadow-none;
|
|
}
|
|
|
|
.card--default {
|
|
@apply bg-surface;
|
|
}
|
|
|
|
.card--secondary {
|
|
@apply bg-surface-secondary;
|
|
}
|
|
|
|
.card--tertiary {
|
|
@apply bg-surface-tertiary;
|
|
}
|