Current version 22.0.0

CSS helpers

Clearfix

Clearfix is used to clear elements that are taken out of flow, such as when float has been used in legacy layout methods.

Clearfix must be applied to a parent container when all child elements are floated, or have fixed or absolute positioning. This stops the parent container collapsing.

Avoid using float and other legacy layout methods.

Clearfix implementation

Helper class

.h-clearfix

Where possible, apply the helper class instead of the mixin. This reduces the amount of compiled CSS.

Mixin

@include clearfix()

Focus

Focus mixins allow you to customise the styling of focus states. These can be used alongside FocusService.

When using these mixins to customise focus on a Tangram component or custom element, consider how accessibility and usability may be impacted.

Learn more about how focus states help with accessibility.

Focus implementation

Mixin

@include focus($type: 'outline', $width: 'sm', $color: $tg-focus-outline-color, $disabled: false)

Styles the focus state of an element.

Focus hover implementation

Mixin

@include focus-hover($type: 'outline', $width: 'sm', $color: rgba($tg-focus-outline-color, 0.5))

Styles the hover focus state.

Focus none implementation

Mixin

@include focus-none()

Removes the focus styling of an element. Only remove focus styling on an element when focus styling is applied to a surrounding element.

Row container padding

Used to add padding to the container of a row without adding the full grid container styles.

This is useful at smaller breakpoints to avoid horizontal scrolling on rows that do not sit in a grid container.

Row container padding

Mixin

@include row-container-padding()

Visually hidden

Visually hidden styling is used to hide elements on a page, while keeping it available for customers using screen readers.

Learn more about how visually hidden content helps with accessibility.

Visually hidden implementation

Helper class

.h-visually-hidden

Where possible, apply the helper class instead of the mixin. This reduces the amount of compiled CSS.

Mixin

@include visually-hidden($breakpoint: $tg-sm-min)

Use this mixin to show or hide an element based on a maximum width breakpoint. Defaults to hiding content at the $tg-sm-min breakpoint.

Proudly made by © 2026 Trade Me Limited