Logo
The logo component is a small convenient wrapper around our various logo assets. It helps standardize the way we display our logos across the platform.
Basic Usage
template
<Logo />Playground
Logo types
WARNING
Certain combinations of brand + variant don't have an available logo in the design system, i.e. Marketplace Lockup. The component will log an error and render nothing if you provide an unavailable combo.
Purple logos
LeafLink Lockup
LeafLink Brandmark
Marketplace Brandmark
Payments Lockup
Payments Brandmark
Direct Pay Lockup
Flex Pay Lockup
PoST Lockup
template
<h4>LeafLink Lockup</h4>
<Logo />
<h4>LeafLink Brandmark</h4>
<Logo brand="leaflink" variant="brandmark" />
<h4>Marketplace Brandmark</h4>
<Logo brand="marketplace" variant="brandmark" />
<h4>Payments Lockup</h4>
<Logo brand="payments" />
<h4>Payments Brandmark</h4>
<Logo brand="payments" variant="brandmark" />
<h4>Direct Pay Lockup</h4>
<Logo brand="direct-pay" />
<h4>Flex Pay Lockup</h4>
<Logo brand="flex-pay" />
<h4>PoST Lockup</h4>
<Logo brand="flex-pay" />White logos
LeafLink Lockup
LeafLink Brandmark
Marketplace Brandmark
Payments Lockup
Payments Brandmark
Direct Pay Lockup
Flex Pay Lockup
PoST Lockup
template
<h4>LeafLink Lockup</h4>
<Logo color="white" />
<h4>LeafLink Brandmark</h4>
<Logo variant="brandmark" color="white" />
<h4>Marketplace Brandmark</h4>
<Logo brand="marketplace" variant="brandmark" color="white" />
<h4>Payments Lockup</h4>
<Logo brand="payments" color="white" />
<h4>Payments Brandmark</h4>
<Logo brand="payments" variant="brandmark" color="white" />
<h4>Direct Pay Lockup</h4>
<Logo brand="direct-pay" color="white" />
<h4>Flex Pay Lockup</h4>
<Logo brand="flex-pay" color="white" />
<h4>PoST Lockup</h4>
<Logo brand="flex-pay" color="white" />API
See the documentation below for a complete reference to all the props and classes available to the components mentioned here.