College of Business Style Guide

Podcast Buttons 

<div class="podcast-buttons center">
    <p>Subscribe to our podcast to hear thoughtful perspectives on the business of business.</p>
    <ul class="share-buttons">
        <li>
            <a href="https://itunes.apple.com/us/podcast/lehigh-university-business-blog-spoken-edition/id1290369542">
                <img src="/images/apple_podcast@2x.png" alt="Listen on Apple Podcasts" />
            </a>
        </li>
        <li>
            <a href="https://play.google.com/music/listen#/ps/Imtxnhtq7exigdirjngza6z56vq">
                <img src="/images/google_podcasts_badge8x@2x.png" alt="Listen on Google Podcasts" />
            </a>
        </li>
    </ul>
</div><!-- podcast-buttons -->
 
<div class="podcast-buttons {{ position }}">
  <p>{{ 'Subscribe to our podcast to hear thoughtful perspectives on the business of business.'|t }}</p>
  <ul class="share-buttons">
    {% for button in [
        {
          url: 'https://itunes.apple.com/us/podcast/lehigh-university-business-blog-spoken-edition/id1290369542',
          img_src: 'apple_podcast@2x.png',
          img_alt: 'Listen on Apple Podcasts',
        },
        {
          url: 'https://play.google.com/music/listen#/ps/Imtxnhtq7exigdirjngza6z56vq',
          img_src: 'google_podcasts_badge8x@2x.png',
          img_alt: 'Listen on Google Podcasts',
        },
      ]
    %}
      <li>
        <a href="{{ button.url }}">
          <img src="{{ images ~ '/' ~ button.img_src }}" alt="{{ button.img_alt }}" />
        </a>
      </li>
    {% endfor %}
  </ul>
</div><!-- podcast-buttons -->
 
{
  "position": "center",
  "images": "/images"
}
  • Content: 
    .podcast-buttons {
  color: $grey_k60;
  margin: $space-triple 0;

  .share-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    @include reset-list-nav;

    @media only screen and (min-width: $break-tablet) {
      justify-content: center;
    }

    li {
      @media only screen and (min-width: $break-tablet) {
        margin: 0 $space $space 0;
      }

      &:first-of-type {
        margin: 0 $space 0 0;

        @media only screen and (min-width: $break-tablet) {
          margin: 0 $space $space 0;
        }
       }

      img {
        width: 200px;
      }
    }
  }

  &.center {
    text-align: center;
    
    p {
      &:first-of-type {
        text-align: center;
      }
    }

    .share-buttons {
      justify-content: center;
    }
  }

  &.right {
    text-align: left;
    margin: $space-double 0 0 0;

    @media only screen and (min-width: $break-tablet) {
      text-align: center;
    }
    
    @media only screen and (min-width: $break-desktop) {
      width: calc(100% * 1 / 3);
      float: right;
    }
  }
}
  • URL: /components/raw/podcast_buttons/podcast_buttons.scss
  • Filesystem Path: components/03-sections/19-podcast_buttons/podcast_buttons.scss
  • Size: 1.1 KB

No notes defined.