Lehigh Clutch Style Guide

Section footer 

<h2>Section Name</h2>
<address>
    Building C<br /> 113 Research Drive<br /> Lehigh Mountaintop Campus<br /> Bethlehem, PA 18015
</address>
<div class="group_contact">
    <div class="group_contact_item">
        <i class="fas fa-phone"></i><span class="sr-only">phone number</span> 610-758-3065
    </div>
    <div class="group_contact_item">
        <i class="fas fa-fax"></i><span class="sr-only">fax number</span> 610-758-3066
    </div>
    <div class="group_contact_item">
        <i class="fas fa-envelope"></i><span class="sr-only">email address</span> engineering@lehigh.edu
    </div>
</div>
<ul class="department-social-media">

    <li>
        <a href="https://twitter.com/lehighu">
            <i class="fab fa-twitter"></i>
            <span class="sr-only">Like us on Twitter</span>
        </a>
    </li>
    <li>
        <a href="https://www.facebook.com/lehighu">
            <i class="fab fa-facebook-f"></i>
            <span class="sr-only">Like us on Facebook</span>
        </a>
    </li>
    <li>
        <a href="https://www.linkedin.com/school/lehigh-college-of-business/">
            <i class="fab fa-linkedin"></i>
            <span class="sr-only">Like us on LinkedIn</span>
        </a>
    </li>
    <li>
        <a href="https://www.youtube.com/user/lehighuofficial">
            <i class="fab fa-youtube"></i>
            <span class="sr-only">Like us on YouTube</span>
        </a>
    </li>
</ul>
 
<h2>{{ group_name }}</h2>
<address>
  {{ group_address }}
</address>
<div class="group_contact">
  {% if group_phone %}
    <div class="group_contact_item">
      <i class="fas fa-phone"></i><span class="sr-only">phone number</span> {{ group_phone }}
    </div>
  {% endif %}
  {% if group_fax %}
    <div class="group_contact_item">
      <i class="fas fa-fax"></i><span class="sr-only">fax number</span> {{ group_fax }}
    </div>
  {% endif %}
  {% if group_email %}
    <div class="group_contact_item">
      <i class="fas fa-envelope"></i><span class="sr-only">email address</span> {{ group_email }}
    </div>
  {% endif %}
</div>
<ul class="department-social-media">
      {# Embed the social media data here instead of Fractal
            context so that the CMS doesn't need to duplicate it. #}
      {% for fa_icon in department_social %}
        <li>
          <a href="{{ fa_icon.link }}">
            <i class="{{ fa_icon.class }}"></i>
            <span class="sr-only">Like us on {{ fa_icon.name }}</span>
          </a>
        </li>
      {% endfor %}
    </ul>
 
{
  "group_name": "Section Name",
  "group_address": "Building C<br /> 113 Research Drive<br /> Lehigh Mountaintop Campus<br /> Bethlehem, PA 18015",
  "group_phone": "610-758-3065",
  "group_fax": "610-758-3066",
  "group_email": "engineering@lehigh.edu",
  "department_social": [
    {
      "name": "Twitter",
      "class": "fab fa-twitter",
      "link": "https://twitter.com/lehighu"
    },
    {
      "name": "Facebook",
      "class": "fab fa-facebook-f",
      "link": "https://www.facebook.com/lehighu"
    },
    {
      "name": "LinkedIn",
      "class": "fab fa-linkedin",
      "link": "https://www.linkedin.com/school/lehigh-college-of-business/"
    },
    {
      "name": "YouTube",
      "class": "fab fa-youtube",
      "link": "https://www.youtube.com/user/lehighuofficial"
    }
  ]
}
  • Content: 
    .department-social-media {
  @include reset-list-nav;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  li {
    margin: 0 $space_one_half;

    a {
      color: $lehigh_brown;
      border-bottom: 0;
      font-size: 2rem;

      &:hover {
        color: $accent_color;
      }
    }
  }
}
  • URL: /components/raw/section_footer/section_footer.scss
  • Filesystem Path: bits/04-components/_footer_pieces/section_footer/section_footer.scss
  • Size: 303 Bytes

No notes defined.