<aihio-card> v1.0.0 Markdown for agents

Card

A bordered surface that groups related content, with an optional header (title and description), content area, and footer for actions, such as a settings section or an item in a grid.

Intents container surface

Variants

Every value of the attributes that change how it looks. The values come from the schema.

`variant`

Visual style variant. Outline removes the shadow.

Default

A default card.

variant="default"

Outline

A outline card.

variant="outline"

Examples

Each one rendered live, over the markup that produces it.

Header, content, and footer

Card Title

Card description.

Card content here.

Action

<aihio-card>
  <aihio-card-header>
    <aihio-card-title>Card Title</aihio-card-title>
    <aihio-card-description>Card description.</aihio-card-description>
  </aihio-card-header>
  <aihio-card-content>
    <p>Card content here.</p>
  </aihio-card-content>
  <aihio-card-footer>
    <aihio-button>Action</aihio-button>
  </aihio-card-footer>
</aihio-card>

Mistakes

Each one beside its fix, with what aihio lint says about it. The prompt fragment gives agents the same pairs, and the build fails if the linter stops catching one or a fix stops passing.

Title must live inside `aihio-card-header`, not directly inside `aihio-card`.

Don't

<aihio-card><aihio-card-title>Hi</aihio-card-title></aihio-card>

aihio lint reports

invalid-child error child <aihio-card-title> is not allowed here. Expected: aihio-card-header, aihio-card-content, aihio-card-footer, #flow.

<aihio-card>
  <aihio-card-header>
    <aihio-card-title>Hi</aihio-card-title>
  </aihio-card-header>
</aihio-card>

Clickable cards need keyboard-accessible semantics.

Wrap the card in a link, or add role="button" plus keyboard handlers to the interactive surface.

Don't

<aihio-card onclick="openDetails()"><p>Open details</p></aihio-card>

aihio lint reports

card-click-handler warn Wrap the card in an <a> or attach role="button" + keyboard handlers on the outer element. aihio-card itself has no interactive role.

Open details

<a href="/details">
  <aihio-card><p>Open details</p></aihio-card>
</a>

API

Every attribute, property, method, and event the schema declares for aihio-card.

Attributes

variant: one of defaultoutline default default; Visual style variant. Outline removes the shadow.

Slots

default: Card content. Use aihio-card-header, aihio-card-content, aihio-card-footer for structure.

Composition

Allowed children: aihio-card-header aihio-card-content aihio-card-footer other HTML

Sub-components

Used only inside aihio-card, which gives them their roles and keyboard behaviour.

`<aihio-card-header>`

Card header container

`<aihio-card-title>`

Card title text

`<aihio-card-description>`

Card description text

`<aihio-card-content>`

Card main content area

`<aihio-card-footer>`

Card footer with actions

Accessibility

What you have to provide, and what the component already does. The obligations with a rule are checked by aihio lint and by the dev build's console warnings.

Your obligations

warn When card acts as a link or button (entire surface is clickable, or it has a click handler)

Wrap the card in an <a> or attach role="button" + keyboard handlers on the outer element. aihio-card itself has no interactive role.

Checked as card-click-handler

Handled for you

Card only adds visual grouping; headings, paragraphs, links, and buttons inside keep their native semantics.

In patterns

Canonical compositions that use aihio-card.