<div class="person-brief ">
    <span class="person-brief__name">Name McNameface</span>
    <span class="person-brief__detail">
        Title of Person    </span>
    <span class="person-brief__detail">
        Another Title    </span>
    <span class="person-brief__detail">
        <a href="mailto:email@davidson.edu"  class="">email@davidson.edu</a>    </span>
    <span class="person-brief__detail">
        (704) 123-4567    </span>
</div>
{% if person_brief is not empty %}
<div class="person-brief {{ person_brief.variant }}">
    <span class="person-brief__name">{{ person_brief.person_name }}</span>
    {% for item in person_brief.details %}
    <span class="person-brief__detail">
        {% include '@optional-link' with { optional_link: item } %}
    </span>
    {% endfor %}
</div>
{% endif %}
{
  "person_brief": {
    "person_name": "Name McNameface",
    "details": [
      "Title of Person",
      "Another Title",
      {
        "title": "email@davidson.edu",
        "url": "mailto:email@davidson.edu"
      },
      "(704) 123-4567"
    ]
  }
}
  • Content:
    .person-brief {
        margin-bottom: rr-gridbase(3);
        a {
            @include underline-link;
        }
    
        span {
            display: block;
            margin-bottom: rr-gridbase(1);
            @include rr-break-directive(m) {
                display: inline;
                &:before {
                    content: '';
                    display: inline-block;
                    vertical-align: middle;
                    width: rem(1px);
                    height: 1em;
                    background: color(gray-light);
                    margin: 0 rr-gridbase(1);
                }
                &:nth-child(2),
                &.person-brief__name {
                    &:before {
                        display: none;
                    }
                }
            }
        }
    
        span.person-brief__name {
            font-family: $font-rubik;
            font-weight: $rubik-heavier-weight;
            @include rr-font-compute(l, medium);
            @include rr-break-directive(m) {
                margin-right: rr-gridbase(1);
            }
        }
    }
  • URL: /components/raw/person-brief/person-brief.scss
  • Filesystem Path: patterns/molecules/text/person-brief/person-brief.scss
  • Size: 966 Bytes

There are no notes for this item.