The category detail element is a summary of category main information as title, description, image. Are configured in the BE.

<aside> ℹ️ Usually, styling this element takes from-to: 2-5h

</aside>

Where this element can be seen?

Category details can be found on the category page.

How should this element be designed?

The category details should be displayed accounting for the following:

• The category might have an image
• The category might have a description
• The category must have a name

Design example #1

Design example #2

How to develop styles for this element?

The CategoryDetails component is responsible for rendering the category details.

Designs may include representation of expanding/collapse functionality for PLP description, if is agreed that it is not part of CMS content, this functionality is in the scope of the ticket.

<aside> ➡️ Note that h1 can not be changed to h2 or a different tag even if designs require this, because h1 tag is important in terms of content display and SEO.

</aside>

Placement of this element will be held in the scope of the Category Page layout.

To style a component, override its .style.scss file. You can also customize how it is rendered by overriding the .component.js file.

How to override JavaScript classes?

How to override styles?

Implementation example #1

Implementation example #2