Card

Card simple con encabezado, contenido y pie.

Paquete: @solidiom/card
Versión: 0.0.1-next.0
Estado: stable

Ejemplos

import * as Card from "@solidiom/card"

;<Card.Root>
  <Card.Header>
    <Card.Title>Bienvenido</Card.Title>
    <Card.Description>Una card simple con todas las partes estándar.</Card.Description>
  </Card.Header>
  <Card.Content>Este es el área de contenido principal de la card.</Card.Content>
  <Card.Footer>Sección de pie</Card.Footer>
</Card.Root>

Mínimo

Usa solo las partes que necesites. Una card con solo contenido es perfectamente válida.

;<Card.Root>
  <Card.Content>Card con solo contenido.</Card.Content>
</Card.Root>

Solo Encabezado

Usa las partes del encabezado sin una sección de contenido o pie.

;<Card.Root>
  <Card.Header>
    <Card.Title>Titulo de la Card</Card.Title>
  </Card.Header>
</Card.Root>

Primeros pasos

Aprenda cómo integrar Solidiom en su proyecto.

Instale las primitivas que necesite y compléstelas con sus propios estilos. Ningún sistema de diseño obligatorio — use CSS, Tailwind, o UnoCSS.

Documentación →

Ver código fuente

        export function Root(props: CardRootProps) {
  return (
    <div
      class={props.class}
      style={props.style}
      {...applySemanticAttrs({ scope: "card", part: "root" })}
    >
      {props.children}
    </div>
  )
}