Header - ariel-fer/Araena GitHub Wiki

Header Component Documentation

Class Naming Convention

The primary class for the header component should be named c-headr. This class is essential for ensuring that the header consistently remains at the top of the page. To achieve this, the position property should be set to sticky with a z-index high.

Specialized Classes

In certain cases where there is a need for special styling or modifications that deviate from the defined style guide, it is permissible to create specific classes exclusively for use within the header component. These specialized classes, however, do not need to be documented in the general style guide.

Handling Element-specific Changes

For any changes needed in titles, texts, or other components within the footer, it is advisable to create a class named c-footer_. For example, if there's a specific style for the footer title, you would create a class called c-header_content. Or in the case of a special layout requirement, you can create a class named c-header_container. This class can include values that may not be necessary to define as variables but are specific to the layout component.

Component Reusability

It is crucial to set footer as a Webflow component to facilitate its reuse across various pages. For component naming conventions here is more information Creating Components

Handling Header Items

To deal with the items in the header and provide them with a consistent height, it is recommended to use a fixed height instead of applying padding to each item. Padding depends on the size of the object and is relative, which may lead to inconsistent spacing. A fixed height ensures uniformity and predictable layout across different screen sizes. When incorporating logos into the header, ensure that they follow the established style guide and maintain consistency described here Logos

⚠️ **GitHub.com Fallback** ⚠️