Lists & Navs

Navs

Navigation

Simple navigation component that could be used for a global-header.

<nav class="g-navigation">
    <input id="mainNavButton" class="g-navigation__trigger" type="checkbox">
    <label class="g-navigation__label" for="mainNavButton">Menu</label>
    <ul class="g-navigation__row">
        <li class="g-navigation__list"><a class="g-navigation__link" href="#">All Products</a></li>
        <li class="g-navigation__list"><a class="g-navigation__link" href="#">Category 1</a></li>
        <li class="g-navigation__list"><a class="g-navigation__link" href="#">Category 2</a></li>
        <li class="g-navigation__list"><a class="g-navigation__link" href="#">Category 3</a></li>
        <li class="g-navigation__list"><a class="g-navigation__link" href="#">More</a></li>
    </ul>
</nav>

Menu

Here is a component that is commonly used in our global-footer

<nav class="g-menu">
    <h5 class="g-menu__title">Quick Links</h5>
    <ul class="g-menu__list">
        <li><a class="g-menu__link" href="#">About Us</a></li>
        <li><a class="g-menu__link" href="#">FAQs</a></li>
        <li><a class="g-menu__link" href="#">Contact Us</a></li>
        <li><a class="g-menu__link" href="#">Become an Affiliate</a></li>
    </ul>
</nav>

Lists

<ul> & <ul> helpers

Default

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

g-list-bare

Removing bullets and indentation.

<ul class="g-list-bare">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

g-list-block

Displays any list of items into stacked blocks.

<ul class="g-list-block">
    <li class="g-list-block__item">List Item 1</li>
    <li class="g-list-block__item">List Item 2</li>
    <li class="g-list-block__item">List Item 3</li>
</ul>

g-list-inline

Displays a list of items in one line.

<ul class="g-list-inline">
    <li class="g-list-inline__item">List Item 1</li>
    <li class="g-list-inline__item">List Item 2</li>
    <li class="g-list-inline__item">List Item 3</li>
</ul>

g-list-inline--narrow

Inline lists with smaller margins.

<ul class="g-list-inline g-list-inline--narrow">
    <li class="g-list-inline__item">List Item 1</li>
    <li class="g-list-inline__item">List Item 2</li>
    <li class="g-list-inline__item">List Item 3</li>
</ul>

g-list-inline--narrow

Inline lists with larger margins.

<ul class="g-list-inline g-list-inline--wide">
    <li class="g-list-inline__item">List Item 1</li>
    <li class="g-list-inline__item">List Item 2</li>
    <li class="g-list-inline__item">List Item 3</li>
</ul>