FAA Pattern Library - Music

Work Mini Component 

<div class="work-mini-component work-mini-component--music work-mini-component--light work-mini-component--large">
    <h2 class="work-mini-component__title" id="Undergraduate Work">
        Undergraduate Work
    </h2>
    <div class="work-mini-component__cards-grid">
        <div class="work-mini-component__card">
            <article class="card-with-image card-with-image--light ">
                <div class="card-with-image__content">
                    <div class="work-card-content work-card-content--music">
                        <div class="work-card-content__title">
                            <h2 class="linked-title linked-title--music linked-title--light">
                                <a href="http://localhost:3000/components/detail/news" class="
            linked-title__link linked-title__link--light
            
    ">
        Quisque volutpat mattis eros nullam<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="work-card-content__creators work-card-content__creators--light">
                            Creator Name, Creator Name, and Creator Name
                        </div>
                    </div>
                </div>
                <div class="card-with-image__image ">
                    <figure class="captioned-image">
                        <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="featured image" width="320" height="228">
                    </figure>

                </div>
            </article>

        </div>
        <div class="work-mini-component__card">
            <article class="card-with-image card-with-image--light ">
                <div class="card-with-image__content">
                    <div class="work-card-content work-card-content--music">
                        <div class="work-card-content__title">
                            <h2 class="linked-title linked-title--music linked-title--light">
                                <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Lorem ipsum dolor sit consectetuer
adipiscing elit<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="work-card-content__creators work-card-content__creators--light">
                            Creator Name
                        </div>
                    </div>
                </div>
                <div class="card-with-image__image ">
                    <figure class="captioned-image">
                        <img class="captioned-image__image" src="https://picsum.photos/320/228?random=2" alt="building" width="320" height="228">
                    </figure>

                </div>
            </article>

        </div>
        <div class="work-mini-component__card">
            <article class="card-with-image card-with-image--light ">
                <div class="card-with-image__content">
                    <div class="work-card-content work-card-content--music">
                        <div class="work-card-content__title">
                            <h2 class="linked-title linked-title--music linked-title--light">
                                <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Strategies for Architectual Design<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="work-card-content__creators work-card-content__creators--light">
                            Assistant Professor Aneesha Dharwadker & Teaching Assistant Professor Andrea Melgarejo de Berry
                        </div>
                    </div>
                </div>
                <div class="card-with-image__image ">
                    <figure class="captioned-image">
                        <img class="captioned-image__image" src="https://picsum.photos/320/228?random=3" alt="building" width="320" height="228">
                    </figure>

                </div>
            </article>

        </div>
        <div class="work-mini-component__card">
            <article class="card-with-image card-with-image--light ">
                <div class="card-with-image__content">
                    <div class="work-card-content work-card-content--music">
                        <div class="work-card-content__title">
                            <h2 class="linked-title linked-title--music linked-title--light">
                                <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Architecture and the City<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="work-card-content__creators work-card-content__creators--light">
                            Associate Professor Therese Tierney
                        </div>
                    </div>
                </div>
                <div class="card-with-image__image ">
                    <figure class="captioned-image">
                        <img class="captioned-image__image" src="https://picsum.photos/320/228?random=4" alt="building" width="320" height="228">
                    </figure>

                </div>
            </article>

        </div>
    </div>
    <div class="work-mini-component__cta-container">

        <a href="#" class="standard-button standard-button--music standard-button--light
            standard-button--full-width standard-button--primary">
            <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Learn more</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>
 
{% if component.cards | default %}
    <div class="work-mini-component work-mini-component--{{ siteUnit }} work-mini-component--{{ background }} work-mini-component--{{ componentSpacing }}">
        {% if component.title | default and (component.title|trim) %}
            <h2 class="work-mini-component__title"
                id="{{ component.title|sanitize }}">
                {{ component.title }}
            </h2>
        {% endif %}
        <div class="work-mini-component__cards-grid">
            {% for work in component.cards %}
                <div class="work-mini-component__card">
                    {% include 'partials/work-card/work-card.twig' %}
                </div>
            {% endfor %}
        </div>
        {% if component.callToAction | default %}
            <div class="work-mini-component__cta-container">
                {% include 'bits/standard-button/standard-button.twig' with {
                    button: {
                        icon: 'right-chevron',
                        text: component.callToAction.text,
                        url: component.callToAction.url,
                        type: 'primary',
                        width: 'full'
                    }
                } %}
            </div>
        {% endif %}
    </div>
{% endif %}
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light",
  "componentSpacing": "large",
  "component": {
    "type": "work-mini",
    "title": "Undergraduate Work",
    "cards": [
      {
        "title": "Quisque volutpat mattis eros nullam",
        "permalink": "http://localhost:3000/components/detail/news",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "featured image"
        },
        "creators": "Creator Name, Creator Name, and Creator Name"
      },
      {
        "title": "Lorem ipsum dolor sit consectetuer
adipiscing elit",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Creator Name",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=2",
          "altText": "building"
        }
      },
      {
        "title": "Strategies for Architectual Design",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Assistant Professor Aneesha Dharwadker & Teaching Assistant Professor Andrea Melgarejo de Berry",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=3",
          "altText": "building"
        }
      },
      {
        "title": "Architecture and the City",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Associate Professor Therese Tierney",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=4",
          "altText": "building"
        }
      }
    ],
    "callToAction": {
      "text": "Learn more",
      "url": "#"
    }
  }
}
  • Content: 
    .work-mini-component
    &--large
        @extends $componentWithMargin

    &--medium
        @extends $componentWithMarginMedium

    &--small
        @extends $componentWithMarginSmall

    &--dark
        --textColor white

    &--light
        --textColor charcoalLight

    &--dark
        --textColor white

    &--light
        --textColor charcoalLight

    &__title
        @extends $headline1
        color var(--textColor)
        margin-bottom 48px

    &__cards-grid
        margin-bottom 48px
  • URL: /components/raw/work-mini-component/work-mini-component.styl
  • Filesystem Path: components/components/work-mini-component/work-mini-component.styl
  • Size: 508 Bytes

There are no notes for this item.