Current version 22.0.0

Layout

Grid

This component is deprecated.
We recommend using native grid instead for accessibility and performance reasons.

import { TgColComponent, TgRowComponent } from '@trademe/tangram';

To help create cohesive page layouts, apply this flexible 12 column grid by using a container with rows and columns.

Grid container

The class .l-container sets padding and a max-width of 1600px. You must use a container to use rows and columns.

It is important to not use containers in a shell or parent component, as doing so limits the flexibility within the page view.

You can have multiple containers on a page view. Containers are not usually nested.

Behaviour

To visually balance the amount of whitespace on a page, left and right padding changes proportionally over breakpoints:

  • Below the ll breakpoint, the padding is unit based
  • Between ll - xl, the padding is percentage based
  • Above the xl breakpoint, the max-width takes effect and the padding is a fixed value

Row

A row allows columns to align to the grid. Rows can only ever have columns as direct children.

Example

5 columns
7 columns, with a lot of content so you can see how the row options work when you play with the options below
7 columns, with a lot of content so you can see how the row options work when you play with the options below
5 columns

Column

The width of columns can be set at each breakpoint, using one of the 12 sizes available. You can nest more rows and columns inside a column.

Example

Example

Column span

Behaviour

pull and push options use left and right positioning. offset uses margin-left.

Full-width areas

Grid container can’t be used for full-width areas on the page as it comes with preset padding and a max-width.

The recommended way to achieve a full-width area is to:

  • Close the current .l-container
  • Open a div, which you can style as needed
  • Close the full-width div
  • Add another .l-container, which will contain the rest of your page content.

If you use rows and columns inside the full-width area (without an .l-container) you will see horizontal scrolling at small screens. To avoid this, you can add a wrapping div element, add a CSS class to suit your component, and use the SCSS mixin @include row-container-padding(); to add the appropriate padding to container the row without adding the full grid container styles.

Media block

import { TgMediaBlockComponent, TgMediaBlockContentDirective, TgMediaBlockImageContentDirective } from '@trademe/tangram';

Media block is an easy way to layout content next to an image or icon.

Example

Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aperiam assumenda atque consectetur distinctio dolore eveniet.

Behaviour

  • Media block presents an image at its original size and ratio at all breakpoints when placed in the <tg-media-block-image> content slot.
  • <tg-media-block-content> will take up the remaining space.

Rack

import { TgRackComponent, TgRackItemComponent, TgRackItemPrimaryComponent, TgRackItemSecondaryDirective } from '@trademe/tangram';

Rack is a set of components for layouts where grid may not be suitable. They are often used for layout within components on a page.

Rack items can sit inside a parent rack to provide further layout options.

Example

Primary content
Secondary content

Behaviour

  • To ensure code remains semantic, tg-rack and tg-rack-item are also available as attribute selectors for applying rack layouts on an element (e.g. a link).
  • When using alignTop it is advised to also use flexContents if the items you are trying to align are not direct children of the Primary and Secondary areas.
  • bleed only bleeds out a ruled line, not the content. Therefore using bleed on a rack or rack item that isn’t ruled will have no effect.
  • When using gap, incorrect alignment can occur when the prefix area contains content with varied widths. In these cases consider putting the varied width content inside the primary area.

Spacing

import { TgMarginDirective, TgPaddingDirective } from '@trademe/tangram';

Spacing systems create vertical and horizontal rhythm, supporting a customers understanding of relationships between content on a page.

8px system

Tangram uses an 8px spacing system. All of our spacing units, sizing and line-heights are multiples of 8. When creating space use the $tg-unit variable or one of the spacing sizes listed below.

Spacing system example

Component spacing

Most Tangram components come with a bottom margin and padding already set. We use different margin sizes from the set defined. The variation in sizes allow us to visualize different relationships between components. We try to only use bottom margins to avoid margin collapse.

Three components separated using the Tangram spacing system

Spacing sizes

Custom spacing is added to component stylesheets. When it isn’t possible to add spacing to component stylesheets, use spacing directives to override or add spacing.

Example

$tg-spacing-half

Try not to use this variable. It is available if there are no other options.
This is half a unit to be used for spacing such as margins or padding.

(4px)

Example

$tg-unit

Used to space out elements that are directly related (for example, a label and a form input).

 (8px)

Example

$tg-spacing-compact

Used to space out elements that have a close relationship (for example, two form inputs, or a stripe’s label and the content slider below it). This is the gutter width of our columns at breakpoints below md.

(16px)

Example

$tg-spacing-base

Base spacing between elements. This is the gutter width of our columns at the md breakpoint and above.

(24px)

Example

$tg-spacing-medium

For when you want to give more breathing room after a component (for example, after a <fieldset>).

(32px)

Example

$tg-spacing-large

Used at the bottom of sections to differentiate content (for example, below the catsplat on the home page).

(48px)

Example

$tg-spacing-extra-large

Very rarely used, available for when really large spacing is desired.

 (80px)

Sticker positioner

import { TgSticker2Component, TgStickerWrapper2Component } from '@trademe/tangram';

Used to position an element in a corner of its parent container.

Example

placeholder image flag
Proudly made by © 2026 Trade Me Limited