<div class="person-teaser ">
    <div class="person-teaser__content">
        <h3 class="headline-group person-teaser__name">

            <span class="headline-group__head"><a href="http://example.com"  class="">Name McNameface</a></span>

        </h3>

        <div class="person-teaser__info">
            <ul class="person-teaser__titles">
                <li>Director of Example Departments</li>
            </ul>
        </div>
        <div class="person-teaser__contact">
            <p><a href="#">email@davidson.edu</a></p>
            <p>704-123-4567</p>
            <dl class="inline-terms">
                <dt>Office</dt>
                <dd>Wall 327</dd>
                <dt>Research Lab</dt>
                <dd>Wall 325/325A</dd>
            </dl>
        </div>
    </div>
</div>
{% if person_teaser is not empty %}
<div class="person-teaser {{ person_teaser.variant }}">
    <div class="person-teaser__content">
        {% include '@headline-group' with { hg: {
            headline: {
                title: person_teaser.person_name,
                url: 'http://example.com'
            },
            variant: 'person-teaser__name',
            tag: 'h3' 
        } } %}
        <div class="person-teaser__info">
            {% if person_teaser.titles is not empty %}
            <ul class="person-teaser__titles">
                {% for title in person_teaser.titles %}
                <li>{{ title }}</li>
                {% endfor %}
            </ul>
            {% endif %}
            {% if person_teaser.list is not empty %}
                {% include '@headline-group' with { hg: person_teaser.list_headline } %}
                <ul class="person-teaser__list">
                    {% for item in person_teaser.list %}
                    <li>{{ item }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
        <div class="person-teaser__contact">
            <p><a href="#">email@davidson.edu</a></p>
            <p>704-123-4567</p>
            <dl class="inline-terms">
                <dt>Office</dt>
                <dd>Wall 327</dd>
                <dt>Research Lab</dt>
                <dd>Wall 325/325A</dd>
            </dl>
        </div>
    </div>
    {% if person_teaser.image %}
        <div class="person-teaser__image">
            {% include '@image' with { image: person_teaser.image } %}
        </div>
    {% endif %}
</div>
{% endif %}
{
  "person_teaser": {
    "person_name": "Name McNameface",
    "titles": [
      "Director of Example Departments"
    ],
    "image": null
  }
}
  • Content:
    .person-teaser {
        .headline-group.person-teaser__name {
            .headline-group__head {
                @include rr-font-compute(xl, tight);
                a {
                    @include link-fancy;
                    background-image: none;
                }
            }
        }
        .person-teaser__content {
            margin-bottom: rr-gridbase(4);
            a {
                @include underline-link;
            }
            ul.person-teaser__titles {
                @include clean;
                margin-bottom: rr-gridbase(3);
                li {
                    @include rr-font-compute(l, medium);
                    line-height: 1.6em;
                    margin-bottom: rr-gridbase(2);
                }
            }
            .headline-group.person-teaser__list-headline {
                .headline-group__head {
                    @include rr-font-compute(r, tight);
                    font-weight: bold;
                }
            }
        }
        
        ul.person-teaser__list {
            li {
                line-height: rr-gridbase(2);
                margin-bottom: rr-gridbase(1);
            }
        }
    
        @include rr-break-directive(m) {
            display: flex;
            .person-teaser__content {
                flex: 0 1 82%;
                display: flex;
                justify-content: space-between;
                align-content: flex-start;
                flex-flow: row wrap;
                .headline-group {
                    flex: 0 1 100%;
                }
                .person-teaser__info,
                .person-teaser__contact {
                    flex: 0 1 47%;
                }
            }
            .person-teaser__image {
                flex: 0 1 18%;
                margin-left: rr-gridbase(4);
                margin-bottom: rr-gridbase(4);
            }
        }
    }
  • URL: /components/raw/person-teaser/person-teaser.scss
  • Filesystem Path: patterns/molecules/blocks/person-teaser/person-teaser.scss
  • Size: 1.7 KB

There are no notes for this item.