Logo

AMP compatible

Description

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.

Table of Contents

Usage

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.

Blocks API

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.

Configuration

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 nameTypeDescriptionDefault value
titleString!The image alt descriptionVTEX logo
colorStringThe image fill color#F71963
showLabelBooleanSet the label visibilitytrue
widthNumberThe logo image width493
heightNumberThe logo image height177
urlStringThe image url-
hrefStringImage link-

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the Logo.

Class nameDescriptionComponent Source
sizeDesktopImage min/max size when in desktop modeindex
sizeMobileImage min/max size when in mobile modeindex
logoContainerThe main container of Logoindex
logoImageThe image of Logoindex