Layout

Card

A box for one piece of content — media on top, a title and a subtitle, text and actions at the bottom.

Features6

API

Theming

Basic

title, subtitle and the content.

Weekly report

Nov 3 – 9

Visitors grew 12% compared with last week. Most of them came from search.

Media

[txCardHeader] puts an image across the whole top of the card.

Visitors

Last 30 days

The busiest day was Thursday, with 2,900 visitors.

4 lines

<tx-card title="Visitors" subtitle="Last 30 days" class="card">  <img txCardHeader [src]="chart" alt="Visitors grow from 1,200 to 2,900 a day" />  The busiest day was Thursday, with 2,900 visitors.</tx-card>

Footer

Actions go into [txCardFooter].

Upgrade to Team

$12 per member a month

Shared projects, roles and an audit log for everyone in your workspace.

14 lines

<tx-card title="Upgrade to Team" subtitle="$12 per member a month" class="card">  Shared projects, roles and an audit log for everyone in your workspace.  <div txCardFooter class="actions">    <button      txButton      severity="secondary"      variant="text"      (click)="toast.info('We will remind you next month')"    >      Not now    </button>    <button txButton (click)="toast.success('Upgraded to Team')">Upgrade</button>  </div></tx-card>

Custom title

[txCardTitle] replaces the title with own markup — here a title with a pill.

Release 2.4 Live

Updated today

Faster search and a new export format.

6 lines

<tx-card subtitle="Updated today" class="card">  <div txCardTitle class="title">    Release 2.4 <tx-pill tone="success" size="small">Live</tx-pill>  </div>  Faster search and a new export format.</tx-card>

Grid

Cards in a grid keep equal heights; the footer stays at the bottom.

Free

One project and three members.

Team

$12 a member

Unlimited projects, roles and shared folders for the whole team.

Business

$24 a member

Single sign-on and an audit log.

15 lines

<div class="grid">  @for (plan of plans; track plan.name) {    <tx-card [title]="plan.name" [subtitle]="plan.price">      {{ plan.text }}      <button        txButton        txCardFooter        [variant]="plan.name === 'Team' ? undefined : 'outlined'"        [fluid]="true"      >        Choose {{ plan.name }}      </button>    </tx-card>  }</div>

Design tokens

dt changes the look of one card.

Tip

Press / anywhere to search.

14 lines

<tx-card  title="Tip"  class="card"  [dt]="{    root: {      background: 'var(--tx-primary-soft)',      borderColor: 'transparent',      shadow: 'none',      titleFontSize: '15px',    },  }">  Press / anywhere to search.</tx-card>