FAA Pattern Library - Network

Student Card 

<div class="student-card student-card--light student-card--network">
    <div class="student-card__image">
        <figure class="captioned-image">
            <img class="captioned-image__image" src="https://picsum.photos/300/300" alt="placeholder" width="208" height="228">
        </figure>

    </div>
    <div class="student-card__text-container">
        <div class="student-card__name student-card__name--light">
            <h2 class="linked-title linked-title--network linked-title--light">
                <a href="#" class="
            linked-title__link linked-title__link--light
             linked-title__link--large
    ">
        Sergio Andres Contreras Pinto<span class="linked-title__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
    </a>
            </h2>
        </div>
        <div class="student-card__hometown student-card__hometown--light">from Vicuna, Chile</div>
        <div class="student-card__degree student-card__degree--light">Bachelor of Arts in Urban Studies and Planning</div>
        <div class="student-card__degree student-card__degree--light">Minor in Urban Studies and Planning</div>
    </div>

</div>
 
{% import "bits/macros/imageSource.twig" as imageMacros %}

<div class="student-card student-card--{{ background }} student-card--{{ siteUnit }}">
    {% if card.image %}
        <div class="student-card__image">
            {{ imageMacros.create(card.image, 208, 228, background) }}
        </div>
    {% endif %}
        <div class="student-card__text-container">
            <div class="student-card__name student-card__name--{{ background }}">
                {% include 'bits/linked-title/linked-title.twig' with {
                    text: card.name,
                    url: card.url,
                    large: true
                }%}
            </div>
            {% if card.hometown %}
                <div class="student-card__hometown student-card__hometown--{{ background }}">from {{ card.hometown }}</div>
            {% endif %}
            {% for degree in card.degrees %}
                <div class="student-card__degree student-card__degree--{{ background }}">{{ degree }}</div>
            {% endfor %}
        </div>

</div>
 
{
  "siteUnit": "network",
  "departmentName": "Network",
  "background": "light",
  "card": {
    "name": "Sergio Andres Contreras Pinto",
    "url": "#",
    "hometown": "Vicuna, Chile",
    "degrees": [
      "Bachelor of Arts in Urban Studies and Planning",
      "Minor in Urban Studies and Planning"
    ],
    "image": {
      "src": "https://picsum.photos/300/300",
      "altText": "placeholder"
    }
  }
}
  • Content: 
    .student-card
    background-color cloud
    display flex
    flex-direction column
    padding 24px

    +above(mediumDeviceBreakpoint)
        flex-direction row

    &--dark
        background-color charcoalLighter

    &__image
        margin-bottom 16px
        height 228px
        min-width 208px
        max-width 208px

        +above(mediumDeviceBreakpoint)
            position relative
            left -24px

    &__text-container
        display flex
        flex-direction column
        justify-content center

    &__name
        margin-bottom 8px
        +above(mediumDeviceBreakpoint)
            margin-bottom 16px

    &__hometown
        @extends $headline3
        margin-bottom 4px

    &__degree
        @extends $secondaryParagraph
  • URL: /components/raw/student-card/student-card.styl
  • Filesystem Path: components/partials/student-card/student-card.styl
  • Size: 758 Bytes

There are no notes for this item.