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 />


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


<Logo width={200} />


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

Name	Type	Default
`width`	`string \| 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%`
`href`	`string` The ‘href’ for the link
`hrefSrLabel`	`string` A hidden screen-reader label to describe to the user where the link will take them
`alt`	`string \| 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`