cloud.gov pattern library

breadcrumb navigation: Spaceopen

There are no notes for this item.

<nav class="bg-white p4 mn2">
    <div class="row">

        <div class="col-fit">
            <div class="col-fit h8 row-end">
                <div class="h6 row-center-x">

                    <svg class="icon icon-large icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-home" >
  </use>
</svg>

                </div>
            </div>
        </div>

        <div class="col-fit">
            <div class="col-fit h8 row-end">
                <div class="h6 row-center-x sans-s6 fw-300 lightgray lh-single mx105">
                    /
                </div>
            </div>
        </div>

        <div class="col-fit">

            <div class="h8">

                <div class="h2 sans-s1 fw500 lightgray uppercase ls-loose">
                    Organization
                </div>

                <div class="h6 row-center-x">

                </div>

            </div>

            <div class="item-open w1 mt05 pl1 hide">

                <div class="mt1 ws-nowrap row-center-x">
                    <span class="inline-block col-fit">
            
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

          </span>
                    <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">abacus</span>
                </div>

                <div class="mt1 ws-nowrap row-center-x">
                    <span class="inline-block col-fit">
            
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

          </span>
                    <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">epa-journeyman</span>
                </div>

                <div class="mt1 ws-nowrap row-center-x">
                    <span class="inline-block col-fit">
            
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

          </span>
                    <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">epa-fisheries-explorer</span>
                </div>

                <div class="mt1 ws-nowrap row-center-x">
                    <span class="inline-block col-fit">
            
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

          </span>
                    <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">sandbox</span>
                </div>

            </div>

        </div>

        <div class="col-fit">
            <div class="col-fit h8 row-end">
                <div class="h6 row-center-x sans-s6 fw-300 lightgray lh-single mx105">
                    /
                </div>
            </div>
        </div>

        <div class="col-fit">

            <div class="h8">

                <div class="h2 sans-s1 fw500 uppercase blue ls-loose">
                    Space
                </div>

                <div class="h6 row-center-x">

                    <button class="usa-button trigger action action-primary">
  <span class="trigger-content row-center-x">
    <span class="trigger-icon col-fit">
      
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

    </span>
    <span class="trigger-text col-fill">
        dev
      </span>
      <span class="trigger-action col-fit">
        
          
            
<svg class="icon icon-fill icon-white icon-chevron-up">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-chevron" >
  </use>
</svg>

          
        
      </span>
  </span>
</button>

                </div>

            </div>

            <div class="item-open w1 mt05 pl1">

                <div class="mt105 ws-nowrap row-center-x">
                    <span class="lh-single sans-s2 fw500 col-fit ws-nowrap">All spaces in</span>
                    <span class="inline-block col-fit mx1">
            
<svg class="icon icon-small icon-fill ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-org" >
  </use>
</svg>

          </span>
                    <span class="lh-single sans-s2 fw700 underline col-fit ws-nowrap">epa-journeyman</span>
                </div>

                <div class="mt1 ws-nowrap row-center-x">
                    <span class="inline-block col-fit">
            
<svg class="icon icon-small icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

          </span>
                    <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">dev</span>
                </div>

                <div class="mt1 ws-nowrap row-center-x">
                    <span class="inline-block col-fit">
            
<svg class="icon icon-small icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

          </span>
                    <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">prod</span>
                </div>

                <div class="mt1 ws-nowrap row-center-x">
                    <span class="inline-block col-fit">
            
<svg class="icon icon-small icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

          </span>
                    <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">stage</span>
                </div>

            </div>

        </div>

        <div class="col-fit">
            <div class="col-fit h8 row-end">
                <div class="h6 row-center-x sans-s6 fw-300 lightgray lh-single mx105">
                    /
                </div>
            </div>
        </div>

        <div class="col-fit">

            <div class="col-fit h8 row-end">
                <div class="item-closed">

                    <div class="h2 sans-s1 fw500 uppercase lightgray ls-loose">
                        App
                    </div>

                    <div class="row-center-x">
                        <div class="col-fit mr2 h6 row-center-x">

                            <svg class="icon icon-large icon-fill icon-bordered icon-ok">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

                        </div>
                        <div class="mr105 col-fit sans-s9 fw300 lh-single h6 row-center-x">
                            journeyman-dev
                        </div>
                        <div class="col-fit h6 row-center-x">

                            <svg class="icon icon-fill  icon-chevron-down">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-chevron" >
  </use>
</svg>

                        </div>
                    </div>

                </div>
            </div>

            <div class="item-open w1 mt05 pl1 hide">

                <div class="mt105 ws-nowrap row-center-x">
                    <span class="lh-single sans-s2 fw500 col-fit ws-nowrap">All apps in</span>
                    <span class="inline-block col-fit mx1">
            
<svg class="icon icon-small icon-fill icon-bordered ">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-space" >
  </use>
</svg>

          </span>
                    <span class="lh-single sans-s2 fw700 underline col-fit ws-nowrap">dev</span>
                </div>

                <div class="mt1 ws-nowrap row-center-x">
                    <span class="inline-block col-fit">
            
<svg class="icon icon-small icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

          </span>
                    <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">jman-mfa</span>
                </div>

                <div class="mt1 ws-nowrap row-center-x">
                    <span class="inline-block col-fit">
            
<svg class="icon icon-small icon-fill icon-bordered icon-active">
  <use xmlns:xlink="http://www.w3.org/1999/xlink"
       xlink:href="/img/cloudgov-sprite.svg#i-fill-app" >
  </use>
</svg>

          </span>
                    <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">journeyman-dev</span>
                </div>

            </div>

        </div>

    </div>
</nav>
 
{# breadcrumbNav#}
<nav class="bg-white p4 mn2">
  <div class="row">

    {# bcHome #}
    <div class="col-fit">
      <div class="col-fit h8 row-end">
        <div class="h6 row-center-x">
          {% render '@fill-icons--home-active-large'%}
        </div>
      </div>
    </div>
    {# /bcHome #}

    {# bcSlash #}
    <div class="col-fit">
      <div class="col-fit h8 row-end">
        <div class="h6 row-center-x sans-s6 fw-300 lightgray lh-single mx105">
          /
        </div>
      </div>
    </div>
    {# /bcSlash #}

    {# bcEntry #}
    <div class="col-fit">

      {# bcEntryTop #}
      <div class="h8">

        {# bcEntryLabel--off #}
        <div class="h2 sans-s1 fw500 lightgray uppercase ls-loose">
          Organization
        </div>
        {# /bcEntryLabel--off #}

        {# bcEntryTrigger--closed #}
        <div class="h6 row-center-x">
          {% render '@trigger--base-outline', {buttonText: 'epa-journeyman'}, true %}
        </div>
        {# /bcEntryTrigger #}

      </div>
      {# /bcEntryTop #}

      {# bcContentDrawer--closed #}
      <div class="item-open w1 mt05 pl1 hide">

        {# bcContextRow #}
        {# /bcContextRow #}

        {# bcRow #}
        <div class="mt1 ws-nowrap row-center-x">
          <span class="inline-block col-fit">
            {% render '@fill-icons--org-small'%}
          </span>
          <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">abacus</span>
        </div>
        {# /bcRow #}

        {# bcRow #}
        <div class="mt1 ws-nowrap row-center-x">
          <span class="inline-block col-fit">
            {% render '@fill-icons--org-small'%}
          </span>
          <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">epa-journeyman</span>
        </div>
        {# /bcRow #}

        {# bcRow #}
        <div class="mt1 ws-nowrap row-center-x">
          <span class="inline-block col-fit">
            {% render '@fill-icons--org-small'%}
          </span>
          <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">epa-fisheries-explorer</span>
        </div>
        {# /bcRow #}

        {# bcRow #}
        <div class="mt1 ws-nowrap row-center-x">
          <span class="inline-block col-fit">
            {% render '@fill-icons--org-small'%}
          </span>
          <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">sandbox</span>
        </div>
        {# /bcRow #}

      </div>
      {# /bcContentDrawer #}

    </div>
    {# /bcEntry #}

    {# bcSlash #}
    <div class="col-fit">
      <div class="col-fit h8 row-end">
        <div class="h6 row-center-x sans-s6 fw-300 lightgray lh-single mx105">
          /
        </div>
      </div>
    </div>
    {# /bcSlash #}

    {# bcEntry #}
    <div class="col-fit">

      {# bcEntryTop #}
      <div class="h8">

        {# bcEntryLabel--on #}
        <div class="h2 sans-s1 fw500 uppercase blue ls-loose">
          Space
        </div>
        {# /bcEntryLabel #}

        {# bcEntryTrigger--open #}
        <div class="h6 row-center-x">
          {% render '@trigger--active-open', {buttonText: 'dev'}, true %}
        </div>
        {# /bcEntryTrigger #}

      </div>
      {# /bcEntryTop #}

      {# bcContentDrawer--open #}
      <div class="item-open w1 mt05 pl1">

        {# bcContextRow #}
        <div class="mt105 ws-nowrap row-center-x">
          <span class="lh-single sans-s2 fw500 col-fit ws-nowrap">All spaces in</span>
          <span class="inline-block col-fit mx1">
            {% render '@fill-icons--org-small'%}
          </span>
          <span class="lh-single sans-s2 fw700 underline col-fit ws-nowrap">epa-journeyman</span>
        </div>
        {# /bcContextRow #}

        {# bcRow #}
        <div class="mt1 ws-nowrap row-center-x">
          <span class="inline-block col-fit">
            {% render '@fill-icons--space-small'%}
          </span>
          <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">dev</span>
        </div>
        {# /bcRow #}

        {# bcRow #}
        <div class="mt1 ws-nowrap row-center-x">
          <span class="inline-block col-fit">
            {% render '@fill-icons--space-small'%}
          </span>
          <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">prod</span>
        </div>
        {# /bcRow #}

        {# bcRow #}
        <div class="mt1 ws-nowrap row-center-x">
          <span class="inline-block col-fit">
            {% render '@fill-icons--space-small'%}
          </span>
          <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">stage</span>
        </div>
        {# /bcRow #}

      </div>
      {# /bcContentDrawer #}

    </div>
    {# /bcEntry #}

    {# bcSlash #}
    <div class="col-fit">
      <div class="col-fit h8 row-end">
        <div class="h6 row-center-x sans-s6 fw-300 lightgray lh-single mx105">
          /
        </div>
      </div>
    </div>
    {# /bcSlash #}

    {# bcEntryPrimary #}
    <div class="col-fit">

      {# bcEntryPrimaryTop #}
      <div class="col-fit h8 row-end">
        <div class="item-closed">

          {# bcEntryLabel-off #}
          <div class="h2 sans-s1 fw500 uppercase lightgray ls-loose">
            App
          </div>
          {# /bcEntryLabel #}

          {# bcEntryPrimaryText--closed #}
          <div class="row-center-x">
            <div class="col-fit mr2 h6 row-center-x">
              {% render '@fill-icons--app-ok-large'%}
            </div>
            <div class="mr105 col-fit sans-s9 fw300 lh-single h6 row-center-x">
              journeyman-dev
            </div>
            <div class="col-fit h6 row-center-x">
              {% render '@icon-ui--chevron-down'%}
            </div>
          </div>
          {# /bcEntryPrimaryText #}

        </div>
      </div>
      {# /bcEntryPrimaryTop #}

      {# bcContentDrawer--closed #}
      <div class="item-open w1 mt05 pl1 hide">

        {# bcContextRow #}
        <div class="mt105 ws-nowrap row-center-x">
          <span class="lh-single sans-s2 fw500 col-fit ws-nowrap">All apps in</span>
          <span class="inline-block col-fit mx1">
            {% render '@fill-icons--space-small'%}
          </span>
          <span class="lh-single sans-s2 fw700 underline col-fit ws-nowrap">dev</span>
        </div>
        {# /bcContextRow #}

        {# bcRow #}
        <div class="mt1 ws-nowrap row-center-x">
          <span class="inline-block col-fit">
            {% render '@fill-icons--app-active-small'%}
          </span>
          <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">jman-mfa</span>
        </div>
        {# /bcRow #}

        {# bcRow #}
        <div class="mt1 ws-nowrap row-center-x">
          <span class="inline-block col-fit">
            {% render '@fill-icons--app-active-small'%}
          </span>
          <span class="lh-single blue sans-s8 underline pl1 col-fill ws-nowrap">journeyman-dev</span>
        </div>
        {# /bcRow #}

      </div>
      {# /bcContentDrawer #}

    </div>
    {# /bcEntryPrimary #}

  </div>
</nav>
{# /breadcrumbNav#}
 
/* No context defined for this component. */