FAA Pattern Library - Department of Urban and Regional Planning

DURP homepage programs section 

<div class="homepage-programs">
    <div class="homepage-programs__container">
        <div class="homepage-programs__wrapper">
            <div class="homepage-programs__description">
                <h2 class="homepage-programs__header">
                    Choose your path
                </h2>
                <p class="homepage-programs__introduction">
                    Through a study of urban planning, you’ll join a community that’s passionate about working together to transform societies for the better.
                </p>
                <div class="homepage-programs__button">

                    <a href="#" class="standard-button standard-button--durp standard-button--dark
            standard-button---width standard-button--primary">
                        <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Browse our programs</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" 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>
            <ul class="homepage-programs__programs">
                <li class="homepage-programs__program">
                    <div class="homepage-programs__program-line">
                        <svg class="orange-line" width="32" height="8" viewBox="0 0 32 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <rect width="32" height="8" />
</svg>
                    </div>
                    <h3 class="homepage-programs__program-heading">
                        <a href="#" class="homepage-programs__program-link">
                                Bachelor of Arts in Urban Studies and Planning<span class="homepage-programs__program-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>
                    </h3>
                </li>
                <li class="homepage-programs__program">
                    <div class="homepage-programs__program-line">
                        <svg class="orange-line" width="32" height="8" viewBox="0 0 32 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <rect width="32" height="8" />
</svg>
                    </div>
                    <h3 class="homepage-programs__program-heading">
                        <a href="#" class="homepage-programs__program-link">
                                Minor in Urban Studies and Planning<span class="homepage-programs__program-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>
                    </h3>
                </li>
                <li class="homepage-programs__program">
                    <div class="homepage-programs__program-line">
                        <svg class="orange-line" width="32" height="8" viewBox="0 0 32 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <rect width="32" height="8" />
</svg>
                    </div>
                    <h3 class="homepage-programs__program-heading">
                        <a href="#" class="homepage-programs__program-link">
                                Master of Urban Planning<span class="homepage-programs__program-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>
                    </h3>
                </li>
                <li class="homepage-programs__program">
                    <div class="homepage-programs__program-line">
                        <svg class="orange-line" width="32" height="8" viewBox="0 0 32 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <rect width="32" height="8" />
</svg>
                    </div>
                    <h3 class="homepage-programs__program-heading">
                        <a href="#" class="homepage-programs__program-link">
                                Master of Science in Sustainable Urban Management<span class="homepage-programs__program-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>
                    </h3>
                </li>
                <li class="homepage-programs__program">
                    <div class="homepage-programs__program-line">
                        <svg class="orange-line" width="32" height="8" viewBox="0 0 32 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <rect width="32" height="8" />
</svg>
                    </div>
                    <h3 class="homepage-programs__program-heading">
                        <a href="#" class="homepage-programs__program-link">
                                PhD in Regional Planning<span class="homepage-programs__program-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>
                    </h3>
                </li>
            </ul>
        </div>
    </div>
</div>
 
<div class="homepage-programs">
    <div class="homepage-programs__container">
        <div class="homepage-programs__wrapper">
            <div class="homepage-programs__description">
                <h2 class="homepage-programs__header">
                    {{  programs.header }}
                </h2>
                <p class="homepage-programs__introduction">
                    {{ programs.introduction }}
                </p>
                <div class="homepage-programs__button">
                    {% include 'bits/standard-button/standard-button.twig' with {
                        button: {
                            type: 'primary',
                            icon: 'internal-link',
                            text: programs.programPageText,
                            url: programs.programPageLink,
                            width: regular,
                        }
                    } %}
                </div>
            </div>
            <ul class="homepage-programs__programs">
                {% for program in programs.programList %}
                    <li class="homepage-programs__program">
                        <div class="homepage-programs__program-line">
                            {% include '/bits/orange-line/orange-line.twig' %}
                        </div>
                        <h3 class="homepage-programs__program-heading">
                            <a href="{{ program.url }}" class="homepage-programs__program-link">
                                {% apply spaceless %}
                                    {{ program.name }}<span class="homepage-programs__program-link-icon">&nbsp;{% include 'bits/icons/right-chevron.twig' %}</span>
                                {% endapply %}
                            </a>
                        </h3>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
 
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "programs": {
    "header": "Choose your path",
    "introduction": "Through a study of urban planning, you’ll join a community that’s passionate about working together to transform societies for the better.",
    "programPageText": "Browse our programs",
    "programPageLink": "#",
    "programList": [
      {
        "name": "Bachelor of Arts in Urban Studies and Planning",
        "url": "#"
      },
      {
        "name": "Minor in Urban Studies and Planning",
        "url": "#"
      },
      {
        "name": "Master of Urban Planning",
        "url": "#"
      },
      {
        "name": "Master of Science in Sustainable Urban Management",
        "url": "#"
      },
      {
        "name": "PhD in Regional Planning",
        "url": "#"
      }
    ]
  }
}
  • Content: 
    breakpointSmall = 784px
breakpointLarge = 1300px
.homepage-programs
    background-color charcoalLight
    fluid(padding-bottom padding-top, 320px, maxContentWidth, 80px, 160px)
    &__container
        @extends $contentContainer
    &__wrapper
        +above(breakpointLarge)
            @supports (display: grid)
                display grid
            grid-template-columns 4fr 8fr
    &__description
        +above(breakpointLarge)
            padding-right 48px
    &__header
        @extends $primaryTitle
        color white
        margin-bottom 24px
    &__introduction
        @extends $primaryParagraph
        color grey
    &__button
        margin-top 48px
    &__programs
        @supports (display: grid)
            display grid
        grid-gap 16px
        grid-template-columns 1fr
        margin-top 48px
        +above(breakpointSmall)
            grid-auto-rows minmax(100px, auto)
            grid-template-columns 1fr 1fr
        +above(breakpointLarge)
            margin-top 0
    &__program
        background-color charcoalLighter
        fluid(padding, 320px, maxContentWidth, 16px, 24px)
    &__program-line
        margin-bottom 16px
    &__program-link
        @extends $primaryLead
        text-decoration none
        color white
        &:focus
        &:hover
        &:active
            .homepage-programs__program-link-icon svg
                transform translate(4px, 0)
    &__program-link-icon
        display inline
        white-space nowrap
        & svg
            transition all 0.3s
  • URL: /components/raw/homepage-programs-section/homepage-programs-section.styl
  • Filesystem Path: components/partials/homepages/durp/homepage-programs-section/homepage-programs-section.styl
  • Size: 1.5 KB
  • Handle: @homepage-programs-section
  • Preview:
  • Filesystem Path: components/partials/homepages/durp/homepage-programs-section/homepage-programs-section.twig

There are no notes for this item.