<section class="media-section " role="region" aria-label=" section">
    <div class="media-box">
        <div class="media-box-image">
            <img src="/images/Hulvat-2017-2.png" alt="" />
        </div>
        <div class="media-box-text gold">
            <div class="media-box-content blog--podcast">
                <h2><a href="#">What You Need to Know About the New Tax Law</a></h2>
                <p class="tags">Tags:
                    <a href="#">Taxes</a>
                </p>
            </div>
        </div><!-- end media-box-text -->
    </div><!-- end media-box -->
    <div class="media-box">
        <div class="media-box-image">
            <img src="/images/Hulvat-2017-2.png" alt="" />
        </div>
        <div class="media-box-text brown">
            <div class="media-box-content blog--videos">
                <h2><a href="#">Leadership Insight with Mr. Joseph Perella</a></h2>
                <p class="tags">Tags:
                    <a href="#">Leadership</a>
                </p>
            </div>
        </div><!-- end media-box-text -->
    </div><!-- end media-box -->
    <div class="media-box">
        <div class="media-box-image">
            <img src="/images/Hulvat-2017-2.png" alt="" />
        </div>
        <div class="media-box-text teal">
            <div class="media-box-content blog--podcast">
                <h2><a href="#">In Marketing, is Co-creation a Double-edged Sword?</a></h2>
                <p class="tags">Tags:
                    <a href="#">Branding</a>
                    <a href="#">Co-creation</a>
                    <a href="#">Consumers</a>
                </p>
            </div>
        </div><!-- end media-box-text -->
    </div><!-- end media-box -->
    <div class="media-box">
        <div class="media-box-image">
            <img src="/images/Hulvat-2017-2.png" alt="" />
        </div>
        <div class="media-box-text blue">
            <div class="media-box-content blog--videos">
                <h2><a href="#">Sanjay Shah on the Importance of Vision and Execution</a></h2>
                <p class="tags">Tags:
                    <a href="#">Leadership</a>
                    <a href="#">Vision</a>
                </p>
            </div>
        </div><!-- end media-box-text -->
    </div><!-- end media-box -->
    <div class="media-box">
        <div class="media-box-image">
            <img src="/images/Hulvat-2017-2.png" alt="" />
        </div>
        <div class="media-box-text gold">
            <div class="media-box-content blog--article">
                <h2><a href="#">Change Begins with Action: Go</a></h2>
            </div>
        </div><!-- end media-box-text -->
    </div><!-- end media-box -->
    <div class="media-box">
        <div class="media-box-image">
            <img src="/images/Hulvat-2017-2.png" alt="" />
        </div>
        <div class="media-box-text brown">
            <div class="media-box-content blog--podcast">
                <h2><a href="#">Thwarting Distance Bias in Your Virtual Team</a></h2>
                <p class="tags">Tags:
                    <a href="#">Distributed Teams</a>
                    <a href="#">Remote Work</a>
                    <a href="#">Virtual Work</a>
                    <a href="#">Work From Home</a>
                </p>
            </div>
        </div><!-- end media-box-text -->
    </div><!-- end media-box -->
    <p class="view-all">
        <a href="#">View All</a>
    </p>
</section>
<section class="media-section {{ shell_page ? 'shell' }}" role="region" aria-label="{{ heading }} section">
  {% block cms_override_items %}
    {% for media_item in media_items %}
      {% block cms_override_item %}
        {% include "@media_box" with {
            img_src: media_item.img_src,
            media_type: media_item.media_type,
            box_url: media_item.box_url,
            title: media_item.title,
            color: media_item.color,
            tags: media_item.tags
        } %}
      {% endblock cms_override_item %}
    {% endfor %}
  {% endblock cms_override_items %}
  {% if not shell_page %}
    <p class="view-all">
      {% block cms_override_link %}
        <a href="#">View All</a>
      {% endblock cms_override_link %}
    </p>
  {% endif %}
</section>
{
  "media_items": {
    "1": {
      "img_src": "/images/Hulvat-2017-2.png",
      "media_type": "podcast",
      "box_url": "#",
      "title": "What You Need to Know About the New Tax Law",
      "color": "gold",
      "tags": {
        "1": {
          "tag_name": "Taxes",
          "url": "#"
        }
      }
    },
    "2": {
      "img_src": "/images/Hulvat-2017-2.png",
      "media_type": "videos",
      "box_url": "#",
      "title": "Leadership Insight with Mr. Joseph Perella",
      "color": "brown",
      "tags": {
        "1": {
          "tag_name": "Leadership",
          "url": "#"
        }
      }
    },
    "3": {
      "img_src": "/images/Hulvat-2017-2.png",
      "media_type": "podcast",
      "box_url": "#",
      "title": "In Marketing, is Co-creation a Double-edged Sword?",
      "color": "teal",
      "tags": {
        "1": {
          "tag_name": "Branding",
          "url": "#"
        },
        "2": {
          "tag_name": "Co-creation",
          "url": "#"
        },
        "3": {
          "tag_name": "Consumers",
          "url": "#"
        }
      }
    },
    "4": {
      "img_src": "/images/Hulvat-2017-2.png",
      "media_type": "videos",
      "box_url": "#",
      "title": "Sanjay Shah on the Importance of Vision and Execution",
      "color": "blue",
      "tags": {
        "1": {
          "tag_name": "Leadership",
          "url": "#"
        },
        "2": {
          "tag_name": "Vision",
          "url": "#"
        }
      }
    },
    "5": {
      "img_src": "/images/Hulvat-2017-2.png",
      "media_type": "article",
      "box_url": "#",
      "title": "Change Begins with Action: Go",
      "color": "gold"
    },
    "6": {
      "img_src": "/images/Hulvat-2017-2.png",
      "media_type": "podcast",
      "box_url": "#",
      "title": "Thwarting Distance Bias in Your Virtual Team",
      "color": "brown",
      "tags": {
        "1": {
          "tag_name": "Distributed Teams",
          "url": "#"
        },
        "2": {
          "tag_name": "Remote Work",
          "url": "#"
        },
        "3": {
          "tag_name": "Virtual Work",
          "url": "#"
        },
        "4": {
          "tag_name": "Work From Home",
          "url": "#"
        }
      }
    }
  }
}
  • Content:
    .media-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-bottom: 1px solid $grey_light;
    
      @media only screen and (min-width: $break-tablet) {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border: 0;
      }
    
      @media only screen and (min-width: $break-desktop) {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border: 0;
      }
    
      .view-all {
        margin: $space-double 0;
    
        a {
          color: $grey_darkest;
          padding: 0 $space $space-one-half $space;
          background-image: linear-gradient($teal, $teal);
          background-size: 0 1px, auto;
          background-repeat: no-repeat;
          background-position: center bottom;
          transition: all .2s ease-out;
    
          &:hover,
          &:focus {
            text-decoration: none;
            background-size: 100% 1px, auto;
          }
        }
      }
    }
    
  • URL: /components/raw/media_section/media_section.scss
  • Filesystem Path: components/03-sections/13-media_section/media_section.scss
  • Size: 880 Bytes

No notes defined.