College of Business Style Guide

Grey Sidebar Profile 

<div class="sidebar-profile">
    <h1>John Smith</h1>
    <h2>Space Ranger</h2>
    <div class="main-profile">
        <div class="az-profile">
            <div class="az-profile-image">
                <a href="">
                    <img src="/images/headshot@2x.png" alt=" headshot" />
                </a>
            </div>
            <div class="az-profile-info">
                <p>
                    Nasa<br /> <a href="mailto:jsmith@lehigh.edu">jsmith@lehigh.edu</a><br /> <a href="tel:+1-123-456-7890">123-456-7890</a> </p>
            </div><!-- end az-profile-info -->
        </div><!-- az-profile -->

        <div class="profile-details">
            <h3>Courses Taught</h3>
            <ul class="courses">
                <li>Financial Accounting</li>
                <li>Auditing</li>
                <li>Forensic and Investigative Accounting</li>
            </ul>
        </div>
    </div>
    <p class="cta">
        <a href="#" class="button dark-grey" role="button">Curriculum Vitae</a>
    </p>
</div><!-- end sidebar-profile -->
 
<div class="sidebar-profile">
    <h1>{{ employee_name }}</h1>
    {% if title|remove_html_comments_as_string|trim %}
        <h2>{{ title }}</h2>
    {% endif %}
    <div class="main-profile">
        {% block az_index %}
            {% include az_index ?: "@az_index" with {
                img_src: az.img_src,
                department: az.department,
                email: az.email,
                phone: az.phone
            } %}
        {% endblock az_index %}
        {# In the CMS context, "courses" is a string. In Fractal, "courses"
        is an array, but somehow the JavaScript Twig implementation doesn't
        care that we call "|trim" on an array, so let's roll with it. #}
        {% if courses|remove_html_comments_as_string|trim %}
            <div class="profile-details">
                <h3>Courses Taught</h3>
                <ul class="courses">
                    {% block cms_override_courses %}
                        {% for course in courses %}
                            <li>{{ course.course_title }}</li>
                        {% endfor %}
                    {% endblock cms_override_courses %}
                </ul>
            </div>
        {% endif %}
    </div>
    {% block links %}{% endblock links %}
    <p class="cta">
      {% block cms_override_cv %}
        {% include button.pattern ?: "@buttons--a-tag" with {
            text: button.text ?: 'Curriculum Vitae'|t,
            url: button.url,
            color: button.color ?: 'dark-grey',
        } %}
      {% endblock cms_override_cv %}
    </p>
</div><!-- end sidebar-profile -->
 
{
  "employee_name": "John Smith",
  "title": "Space Ranger",
  "az": {
    "img_src": "/images/headshot@2x.png",
    "department": "Nasa",
    "email": "jsmith@lehigh.edu",
    "phone": "123-456-7890"
  },
  "courses": [
    {
      "course_title": "Financial Accounting"
    },
    {
      "course_title": "Auditing"
    },
    {
      "course_title": "Forensic and Investigative Accounting"
    }
  ],
  "button": {
    "url": "#"
  }
}
  • Content: 
    .sidebar-profile {
  color: $black;

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

  h2 {
    color: $lehigh-brown;
    font-weight: bold;
  }

  .main-profile {
    @media only screen and (min-width: $break-tablet) {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
      margin: $space-double 0;
    }

    @media only screen and (min-width: $break-desktop) {
      display: block;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
      margin: $space-double 0;
    }

    .az-profile {
      margin: $space-double 0;

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

      @media only screen and (min-width: $break-desktop) {
        margin: $space-double 0;
        width: 100%;
      }
    }

    h3 {
      font-size: 1rem;
      font-weight: bold;
    }

    .courses {
      @include reset-list-nav;
    }
  }

  .cta {
    margin: $space-double 0 0 0;

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

    .button {
      width: 100%;
      background-color: $grey_dark;
      color: $white;

      @media only screen and (min-width: $break-tablet) {
        width: 40%;
      }

      @media only screen and (min-width: $break-desktop) {
        width: 100%;
      }

      &:hover {
        color: $grey_dark;
        background-color: $white;
      }
    }
  }
  .profile-links {
    a {
      display: block;
    }
  }
}
  • URL: /components/raw/sidebar_profile/sidebar_profile.scss
  • Filesystem Path: components/02-pieces/13-profile/02-sidebar_profile/sidebar_profile.scss
  • Size: 1.6 KB

No notes defined.