Card Beta

import { Tg2CardComponent, Tg2CardRadiusEnum, Tg2CardBackgroundEnum } from '@trademe/tangram';

tg2Card is applied as an attribute to any native element — a <div>, <a> or <button> — rather than being its own element, unlike <tg-card>. Its content is projected with no wrapper, no padding and no slots.

Radius

radius accepts small (4px), medium (8px, default), large (16px) and extra-large (20px). Under tg-light / tg-dark the same four members resolve to the legacy card's radii instead — see Themes. The card clips its content to this radius by default — see Migrating from tgCard for the rare case where a popover needs to escape it.

Small

Content

Medium Default

Content

Large

Content

Extra large

Content

Background

background accepts white (default) and grey.

White Default

Content

Grey

Content

Photos

Put a real <img> inside the card, as in the card at the top of this page. The card's corner radius clips it. Don't use a CSS background-image, including tg-aspect-ratio: an <img> gets srcset, the preload path and a real alt.

<a tg2Card radius="medium" [routerLink]="listing.url">
    <img class="listing-card__photo" [src]="listing.photoUrl" alt="" />
    <div class="listing-card__body">{{ listing.title }}</div>
</a>

.listing-card__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

Bordered

bordered adds a 1px border. It defaults to false.

Unbordered Default

Content

Bordered

Content

Interactive

A card hosted on an <a> or <button> is interactive automatically. Use interactive to apply the same hover and press states to a <div> host that handles its own click — for example a routerLink on a non-anchor element.

Anchor host

Hover or focus this card

Button host

Interactive on a <div>

Hover, click or press Enter