Lehigh Clutch Style Guide

Org Unit - Social Media 

<ul class="social-media-list">
    <li>

        <a href="https://www.instagram.com" class="social-icon instagram" title="instagram"><span class="sr-only">Find us on instagram</span></a>
    </li>
    <li>

        <a href="https://www.facebook.com" class="social-icon facebook" title="facebook"><span class="sr-only">Find us on facebook</span></a>
    </li>
    <li>

        <a href="https://www.twitter.com" class="social-icon twitter" title="twitter"><span class="sr-only">Find us on twitter</span></a>
    </li>
    <li>

        <a href="https://www.x.com" class="social-icon x" title="x"><span class="sr-only">Find us on x</span></a>
    </li>
    <li>

        <a href="https://www.youtube.com" class="social-icon youtube" title="youtube"><span class="sr-only">Find us on youtube</span></a>
    </li>
    <li>

        <a href="https://www.snapchat.com" class="social-icon snapchat" title="snapchat"><span class="sr-only">Find us on snapchat</span></a>
    </li>
    <li>

        <a href="https://www.tumblr.com" class="social-icon tumblr" title="tumblr"><span class="sr-only">Find us on tumblr</span></a>
    </li>
    <li>

        <a href="https://www.linkedin.com" class="social-icon linkedin" title="linkedin"><span class="sr-only">Find us on linkedin</span></a>
    </li>
    <li>

        <a href="https://www.flickr.com" class="social-icon flickr" title="flickr"><span class="sr-only">Find us on flickr</span></a>
    </li>
    <li>

        <a href="https://www.mastodon.social" class="social-icon mastodon" title="mastodon"><span class="sr-only">Find us on mastodon</span></a>
    </li>
</ul>
 
<ul class="social-media-list">
  {% for social in socials %}
  <li>{% include "@social_icon" with social %}</li>
  {% endfor %}
</ul>
 
{
  "socials": {
    "1": {
      "social_url": "https://www.instagram.com",
      "social_text": "instagram"
    },
    "2": {
      "social_url": "https://www.facebook.com",
      "social_text": "facebook"
    },
    "3": {
      "social_url": "https://www.twitter.com",
      "social_text": "twitter"
    },
    "4": {
      "social_url": "https://www.x.com",
      "social_text": "x"
    },
    "5": {
      "social_url": "https://www.youtube.com",
      "social_text": "youtube"
    },
    "6": {
      "social_url": "https://www.snapchat.com",
      "social_text": "snapchat"
    },
    "7": {
      "social_url": "https://www.tumblr.com",
      "social_text": "tumblr"
    },
    "8": {
      "social_url": "https://www.linkedin.com",
      "social_text": "linkedin"
    },
    "9": {
      "social_url": "https://www.flickr.com",
      "social_text": "flickr"
    },
    "10": {
      "social_url": "https://www.mastodon.social",
      "social_text": "mastodon"
    }
  }
}
  • Content: 
    .social-media-list {
  @include reset-list-nav;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  li {
    margin: 0 $spacer 0 0;

    a {
      &::before {
        @include font-awesome-brand;
        color: $lehigh_brown;
        color: var(--lehigh_brown, $lehigh_brown);
        font-size: 2rem;
        @include transition;

        .color-scheme-dark & {
          color: $lehigh_brown_darkmode;
          color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
        }
      }

      &:hover {
        &::before {
          color: $accent_color;
        }
      }
    }
  }
}
  • URL: /components/raw/socials/socials.scss
  • Filesystem Path: bits/04-components/org_unit_and_services/socials/socials.scss
  • Size: 602 Bytes

Display the Org Unit - Social Media.