FAA Pattern Library - Music

Related Work Card 

<article class="card-with-image card-with-image--light ">
    <div class="card-with-image__content">
        <div class="related-work-card-content related-work-card-content--music">
            <div class="related-work-card-content__listing-link">Work</div>
            <div class="related-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="related-work-card-content__creators related-work-card-content__creators--light">
                Creator Name, Creator Name, and Creator Name
            </div>
        </div>
    </div>
    <div class="card-with-image__image ">
    </div>
</article>
 
{% embed 'templates/card-with-image/card-with-image.twig' with {'post': story} %}
    {% block text %}
        <div class="related-work-card-content related-work-card-content--{{ siteUnit }}">
            {% if relatedContentLinks['work'] | default %}
                <a class="related-work-card-content__listing-link" href="{{ relatedContentLinks['work'] }}">Work</a>
            {% else %}
                <div class="related-work-card-content__listing-link">Work</div>
            {% endif %}
            <div class="related-work-card-content__title">
                {% include 'bits/linked-title/linked-title.twig' with {
                    url: work.permalink,
                    text: work.title
                } %}
            </div>
            <div class="related-work-card-content__creators related-work-card-content__creators--{{ background }}">
                {{ work.creators }}
            </div>
        </div>
    {% endblock %}
    {% block image %}
    {% endblock %}
{% endembed %}
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light",
  "work": {
    "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",
    "programAreas": [
      "Detail + fabrication",
      "History + theory"
    ]
  }
}
  • Content: 
    .related-work-card-content
    --linkColor altgeld

    &--arch
        --linkColor industrialBlue

    &--art
        --linkColor archesBlueDark

    &--dance
        --linkColor archesBlueDark

    &-durp
        --linkColor altgeld

    &-theatre
        --linkColor altgeld

    padding 24px
    width 432px

    &__listing-link
        @extends $primaryLink
        color var(--linkColor)
        display block
        margin-bottom 16px

    &__title
        @extends $secondaryLead
        margin-bottom 4px

    &__creators
        @extends $detail
  • URL: /components/raw/related-work-card/related-work-card.styl
  • Filesystem Path: components/partials/related-work-card/related-work-card.styl
  • Size: 557 Bytes

There are no notes for this item.