Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide

Logo

The assets displayed in this component / story are provided by our global CDN. You can find a list of these assets on our Notion page .

Basic Usage

import { Logo } from '@krakentech/coral'; <Logo />

Properties

href

<Logo href="https://octopus.energy" hrefSrLabel="Home" />
Home

width

<Logo width={200} />

variant

<Logo variant="logomark" width={50} /> <Logo variant="logotype" width={200} /> <Logo variant="combination" width={200} />
Constantine the Octopus
Constantine the Octopus

Full API

NameTypeDefault
widthstring | number

The total width (inclusive of constantine graphic and logo if withConstantine is true)

String or number accepted, eg: 400 would set the width to 400px wide.

100%
hrefstring

The ‘href’ for the link

hrefSrLabelstring

A hidden screen-reader label to describe to the user where the link will take them

altstring | undefined

Alternate text for an image, if the image cannot be displayed

'Octopus Energy Logo'
variant"logomark" | "logotype" | "combination"

Which part of the logo to show

  • ‘logomark’ = Just constantine
  • ‘logotype’ = Just “octopus energy”
  • ‘combination’ = Both of the above
logotype
Last updated on