Headers
Headers are used to provide structure and hierarchy to your content. They help users understand the organization of information and navigate through your application. Corncob provides a simple and elegant design for headers, ensuring a consistent user experience across your application.
Default Header
Company
Title
<header class="corn-header">
<div class="corn-company">
<div class="corn-company--logo">
<Logo class="corn-logo" />
</div>
<div class="corn-company--name">Company</div>
</div>
<div class="corn-header--title">Title</div>
<nav class="corn-header--nav">
<corn-button-bar class="corn-button-bar">
<a href="#" class="corn-link">
Link 1
</a>
<a href="#" class="corn-link" class="corn-link">
Link 2
</a>
<a href="#" class="corn-link">
Link 3
</a>
<a href="#" class="corn-link">
Link 4
</a>
<div class="corn-popover--anchor corn-button-bar--more">
<button class="corn-button corn-button--xs corn-pop" aria-controls="button-bar-popover">
More
</button>
<corn-popover
position="bottom"
id="button-bar-popover"
class="corn-popover"
></corn-popover>
</div>
</corn-button-bar>
</nav>
<div class="corn-header--actions">
<button
class="corn-button corn-button--icon corn-button--secondary corn-button--xs"
aria-label="Question Answering"
>
<QuestionAnsweringIcon />
</button>
<button
class="corn-button corn-button--icon corn-button--secondary corn-button--xs"
aria-label="User"
>
<UserIcon />
</button>
</div>
</header>Header Tokens
:root {
--cc-header--company--font--size: var(--cc-size-2);
--cc-header--company--font--weight: 500;
--cc-header--title--font--size: var(--cc-size-1);
--cc-header--title--font--weight: 400;
}