FAA Pattern Library - Landscape Architecture

Alumni 

<div class="landarch-alumni">
    <div class="landarch-alumni__wrapper">
        <div class="landarch-alumni__container">
            <h2 class="landarch-alumni__heading">Alumni</h2>
            <p class="landarch-alumni__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.</p>
            <div class="landarch-alumni__alumni">
                <a href="#" class="landarch-alumni__alum">
                    <div class="landarch-alumni__image-wrap">
                        <img src="https://picsum.photos/332/480?random=1" alt="alt" class="landarch-alumni__image" width="332" height="480">
                    </div>
                    <div class="landarch-alumni__name">
                        Walter J. Hood
                        <span class="landarch-alumni__icon"><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>
                    </div>
                    <div class="landarch-alumni__current-job-title">Landscape Architect</div>
                    <div class="landarch-alumni__grad-class">PhD '91</div>
                </a>
                <a href="#" class="landarch-alumni__alum">
                    <div class="landarch-alumni__image-wrap">
                        <img src="https://picsum.photos/332/480?random=2" alt="alt" class="landarch-alumni__image" width="332" height="480">
                    </div>
                    <div class="landarch-alumni__name">
                        Hanna Lubin
                        <span class="landarch-alumni__icon"><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>
                    </div>
                    <div class="landarch-alumni__current-job-title">Landscape Architect</div>
                    <div class="landarch-alumni__grad-class">MFA '17</div>
                </a>
                <a href="#" class="landarch-alumni__alum">
                    <div class="landarch-alumni__image-wrap">
                        <img src="https://picsum.photos/332/480?random=3" alt="alt" class="landarch-alumni__image" width="332" height="480">
                    </div>
                    <div class="landarch-alumni__name">
                        Turley Thomas
                        <span class="landarch-alumni__icon"><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>
                    </div>
                    <div class="landarch-alumni__current-job-title">Landscape Architect</div>
                    <div class="landarch-alumni__grad-class">MFA '17</div>
                </a>
                <a href="#" class="landarch-alumni__alum">
                    <div class="landarch-alumni__image-wrap">
                        <img src="https://picsum.photos/332/480?random=4" alt="alt" class="landarch-alumni__image" width="332" height="480">
                    </div>
                    <div class="landarch-alumni__name">
                        Ashlynn Calzoni
                        <span class="landarch-alumni__icon"><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>
                    </div>
                    <div class="landarch-alumni__current-job-title">Landscape Architect</div>
                    <div class="landarch-alumni__grad-class">MFA '20</div>
                </a>
            </div>
            <div class="landarch-alumni__alumni landarch-alumni__alumni--medium">
                <div class="landarch-alumni__alumni-row landarch-alumni__alumni-row--top">
                    <a href="#" class="landarch-alumni__alum">
                        <div class="landarch-alumni__image-wrap">
                            <img src="https://picsum.photos/332/480?random=1" alt="alt" class="landarch-alumni__image" width="332" height="480">
                        </div>
                        <div class="landarch-alumni__name">
                            Walter J. Hood
                            <span class="landarch-alumni__icon"><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>
                        </div>
                        <div class="landarch-alumni__current-job-title">Landscape Architect</div>
                        <div class="landarch-alumni__grad-class">PhD '91</div>
                    </a>
                    <a href="#" class="landarch-alumni__alum">
                        <div class="landarch-alumni__image-wrap">
                            <img src="https://picsum.photos/332/480?random=2" alt="alt" class="landarch-alumni__image" width="332" height="480">
                        </div>
                        <div class="landarch-alumni__name">
                            Hanna Lubin
                            <span class="landarch-alumni__icon"><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>
                        </div>
                        <div class="landarch-alumni__current-job-title">Landscape Architect</div>
                        <div class="landarch-alumni__grad-class">MFA '17</div>
                    </a>
                </div>
                <div class="landarch-alumni__alumni-row landarch-alumni__alumni-row--bottom">
                    <a href="#" class="landarch-alumni__alum">
                        <div class="landarch-alumni__image-wrap">
                            <img src="https://picsum.photos/332/480?random=3" alt="alt" class="landarch-alumni__image" width="332" height="480">
                        </div>
                        <div class="landarch-alumni__name">
                            Turley Thomas
                            <span class="landarch-alumni__icon"><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>
                        </div>
                        <div class="landarch-alumni__current-job-title">Landscape Architect</div>
                        <div class="landarch-alumni__grad-class">MFA '17</div>
                    </a>
                    <a href="#" class="landarch-alumni__alum">
                        <div class="landarch-alumni__image-wrap">
                            <img src="https://picsum.photos/332/480?random=4" alt="alt" class="landarch-alumni__image" width="332" height="480">
                        </div>
                        <div class="landarch-alumni__name">
                            Ashlynn Calzoni
                            <span class="landarch-alumni__icon"><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>
                        </div>
                        <div class="landarch-alumni__current-job-title">Landscape Architect</div>
                        <div class="landarch-alumni__grad-class">MFA '20</div>
                    </a>
                </div>
            </div>
            <div class="landarch-alumni__cta">

                <a href="#" class="standard-button standard-button--landarch standard-button--light
            standard-button---width standard-button--primary">
                    <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">View all alumni</span><span class="standard-button__icon"><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></span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="landarch-alumni">
    <div class="landarch-alumni__wrapper">
        <div class="landarch-alumni__container">
            <h2 class="landarch-alumni__heading">{{ alumniSection.heading }}</h2>
            <p class="landarch-alumni__description">{{ alumniSection.description }}</p>
            <div class="landarch-alumni__alumni">
                {% for alum in alumniSection.alumni %}
                    {% include 'partials/homepages/landarch/alumni/landarch-alum-card.twig' with { alum } %}
                {% endfor %}
            </div>
            <div class="landarch-alumni__alumni landarch-alumni__alumni--medium">
                <div class="landarch-alumni__alumni-row landarch-alumni__alumni-row--top">
                    {% include 'partials/homepages/landarch/alumni/landarch-alum-card.twig' with { alum: alumniSection.alumni[0] } %}
                    {% include 'partials/homepages/landarch/alumni/landarch-alum-card.twig' with { alum: alumniSection.alumni[1] } %}
                </div>
                <div class="landarch-alumni__alumni-row landarch-alumni__alumni-row--bottom">
                    {% include 'partials/homepages/landarch/alumni/landarch-alum-card.twig' with { alum: alumniSection.alumni[2] } %}
                    {% include 'partials/homepages/landarch/alumni/landarch-alum-card.twig' with { alum: alumniSection.alumni[3] } %}
                </div>
            </div>
            <div class="landarch-alumni__cta">
                {% include 'bits/standard-button/standard-button.twig' with {
                    button: {
                        text: alumniSection.cta.text,
                        url: alumniSection.cta.link,
                        type: 'primary',
                        icon: 'right-chevron'
                    }
                } %}
            </div>
        </div>
    </div>
</div>
 
{
  "siteUnit": "landarch",
  "departmentName": "Landscape Architecture",
  "background": "light",
  "alumniSection": {
    "heading": "Alumni",
    "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.",
    "alumni": [
      {
        "fullName": "Walter J. Hood",
        "link": "#",
        "featuredImage": {
          "src": "https://picsum.photos/332/480?random=1",
          "altText": "alt"
        },
        "graduationYear": "PhD '91",
        "currentJobTitle": "Landscape Architect"
      },
      {
        "fullName": "Hanna Lubin",
        "link": "#",
        "featuredImage": {
          "src": "https://picsum.photos/332/480?random=2",
          "altText": "alt"
        },
        "graduationYear": "MFA '17",
        "currentJobTitle": "Landscape Architect"
      },
      {
        "fullName": "Turley Thomas",
        "link": "#",
        "featuredImage": {
          "src": "https://picsum.photos/332/480?random=3",
          "altText": "alt"
        },
        "graduationYear": "MFA '17",
        "currentJobTitle": "Landscape Architect"
      },
      {
        "fullName": "Ashlynn Calzoni",
        "link": "#",
        "featuredImage": {
          "src": "https://picsum.photos/332/480?random=4",
          "altText": "alt"
        },
        "graduationYear": "MFA '20",
        "currentJobTitle": "Landscape Architect"
      }
    ],
    "cta": {
      "text": "View all alumni",
      "link": "#"
    }
  }
}
  • Handle: @landarch-alumni
  • Preview:
  • Filesystem Path: components/partials/homepages/landarch/alumni/landarch-alumni.twig

There are no notes for this item.