Use the Header component to create a header that has all of its items aligned vertically with consistent horizontal spacing.
Header
The .Header class is the wrapping class that aligns all the items properly and gives the header its dark background. Each direct child of the .Header component is expected to be a .Header-item component. The component utilizes flexbox CSS to align all these items properly and applies spacing scale margin.
All items directly under the .Header component should be a .Header-item component. Inside these components can be anything (text, forms, images...), and the .Header-item component will make sure these elements vertically align with each other.
.Header-item elements have a built-in margin that will need to be overridden with the mr-0 utility class for the last element in the container. We relied on the utility classes here instead of :last-child because the last child isn't always the item visible. On responsive pages, there's a mobile menu that gets presented to the user at smaller breakpoints.
The .Header-item element has a modifier class, .Header-item--full, that stretches it to fill the available space and push any remaining items to the right.
<divclass="Header">
<divclass="Header-item">
Item 1
</div>
<!-- Full item stretches across -->
<divclass="Header-item Header-item--full border">
Item 2
</div>
<divclass="Header-item mr-0 ">
Item 3
</div>
</div>
Header-link
Add the .Header-link class to any anchor tags in the header to give them consistent styling and hover opacity. This class makes the links white, bold and 70% fade on hover.
