CmCard

import { CmCard } from "cosmemilton-ui/server";

import { CmBadge, CmCard, CmStack, CmText } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmCard
      padding="lg"
      elevated
      accent="left"
      tone="primary"
      header={<CmBadge tone="primary">Contrato</CmBadge>}
      footer={<CmText tone="muted">Atualizado ha 4 minutos</CmText>}
    >
      <CmStack gap="xs">
        <CmText weight="semibold" size="md">Renovacao anual</CmText>
        <CmText tone="muted">Documentos revisados e prontos para assinatura.</CmText>
      </CmStack>
    </CmCard>
  );
}

import { CmCard, CmGrid, CmGridContainer, CmText } from "cosmemilton-ui/server";

const cards = [
  { variant: "surface", title: "Surface" },
  { variant: "soft", title: "Soft" },
  { variant: "outline", title: "Outline" },
  { variant: "ghost", title: "Ghost" },
] as const;

export default function Example() {
  return (
    <CmGridContainer columns={{ base: 1, md: 2 }} gap="md">
      {cards.map((item) => (
        <CmGrid key={item.variant}>
          <CmCard variant={item.variant} padding="lg" interactive>
            <CmText weight="semibold">{item.title}</CmText>
            <CmText tone="muted">Superficie para composicoes administrativas.</CmText>
          </CmCard>
        </CmGrid>
      ))}
    </CmGridContainer>
  );
}