Component Library

Share 

<!-- AddToAny BEGIN -->
<div class="share">
    <div class="share__title">Share This Story</div>
    <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
        <a class="a2a_button_twitter">
      <span class="visible-for-screen-readers">Twitter</span>
      <i class="fa-brands fa-twitter" aria-hidden="true"></i>
    </a>
        <a class="a2a_button_facebook">
      <span class="visible-for-screen-readers">Facebook</span>
      <i class="fa-brands fa-facebook" aria-hidden="true"></i>
    </a>
        <a class="a2a_button_linkedin">
      <i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
      <span class="visible-for-screen-readers">LinkedIn</span>
    </a>
    </div>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
 
<!-- AddToAny BEGIN -->
<div class="share">
  <div class="share__title">Share This Story</div>
  <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <a class="a2a_button_twitter">
      <span class="visible-for-screen-readers">Twitter</span>
      <i class="fa-brands fa-twitter" aria-hidden="true"></i>
    </a>
    <a class="a2a_button_facebook">
      <span class="visible-for-screen-readers">Facebook</span>
      <i class="fa-brands fa-facebook" aria-hidden="true"></i>
    </a>
    <a class="a2a_button_linkedin">
      <i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
      <span class="visible-for-screen-readers">LinkedIn</span>
    </a>
  </div>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
 
/* No context defined for this component. */
  • Content: 
    .share {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: rem(20);
  padding-block: rem(40);
  border-bottom: rem(1) solid $off-white;
  margin-bottom: rem(40);

  .a2a_kit {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: rem(10);

    a {
      border: rem(2) solid $iastate-maroon;
      border-radius: 50%;
      width: rem(52);
      height: rem(52);
      display: flex;
      align-items: center;
      justify-content: center;
      color: $white;
      transition: 0.3s background-color ease-in-out;
      &:hover {
        background-color: $iastate-maroon;
        svg {
          color: $white;
        }
      }
      svg {
        color: $iastate-maroon;
        font-size: rem(25);
        transition: 0.3s color ease-in-out;
      }
    }
  }
}

.share__title {
  font-family: $typeface-sans-serif;
  color: $grey;
  font-weight: 700;
  font-size: rem(21);
  line-height: (25 / 21);
}
  • URL: /components/raw/share/_share.scss
  • Filesystem Path: src/components/share/_share.scss
  • Size: 968 Bytes

There are no notes for this item.