components
Logo (code)
This is a wrapper component around the CDN-hosted logos for each brand. This way you don't have to worry about versions, CDN urls, etc.
Extension resolving
The correct functioning of this component relies on extension resolving. In our documentation website, we don't work with extension resolving (as we dinamically load in every theme) and as such the preview of this component will always display Whitelabel's logos.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| alt | String | - | - | Extend native image alt. Should be the company’s name. The word “logo” is not necessary or useful as part of the alternative text. |
| className | String | - | - | Extend classNames. |
| extension | 'png''svg' | 'svg' | - | The extension of the image. |
| height | String01234567891011'auto''full' | 'auto' | - | Enable height of the image to 100%, auto or free value. |
| maxHeight | String01234567891011'auto''full' | - | - | Enable max-height of the image to 100%, auto or free value. |
| maxWidth | String01234567891011'auto''full' | 'full' | - | Enable max-width of the image to 100%, auto or free value. |
| name | String | - | - | Controls which logo is displayed. You can access Logo variations by using "variations.VARIATION_NAME" |
| verticalAlign | 'baseline''bottom''inherit''initial''middle''sub''super''text-bottom''text-top''top''unset' | 'middle' | - | Sets the vertical alignment of the imge |
| width | String01234567891011'auto''full' | 'auto' | - | Sets the width of the image to 100%, auto or free value. |
System Props
borderRadius
alignSelf, flex, flexBasis, flexGrow, flexShrink, order
float
height, maxHeight
m, mb, ml, mr, mt, mx, my
position, bottom, left, right, top, zIndex
width, maxWidth
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
Name
default: brand-main
This is the name of the logo, as can be found on the logos page.
Extension
default: svg
Use logo as svg or png, try to use svg as much as possible.
Height
default: undefined
Change the logo's height.
MaxHeight
default: undefined
Change the logo's max-height.
MaxWidth
default: full
Change the logo's max-width.
Width
default: auto
Change the logo's width.
VerticalAlign
default: middle
Vertical align the logo against text.
Morbi eget tortor volutpat orci fermentum gravida. Morbi sodales lacus id nibh posuere, in dapibus erat ornare. Maecenas scelerisque facilisis luctus. Nam at purus eu orci accumsan scelerisque. Morbi molestie aliquet consectetur. Phasellus ac felis rhoncus, tristique enim non, congue ex. Curabitur non enim nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget tortor volutpat orci fermentum gravida. Morbi sodales lacus id nibh posuere, in dapibus erat ornare. Maecenas scelerisque facilisis luctus.