Logo is a VTEX component that displays a image logo.
This component can be imported and used by any VTEX app.
📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.
You should follow the usage instruction in the main README.
Then, add logo block into your app theme, as we do in our Header app.
When implementing this component as a block, various inner blocks may be available. The following interface lists the available blocks within Logo and describes if they are required or optional.
"logo": {
"component": "Logo"
}For now this block does not have any required or optional blocks.
Through the Storefront, you can change the Logo's behavior and interface. However, you also can make in your theme app, as Store theme does.
| Prop name | Type | Description | Default value |
|---|---|---|---|
title |
String! |
The image alt description | VTEX logo |
color |
String |
The image fill color | #F71963 |
showLabel |
Boolean |
Set the label visibility | true |
width |
Number |
The logo image width | 493 |
height |
Number |
The logo image height | 177 |
url |
String |
The image url | - |
href |
String |
Image link | - |
You should follow the Styles API instruction in the main README.
Below, we describe the namespace that are defined in the Logo.
| Class name | Description | Component Source |
|---|---|---|
sizeDesktop |
Image min/max size when in desktop mode | index |
sizeMobile |
Image min/max size when in mobile mode | index |
logoContainer |
The main container of Logo |
index |
logoImage |
The image of Logo |
index |