Aeroporto di Bologna - Design System

Site areas 

<ul class="c-site-areas " aria-hidden="true">
    <li>
        <a href="/components/preview/page-home-travel--default.html" class="is-active">Viaggiare</a>
    </li>

    <li>
        <a href="/components/preview/page-society-home.html">Società</a>
    </li>

    <li>
        <a href="/components/preview/page-investor-home.html">Investor relations</a>
    </li>

    <li>
        <a href="/components/preview/papage-innovability-home.html">Innovability</a>
    </li>

</ul>
 
<ul class="c-site-areas {{ selector }}" aria-hidden="{{ aria-hidden }}">
  {{#each areas }}
  <li>
    <a href="{{ this.link }}" {{#if this.class}}class="{{ this.class }}"{{/if}}>{{ this.text }}</a>
  </li>

  {{/each}}
  {{#if work-with-us}}
  <li>
    <a href="" class="c-sites-areas__link">Lavora con noi</a>
  </li>
  {{/if}}

</ul>
 
{
  "aria-hidden": "true",
  "areas": [
    {
      "text": "Viaggiare",
      "class": "is-active",
      "link": "/components/preview/page-home-travel--default.html"
    },
    {
      "text": "Società",
      "link": "/components/preview/page-society-home.html"
    },
    {
      "text": "Investor relations",
      "link": "/components/preview/page-investor-home.html"
    },
    {
      "text": "Innovability",
      "link": "/components/preview/papage-innovability-home.html"
    }
  ]
}
  • Content: 
    .c-site-areas {
  color: primary(night, 100);
  display: flex;

  li {
    padding-right: remify(16px);
  }

  a {
    color: currentColor;
    text-decoration: none;

    &.is-active {
      color: primary(sky, 120);
    }
  }
}

.c-sites-areas__link {
  border-left: 1px solid  primary(night, 40);
  padding: remify(4px) remify(16px);
}
  • URL: /components/raw/site-areas/_site-areas.scss
  • Filesystem Path: src/views/02-molecules/site-areas/_site-areas.scss
  • Size: 339 Bytes

No notes defined.