D.School Component Library

Social Nav 

<nav role="navigation" class="c-social-nav">

      <a class="o-link c-social-nav__link" href="/" target="_self">
          <span class="o-link__label">
              LinkedIn
          </span>
      </a>

      <a class="o-link c-social-nav__link" href="/" target="_self">
          <span class="o-link__label">
              Instagram
          </span>
      </a>

      <a class="o-link c-social-nav__link" href="/" target="_self">
          <span class="o-link__label">
              Twitter
          </span>
      </a>

      <a class="o-link c-social-nav__link" href="/" target="_self">
          <span class="o-link__label">
              Facebook
          </span>
      </a>

      <a class="o-link c-social-nav__link" href="/" target="_self">
          <span class="o-link__label">
              Medium
          </span>
      </a>
  </nav>
 
{% set base_class = social_nav.base_class|default('c-social-nav') %}
{% if social_nav.items %}
  <nav role="navigation" class="{{ bem(base_class, social_nav.element, social_nav.modifiers, social_nav.extra) }}" {{ attributes(social_nav.attributes) }}>
    {% for item in social_nav.items %}
      {% include "@link" with {
        "link": {
          "text": item.text,
          "url": item.url,
          "target": item.target,
          "extra": bem(base_class, 'link')
        }
      } %}
    {% endfor %}
  </nav>
{% endif %}
 
{
  "social_nav": {
    "items": [
      {
        "text": "LinkedIn",
        "url": "/"
      },
      {
        "text": "Instagram",
        "url": "/"
      },
      {
        "text": "Twitter",
        "url": "/"
      },
      {
        "text": "Facebook",
        "url": "/"
      },
      {
        "text": "Medium",
        "url": "/"
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------*\
  $SOCIAL-NAV
\*------------------------------------ */

.c-social-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--ds-space-sm);

  &__link.o-link {
    @extend .o-caption--primary-caption1;
    font-weight: var(--ds-font-weight-light) !important;
    text-decoration: underline;

    span::after {
      display: none;
    }
  }
}
  • URL: /components/raw/social-nav/_social-nav.scss
  • Filesystem Path: components/02-molecules/navigation/social-nav/_social-nav.scss
  • Size: 435 Bytes

No notes defined.