Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Social Media 

<div class=" social-media ">

    <ul class="social-media__list list -social-icons">
        <li class="list__item"><a href="#"><i class='icon -facebook'></i></a>
        </li>
        <li class="list__item"><a href="#"><i class='icon -twitter'></i></a>
        </li>
        <li class="list__item"><a href="#"><i class='icon -linkedin'></i></a>
        </li>
        <li class="list__item"><a href="#"><i class='icon -google'></i></a>
        </li>
        <li class="list__item"><a href="#"><i class='icon -xing'></i></a>
        </li>
        <li class="list__item"><a href="#"><i class='icon -youtube'></i></a>
        </li>
        <li class="list__item"><a href="#"><i class='icon -instagram'></i></a>
        </li>
        <li class="list__item"><a href="#"><i class='icon -pinterest'></i></a>
        </li>
    </ul>

    <ul class="social-media__list list -social-buttons">
        <li class="list__item"><a href="#"><img src="/images/app-store.png"></a>
        </li>
        <li class="list__item"><a href="#"><img src="/images/google-play.png"></a>
        </li>
    </ul>
</div>
 
<div class="{{mixes}} social-media {{modifiers}}">
  {{render '@atoms-list' social-media-links}}
  {{render '@atoms-list' social-media-buttons}}
</div>
 
{
  "social-media-links": {
    "tag": "ul",
    "mixes": "social-media__list",
    "modifiers": "-social-icons",
    "items": [
      {
        "text": "<a href=\"#\"><i class='icon -facebook'></i></a>"
      },
      {
        "text": "<a href=\"#\"><i class='icon -twitter'></i></a>"
      },
      {
        "text": "<a href=\"#\"><i class='icon -linkedin'></i></a>"
      },
      {
        "text": "<a href=\"#\"><i class='icon -google'></i></a>"
      },
      {
        "text": "<a href=\"#\"><i class='icon -xing'></i></a>"
      },
      {
        "text": "<a href=\"#\"><i class='icon -youtube'></i></a>"
      },
      {
        "text": "<a href=\"#\"><i class='icon -instagram'></i></a>"
      },
      {
        "text": "<a href=\"#\"><i class='icon -pinterest'></i></a>"
      }
    ]
  },
  "social-media-buttons": {
    "tag": "ul",
    "mixes": "social-media__list",
    "modifiers": "-social-buttons",
    "items": [
      {
        "text": "<a href=\"#\"><img src=\"/images/app-store.png\"></a>"
      },
      {
        "text": "<a href=\"#\"><img src=\"/images/google-play.png\"></a>"
      }
    ]
  }
}
  • Content: 
    .social-media {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
  font-size: 4rem;

  &__list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;

    .list__item {
      display: block;
    }

    a {
      display: block;
      height: 5rem;
      padding: 0.5rem;

      .icon {
        color: inherit;
      }
    }

    &.-social-icons {
      a {
        background-image: radial-gradient(circle closest-side, $black 67%, transparent 70%);
        color: $white;

        &:hover,
        &:active {
          /* stylelint-disable-next-line declaration-no-important */
          background-image: none !important;
          color: $black;
        }
      }
    }

    &.-social-buttons {
      // placeholder
    }
  }
}
  • URL: /components/raw/molecules-social-media/_social-media.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/92-social-media/_social-media.scss
  • Size: 746 Bytes

There are no notes for this item.