Card

New

A flexible surface for content, previews and related actions.

Content slotsCustom headersFooter actions

Basic

Use header and subHeader for a quick title and subtitle, then place any content inside.

A place for your next idea

Your workspace, organized

Bring project details, notes and resources together in one clear view. Cards adapt to their container and let your content set the pace.

Header, templates & actions

Compose a cover, custom title, subtitle and footer. Buttons retain their normal behavior.

Studio workspace Design

Updated today · 8 collaborators

A shared home for your team's ideas. Keep the brief, visual direction and next steps close at hand.

12 resources3 milestones

Save the project to add it to your collection.

Cards in a grid

Set the layout on the parent. Footer actions align at the bottom of equal-height cards.

Explore

Start with the essentials

Discover inputs, buttons and building blocks for your next application.

Compose

Make it your own

Combine cards with accordions to organize richer pages. Customize colors and spacing with CSS variables.

Usage and API

Import AvCard and the slot directives you need: AvCardHeader, AvCardTitle, AvCardSubtitle and AvCardFooter from avero-ui.

HTML

<av-card header="Project overview" subHeader="Design workspace">
  <ng-template avCardHeader>
    <img src="project-cover.jpg" alt="Project preview" />
  </ng-template>
  <p>Your project details go here.</p>
  <ng-template avCardFooter>
    <button avButton (click)="save()">Save project</button>
  </ng-template>
</av-card>

Slots. header supplies the title text, and subHeader supplies its subtitle. ng-template avCardHeader is the optional cover area above the body. avCardTitle and avCardSubtitle override their text inputs. avCardFooter follows the projected content. Put slot templates directly inside av-card; omitted slots add no empty sections.

Accessibility. The title is a heading; headingLevel defaults to 3 and supports 1–6. Title templates should contain presentational content, without another heading element. The card has no default role, focus stop or click behavior. Add role="region" and aria-label on av-card when you need a named region. Links and buttons inside remain keyboard accessible; provide alt text for meaningful cover images.

Layout and theme. Set width, height or grid placement on av-card. Cover content is clipped to the top corners; give your images width: 100% and display: block. Customize --av-card-background, --av-card-color, --av-card-border, --av-card-radius, --av-card-shadow, --av-card-padding, --av-card-gap, --av-card-title-size, --av-card-title-color and --av-card-muted.