PrimitivesDisplayBrand logo

Brand logo

The Koala logo, icon or wordmark, in the right colours for the current theme.

Variants

The logo ships as four images, icon and wordmark in light and dark, and the helper shows the right one. Default is the icon on a phone and the wordmark from the small breakpoint up; IconOnly and FullOnly never switch.

Default

IconOnly

FullOnly

As a home link

Where the logo is a link, put the helper on the caller's own <a> so the href and routing attributes stay the caller's. The brochure navs do this with FullOnly; app-name adds a label after the wordmark, as the Tech and Design sites do.

Tech

Size and breakpoint

Small suits a compact header or a sidebar. breakpoint="Lg" holds the icon until the large breakpoint, for a navbar that needs the room first.

size="Small" app-name="Design"

Design

breakpoint="Lg"

API

variant DefaultIconOnlyFullOnly

size DefaultSmall

breakpoint SmLg

alt text (default Koala logo)

app-name text

image-class replaces the size's height class

data-analytics event name on the link form; .open is appended