Migrating from tgCard

Replace the tgCard attribute, or the <tg-card> element, with the tg2Card attribute, and import Tg2CardComponent instead of TgCardComponent. tg2Card is attribute-only — there is no element form.

<!-- Before — element form -->
<tg-card>Content</tg-card>

<!-- Before — attribute form -->
<div tgCard>Content</div>

<!-- After — attribute-only, no element form -->
<div tg2Card>Content</div>

Host class

The host class is now o-card-tg2, not o-card. Existing SCSS overrides targeting .o-card stop applying — update every one of them to target .o-card-tg2 instead.

// Before
.o-card { ... }

// After
.o-card-tg2 { ... }

The same rename applies inside a nested scope, or alongside a co-located BEM class:

// Before — nested, scope already provided by the host selector
tm-offers-card:host {
    tg-card { ... }
}

// After
tm-offers-card:host {
    .o-card-tg2 { ... }
}

// Before — co-located class, element token dropped
tg-card.tm-watchlist-collection-summary { ... }

// After
.tm-watchlist-collection-summary { ... }

Background

The card's surface is now a token, --tg-card-bg, rather than a background colour applied by the surrounding page. A background override in consumer SCSS becomes a --tg-card-bg override — or use the shipped grey surface directly via the background input where it matches.

// Before — background supplied by the page behind a white card
.tm-my-card {
    background-color: $tg-ui-grey-extra-light;
}

// After — background is a token on the card itself
<div
    tg2Card
    class="tm-my-card"
    style="--tg-card-bg: var(--tg-color-bluff-oyster-10)">
    Content
</div>

// Or, for the shipped grey surface, skip the override entirely:
<div
    tg2Card
    background="grey">
    Content
</div>

Radius

Under tg-light / tg-dark the radius input maps onto the radii FrEnd already applies to the legacy card, so a consumer border-radius override becomes an input value. The default, large, is the legacy card's own 8px. See Themes for the full table.

// Before — radius overridden in consumer SCSS
.o-card {
    border-radius: $tg-border-radius-medium; // 6px
}

// After — under tg-light / tg-dark the input carries the same value
<div tg2Card theme="tg-light" radius="medium">Content</div>

// tg-light / tg-dark: small = 0, medium = 6px, large = 8px (default), extra-large = 16px

Clipping

tg2Card clips its content with overflow: hidden on every host, including non-interactive ones — the legacy card only clipped <a> / <button> hosts. A card containing a dropdown, tooltip or popover that is meant to escape the card's edges needs an explicit overflow: visible override on the host.

// tg2Card always clips to its radius with overflow: hidden. A popover or
// tooltip that needs to escape the card must opt the card itself out:
<div tg2Card class="tm-my-card-with-popover">...</div>

.tm-my-card-with-popover {
    overflow: visible;
}