College of Business Style Guide

Profile Vertical List 

<div class="profile-small">
    <img src="/images/profile_default.png" alt="John Smith headshot" />
    <div class="profile-details">
        <h4>John Smith</h4>
        <p>Universe Protection Unit<br />
            555-555-5555</p>
    </div>
</div><!-- profile-small -->
 
<div class="profile-small">
    <img src="{{ img_src }}" alt="{{ img_alt }}" />
    <div class="profile-details">
        <h4>{{ name }}</h4>
        <p>{{ department }}<br />
        {{ phone }}</p>
    </div>
</div><!-- profile-small -->
 
{
  "img_src": "/images/profile_default.png",
  "img_alt": "John Smith headshot",
  "name": "John Smith",
  "department": "Universe Protection Unit",
  "phone": "555-555-5555"
}
  • Content: 
    .profile-small {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;

  img {
    max-height: 110px;
    max-width: 110px;
    border-radius: 110px;
    margin: 0 $space 0 0;
  }

  h4 {
    font-size: 1rem;
    color: $grey_dark;
    font-weight: bold;
    margin: 0;
  }
}
  • URL: /components/raw/vert_list/vert_list.scss
  • Filesystem Path: components/02-pieces/13-profile/03-vert_list/vert_list.scss
  • Size: 311 Bytes

No notes defined.