Component Navbox

Github
Navbox
Navbox is the container. 
                 

<nav class="Navbox">
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
</nav>
Items are rendered in a column always regardless of viewport size.
Navbox--sm
Navbox--sm is the container. 
                 

<nav class="
Navbox--sm
">
    <a href="#"> First item </a>
    <a href="#" class="u-sm-padding-left-1rem"> Second item </a>
    <a href="#" class="u-sm-padding-left-1rem"> Third item </a>
</nav>
The items are rendered in a row when the viewport is greater the --sm-viewport variable breakpoint. Resize the viewport to trigger the media query breakpoint.
Navbox--md
Navbox--md is the container. 
                 

<nav class="
Navbox--md
">
    <a href="#"> First item </a>
    <a href="#" class="u-md-padding-left-1rem"> Second item </a>
    <a href="#" class="u-md-padding-left-1rem"> Third item </a>
</nav>
The items are rendered in a row when the viewport is greater the --md-viewport variable breakpoint. Resize the viewport to trigger the media query breakpoint.
Navbox--lg
Navbox--lg is the container. 
                 

<nav class="
Navbox--lg
">
    <a href="#"> First item </a>
    <a href="#" class="u-lg-padding-left-1rem"> Second item </a>
    <a href="#" class="u-lg-padding-left-1rem"> Third item </a>
</nav>
The items are rendered in a row when the viewport is greater the --lg-viewport variable breakpoint. Resize the viewport to trigger the media query breakpoint.
Navbox--center
Navbox--center is the container. 
                 

<nav class="Navbox--center">
    <a href="#">First item</a>
    <a href="#">Second item</a>
    <a href="#">Third item</a>
</nav>
Items are rendered in a centered column always regardless of viewport size.
Navbox--center-sm
Navbox--center-sm is the container. 
                 

<nav class="
Navbox--center-sm
">
    <a href="#"> First item </a>
    <a href="#" class="u-sm-padding-left-1rem"> Second item </a>
    <a href="#" class="u-sm-padding-left-1rem"> Third item </a>
</nav>
The items are rendered in a row when the viewport is greater the --sm-viewport variable breakpoint. Resize the viewport to trigger the media query breakpoint.
Navbox--center-md
Navbox--center-md is the container. 
                 

<nav class="
Navbox--center-md
">
    <a href="#"> First item </a>
    <a href="#" class="u-md-padding-left-1rem"> Second item </a>
    <a href="#" class="u-md-padding-left-1rem"> Third item </a>
</nav>
The items are rendered in a row when the viewport is greater the --md-viewport variable breakpoint. Resize the viewport to trigger the media query breakpoint.
Navbox--center-lg
Navbox--center-lg is the container. 
                 

<nav class="
Navbox--center-lg
">
    <a href="#"> First item </a>
    <a href="#" class="u-lg-padding-left-1rem"> Second item </a>
    <a href="#" class="u-lg-padding-left-1rem"> Third item </a>
</nav>
The items are rendered in a row when the viewport is greater the --lg-viewport variable breakpoint. Resize the viewport to trigger the media query breakpoint.
Navbox--md Composite
Navbox--md is a container for other Navboxes.
                 

<nav class="Navbox--md">
  <img width="40px" src="../svg/logo-gray-900.svg">
 
  <nav class="Navbox--md">
    <a href="#" class="u-lg-padding-left-1rem"> First item </a>
    <a href="#" class="u-lg-padding-left-1rem"> Second item </a>
    <a href="#" class="u-lg-padding-left-1rem"> Third item </a>
    </nav>
</nav>
The items are rendered in a row when the viewport is greater the --lg-viewport variable breakpoint. Resize the viewport to trigger the media query breakpoint.
Navbox--center-md Composite
Navbox--center-md is a container for other Navboxes.
                 

<nav class="Navbox--center-md">
  <img width="40px" src="../svg/logo-gray-900.svg">
 
  <nav class="Navbox--center-md">
    <a href="#" class="u-lg-padding-left-1rem"> First item </a>
    <a href="#" class="u-lg-padding-left-1rem"> Second item </a>
    <a href="#" class="u-lg-padding-left-1rem"> Third item </a>
    </nav>  
</nav>
The items are rendered in a row when the viewport is greater the --md-viewport variable breakpoint. Resize the viewport to trigger the media query breakpoint.
Multi Navbox Composite
Navboxs are used to create a responsive composite. 
                 

<nav class="Navbox--lg">
  <nav class="Navbox--center-md u-background-color-md-blue-50">
    <div style="width:40px; height:40px">
    <svg version="1.1" viewBox="0 0 12.916 12.916" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <g transform="translate(-66.342 -164.58)">
  <path class="sc-Logo-fill" d="m66.342 164.58v12.916h12.916v-12.916zm5.2653 2.5116h0.58849c0.03621 0 0.07844 5e-3 0.12672 0.0141 0.0513 9e-3 0.09505 0.0392 0.13126 0.0905l0.55223 0.68348 0.05439 0.0814 0.0542-0.0814 0.54769-0.67895c0.03923-0.0544 0.08298-0.0859 0.13126-0.095 0.0513-9e-3 0.09505-0.0141 0.13126-0.0141h0.58849l-1.0773 1.2266h-0.75148zm1.376 1.6655c0.3621 0 0.69108 0.0574 0.98679 0.17205 0.29873 0.11469 0.56123 0.28058 0.78754 0.49783l-0.21265 0.41643c-0.02716 0.0453-0.05747 0.0799-0.09066 0.10407-0.03017 0.0211-0.06786 0.0317-0.11312 0.0317-0.0513 0-0.11172-0.0256-0.18112-0.0769-0.0694-0.0512-0.1569-0.10719-0.26252-0.16751-0.10259-0.0633-0.22778-0.12079-0.37564-0.17205-0.14484-0.0513-0.32135-0.0769-0.52956-0.0769-0.19614 0-0.36962 0.027-0.5205 0.0814-0.14786 0.0513-0.27304 0.12234-0.37564 0.21284-0.09958 0.0905-0.17515 0.19753-0.22645 0.32125-0.0513 0.12063-0.07686 0.25196-0.07686 0.39377 0 0.18105 0.04375 0.332 0.13126 0.4527 0.09052 0.11766 0.20814 0.21881 0.35298 0.30331 0.14786 0.0845 0.31396 0.15835 0.49803 0.22172 0.18708 0.0603 0.37704 0.12375 0.57016 0.19019 0.19614 0.0664 0.38629 0.14172 0.57036 0.22625 0.18708 0.0814 0.35299 0.18564 0.49783 0.31238 0.14786 0.12671 0.26566 0.28203 0.35317 0.46609 0.09053 0.18406 0.13579 0.41039 0.13579 0.67895 0 0.28364-0.0483 0.55069-0.14486 0.80114-0.09656 0.24744-0.23842 0.46314-0.4255 0.64722-0.18407 0.18406-0.41191 0.32896-0.68348 0.43456-0.26856 0.10563-0.5748 0.15846-0.9188 0.15846-0.42245 0-0.80559-0.0753-1.1496-0.22625-0.344-0.15391-0.63831-0.36072-0.88273-0.62022l0.25345-0.41644c0.02414-0.0331 0.05293-0.0603 0.08612-0.0814 0.03621-0.0241 0.07541-0.0362 0.11766-0.0362 0.03923 0 0.08298 0.0167 0.13126 0.0498 0.0513 0.0302 0.10849 0.0694 0.17186 0.11766 0.06337 0.0483 0.13591 0.10109 0.21738 0.15845 0.08147 0.0573 0.17352 0.11015 0.27611 0.15847 0.10561 0.0483 0.22474 0.0891 0.35751 0.12218 0.13277 0.0302 0.2822 0.0452 0.44817 0.0452 0.20821 0 0.39381-0.0286 0.55676-0.0859 0.16294-0.0573 0.30025-0.13718 0.4119-0.23986 0.11466-0.10562 0.20216-0.23079 0.26251-0.37562 0.06035-0.14484 0.09046-0.30641 0.09046-0.48444 0-0.19614-0.04527-0.35598-0.13579-0.4797-0.08751-0.12672-0.2036-0.23241-0.34844-0.31691-0.14484-0.0845-0.31094-0.15531-0.49803-0.21265-0.18708-0.0603-0.37704-0.12079-0.57016-0.18111-0.19312-0.0634-0.38327-0.13578-0.57036-0.21719-0.18708-0.0814-0.35319-0.18716-0.49803-0.31691-0.14484-0.12968-0.26245-0.29111-0.35298-0.48423-0.08751-0.19614-0.13126-0.43761-0.13126-0.72428 0-0.22933 0.04375-0.45111 0.13126-0.66535 0.09052-0.21425 0.22026-0.40439 0.38924-0.57036 0.172-0.16596 0.38185-0.29871 0.62928-0.39829 0.25045-0.0995 0.537-0.14938 0.85987-0.14938z"></path>
 </g>
</svg>
        
    </div>   
    <a href="#" class="u-md-padding-left-1rem"> First item </a>
    <a href="#" class="u-md-padding-left-1rem"> Second item </a>
    <a href="#" class="u-md-padding-left-1rem"> Third item </a>
    </nav>  
    <nav class="Navbox--center-md u-background-color-md-deep-purple-50">
      <div style="width:40px; height:40px">
      <svg version="1.1" viewBox="0 0 12.916 12.916" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <g transform="translate(-66.342 -164.58)">
  <path class="sc-Logo-fill" d="m66.342 164.58v12.916h12.916v-12.916zm5.2653 2.5116h0.58849c0.03621 0 0.07844 5e-3 0.12672 0.0141 0.0513 9e-3 0.09505 0.0392 0.13126 0.0905l0.55223 0.68348 0.05439 0.0814 0.0542-0.0814 0.54769-0.67895c0.03923-0.0544 0.08298-0.0859 0.13126-0.095 0.0513-9e-3 0.09505-0.0141 0.13126-0.0141h0.58849l-1.0773 1.2266h-0.75148zm1.376 1.6655c0.3621 0 0.69108 0.0574 0.98679 0.17205 0.29873 0.11469 0.56123 0.28058 0.78754 0.49783l-0.21265 0.41643c-0.02716 0.0453-0.05747 0.0799-0.09066 0.10407-0.03017 0.0211-0.06786 0.0317-0.11312 0.0317-0.0513 0-0.11172-0.0256-0.18112-0.0769-0.0694-0.0512-0.1569-0.10719-0.26252-0.16751-0.10259-0.0633-0.22778-0.12079-0.37564-0.17205-0.14484-0.0513-0.32135-0.0769-0.52956-0.0769-0.19614 0-0.36962 0.027-0.5205 0.0814-0.14786 0.0513-0.27304 0.12234-0.37564 0.21284-0.09958 0.0905-0.17515 0.19753-0.22645 0.32125-0.0513 0.12063-0.07686 0.25196-0.07686 0.39377 0 0.18105 0.04375 0.332 0.13126 0.4527 0.09052 0.11766 0.20814 0.21881 0.35298 0.30331 0.14786 0.0845 0.31396 0.15835 0.49803 0.22172 0.18708 0.0603 0.37704 0.12375 0.57016 0.19019 0.19614 0.0664 0.38629 0.14172 0.57036 0.22625 0.18708 0.0814 0.35299 0.18564 0.49783 0.31238 0.14786 0.12671 0.26566 0.28203 0.35317 0.46609 0.09053 0.18406 0.13579 0.41039 0.13579 0.67895 0 0.28364-0.0483 0.55069-0.14486 0.80114-0.09656 0.24744-0.23842 0.46314-0.4255 0.64722-0.18407 0.18406-0.41191 0.32896-0.68348 0.43456-0.26856 0.10563-0.5748 0.15846-0.9188 0.15846-0.42245 0-0.80559-0.0753-1.1496-0.22625-0.344-0.15391-0.63831-0.36072-0.88273-0.62022l0.25345-0.41644c0.02414-0.0331 0.05293-0.0603 0.08612-0.0814 0.03621-0.0241 0.07541-0.0362 0.11766-0.0362 0.03923 0 0.08298 0.0167 0.13126 0.0498 0.0513 0.0302 0.10849 0.0694 0.17186 0.11766 0.06337 0.0483 0.13591 0.10109 0.21738 0.15845 0.08147 0.0573 0.17352 0.11015 0.27611 0.15847 0.10561 0.0483 0.22474 0.0891 0.35751 0.12218 0.13277 0.0302 0.2822 0.0452 0.44817 0.0452 0.20821 0 0.39381-0.0286 0.55676-0.0859 0.16294-0.0573 0.30025-0.13718 0.4119-0.23986 0.11466-0.10562 0.20216-0.23079 0.26251-0.37562 0.06035-0.14484 0.09046-0.30641 0.09046-0.48444 0-0.19614-0.04527-0.35598-0.13579-0.4797-0.08751-0.12672-0.2036-0.23241-0.34844-0.31691-0.14484-0.0845-0.31094-0.15531-0.49803-0.21265-0.18708-0.0603-0.37704-0.12079-0.57016-0.18111-0.19312-0.0634-0.38327-0.13578-0.57036-0.21719-0.18708-0.0814-0.35319-0.18716-0.49803-0.31691-0.14484-0.12968-0.26245-0.29111-0.35298-0.48423-0.08751-0.19614-0.13126-0.43761-0.13126-0.72428 0-0.22933 0.04375-0.45111 0.13126-0.66535 0.09052-0.21425 0.22026-0.40439 0.38924-0.57036 0.172-0.16596 0.38185-0.29871 0.62928-0.39829 0.25045-0.0995 0.537-0.14938 0.85987-0.14938z"></path>
 </g>
</svg>
        
      </div>   
      <a href="#" class="u-md-padding-left-1rem"> First item </a>
      <a href="#" class="u-md-padding-left-1rem"> Second item </a>
      <a href="#" class="u-md-padding-left-1rem"> Third item </a>
      </nav>    
</nav>
The Navboxs are rendered in a row when the viewport is greater the --lg-viewport variable breakpoint and in a column otherwise. If the viewport size drops below the --md-viewport breakpoint, all items are rendered in a column.