Taking a quick look at your online store, you'll notice that components have similar styles, even without applying any customization.

All of them share pre-established values for font, background color, main color, button format, etc. For instance, the Info Card.

This is due to the style.json, the file responsible for declaring generic customization values for every Store Framework store.

To create a unique identity for your store's components, you can overwrite these values using CSS customizations.

Analyzing the recipe employed to customize stores using CSS, we can notice that several steps will be needed in order to apply your own style, such as:

1. Create a new file in the CSS folder, naming it vtex.{AppName}.css.

2. Use the CSS Handle of the component that will be customized in this file in the following format:

   
   

   _10

   .{CSSHandle} {

   _10

   {CSSProperty}: {DesiredValue};

   _10

   {CSSProperty}: {DesiredValue};

   _10

   }

   
   

3. Lacking CSS Handles, apply permitted CSS Selectors, such as :global(vtex-{componentName}).

4. To apply CSS to a specific block and not to every block of that type, use the blockClass resource, which appears next to the CSS Handles when inspecting your code. The blockClass must be declared as a prop in the block in question, and thus be referenced in the style file as shown below:

   
   

   _10

   .{CSSHandle}--{blockClass} {

   _10

   {CSSProperty}: {DesiredValue};

   _10

   {CSSProperty}: {DesiredValue};

   _10

   }

   
   

Before actually customizing an info card, it's necessary to add one, since our theme is really simple. With that in mind, go to home.jsonc file and add two info cards to its blocks:

Now, let's define those blocks in the same file, right below the rich-text definition. You can use the following code block to insert on the file:

By doing that, you're expected to see the home page similar to the following image:

To uncover a component's CSS Handles, such as the Info Card, simply access your documentation's Customization section.

According to the description of CSS Handles and to the store customization recipe using CSS, we can implement a customized Info Card example.

1. On the vtex.store-components.css file, found in /styles/css, let's edit its title and call-to-action button configurations by adding the following code:

   
   

   _21

   /* /styles/css/vtex.store-components.css */

   _21

   .infoCardHeadline {

   _21

   font-family: serif;

   _21

   font-size: 2.25rem;

   _21

   font-weight: normal;

   _21

   color: gray;

   _21

   border: 2px solid black;

   _21

   padding: 24px;

   _21

   }

   _21

   _21

   .infoCardCallActionContainer :global(.vtex-button) {

   _21

   color: white;

   _21

   background-color: gray;

   _21

   border: transparent;

   _21

   }

   _21

   _21

   .infoCardCallActionContainer :global(.vtex-button):hover {

   _21

   color: gray;

   _21

   background-color: blue;

   _21

   border: transparent;

   _21

   }

   
   

   You can check the effect of these changes by running the vtex link command.

   

2. Next, we'll add a specific style to the vintage info card. In order to do that, we first need to add blockClass, as shown below:

   
   

   _13

   "info-card#vintage": {

   _13

   "props": {

   _13

   "id": "info-card-vintage",

   _13

   "isFullModeStyle": false,

   _13

   "textPosition": "right",

   _13

   "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",

   _13

   "headline": "Vintage",

   _13

   "callToActionText": "DISCOVER",

   _13

   "callToActionUrl": "/sale/d",

   _13

   "textAlignment": "center",

   _13

   + "blockClass": "vintage"

   _13

   }

   _13

   }

   
   

3. Thereafter, declare a background-color for this specific info card in your CSS file:

   
   

   _10

   /* /styles/css/vtex.store-components.css */

   _10

   .infoCardContainer--vintage {

   _10

   background-color: #edcfd1;

   _10

   }

   
   

   The result should be similar to the image below:

   

4. Now let's finish by adding some more style to our Info Card. On the same CSS file that was used before, define a maximum width (max-width) of 1260px for all info cards, a margin of 0 auto and a padding of 0.

   You can do it based on the Info Card Handles.

   
   

   _10

   /* /styles/css/vtex.store-components.css */

   _10

   .infoCardContainer {

   _10

   max-width: 1260px;

   _10

   margin: 0 auto;

   _10

   padding: 0;

   _10

   }

   
   

   By doing that, the expected result is:

   

5. Change the component's title color to black and the font weight to bold:

   
   

   _10

   .infoCardHeadline {

   _10

   font-family: serif;

   _10

   font-size: 2.25rem;

   _10

   - font-weight: normal;

   _10

   - color: gray;

   _10

   + font-weight: bold;

   _10

   + color: black;

   _10

   border: 2px solid black;

   _10

   padding: 24px;

   _10

   }

   
   

   After doing that, you should have:

   

6. Change the call-to-action buttons background color during hover to white:

   
   

   _10

   .infoCardCallActionContainer :global(.vtex-button):hover {

   _10

   color: gray;

   _10

   - background-color: blue;

   _10

   + background-color: white;

   _10

   border: transparent;

   _10

   }

   
   

Make sure that you test also the hovering action in order to validate if the color is correct for this action!