College of Business Style Guide

Magazine Section 

<section class="magazines">
    <div class="magazine_section">
        <div class="hover_box_image">
            <div class="hover-box zoom no_text">
                <div class="hover-box-image">
                    <img src="/images/Faculty.png" alt="" />
                </div>
                <div class="hover-box-color_overlay blue"></div>
            </div><!-- end hover-box -->
        </div><!-- end hover_box_image -->
        <div class="magazine_text">
            <h3><a href="https://lehigh.edu">Story Headline</a></h3>
            <p>Descripton of the story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl turpis, ornare quis dictum sed, ullamcorper eget justo. Quisque pharetra varius tortor.</p>
        </div><!-- end magazine_text -->
    </div><!-- end magazine_section -->
    <div class="magazine_section">
        <div class="hover_box_image">
            <div class="hover-box zoom no_text">
                <div class="hover-box-image">
                    <img src="/images/Faculty.png" alt="" />
                </div>
                <div class="hover-box-color_overlay gold"></div>
            </div><!-- end hover-box -->
        </div><!-- end hover_box_image -->
        <div class="magazine_text">
            <h3><a href="https://lehighsports.com">Story Headline</a></h3>
            <p>Descripton of the story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl turpis, ornare quis dictum sed, ullamcorper eget justo. Quisque pharetra varius tortor.</p>
        </div><!-- end magazine_text -->
    </div><!-- end magazine_section -->
</section>
 
<section class="magazines">
  {% for story in storys %}
  <div class="magazine_section">
    <div class="hover_box_image">
      {% include "@hover_box--no_text" with {
        color: story.color,
        img_src: story.img_src
      } %}
    </div><!-- end hover_box_image -->
    <div class="magazine_text">
      <h3><a href="{{ story.url }}">{{ story.headline }}</a></h3>
      <p>{{ story.descripton }}</p>
    </div><!-- end magazine_text -->
  </div><!-- end magazine_section -->
  {% endfor %}
</section>
 
{
  "storys": {
    "1": {
      "color": "blue",
      "img_src": "/images/Faculty.png",
      "url": "https://lehigh.edu",
      "headline": "Story Headline",
      "descripton": "Descripton of the story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl turpis, ornare quis dictum sed, ullamcorper eget justo. Quisque pharetra varius tortor."
    },
    "2": {
      "color": "gold",
      "img_src": "/images/Faculty.png",
      "url": "https://lehighsports.com",
      "headline": "Story Headline",
      "descripton": "Descripton of the story. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl turpis, ornare quis dictum sed, ullamcorper eget justo. Quisque pharetra varius tortor."
    }
  }
}
  • Content: 
    .magazine_section {
  display: flex;
  flex-direction: column;
  margin: 0 0 $space-double 0;

  @media screen and (min-width: $break-desktop) {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .hover_box_image {
    margin: 0 0 $space 0;
    width: 140px;
    
    @media screen and (min-width: $break-desktop) {
      margin: 0 $space-one-half 0 0;
    }
  }

  .magazine_text {
    h3 {
      a {
        color: $grey_darkest;
        text-decoration: underline;

        &:hover,
        &:focus {
          text-decoration: none;
        }
      }
    }
  }
}

.magazine-listing-item {
  display: flex;
  flex-direction: column;
  margin: 0 0 $space-double 0;

  @media screen and (min-width: $break-desktop) {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .magazine-listing-item--cover {
    max-width: 140px;
    margin-right: 1em;
  }

  .magazine-listing-item--title {
    align-self: center;
  }
}
  • URL: /components/raw/magazine_section/magazine_section.scss
  • Filesystem Path: components/03-sections/28-magazine_section/magazine_section.scss
  • Size: 980 Bytes

No notes defined.