Skip to content
zits/ui

Card

Overview

Section titled “Overview”

Card is a six-part composite of plain div/h3/p elements: ZitsCard (the bordered container), ZitsCardHeader, ZitsCardTitle (<h3>), ZitsCardDescription (<p>), ZitsCardContent, and ZitsCardFooter. There is no Navius primitive underneath and no interactive behavior of its own.

Install

Section titled “Install”
Terminal window
navius add card --to ./src/MyApp --namespace MyApp.Ui

Usage

Section titled “Usage”
<ZitsCard>
    <ZitsCardHeader>
        <ZitsCardTitle>Create project</ZitsCardTitle>
        <ZitsCardDescription>Deploy in one click.</ZitsCardDescription>
    </ZitsCardHeader>
    <ZitsCardContent>...</ZitsCardContent>
    <ZitsCardFooter><ZitsButton>Deploy</ZitsButton></ZitsCardFooter>
</ZitsCard>

Parts and props

Section titled “Parts and props”

None of the six parts add a prop beyond ChildContent and Attributes.

Styling surface

Section titled “Styling surface”

Every part accepts class/Attributes, merged via Cn.Class with the caller’s classes applied last. There are no variant/size parameters.

Data attribute hooks

Section titled “Data attribute hooks”

Card emits no data-* state hooks; it is a static structural component.

Card wires no ARIA role of its own beyond the native semantics of <h3> (title) and <p> (description); the container and its content/footer slots are plain div elements.