University of Florida College of the Arts Pattern Library

Link cards: Default 

<div class="link-cards" data-cy="link-cards">
    <div class="link-cards__introduction">
        <h2 class="link-cards__heading" data-cy="link-cards__heading">
            Link cards heading
        </h2>
        <div class="link-cards__description" data-cy="link-cards__description">
            Link cards description
        </div>
    </div>
    <ul class="link-cards__cards">

        <li class="link-cards__card" data-cy="link-cards__card">
            <div class="link-cards__image-wrapper" data-show-image="true">
                <picture class="link-cards__picture">
                    <source srcset="https://placekitten.com/300/700?a" type="image/webp">
                    <img class="link-cards__image" style="object-position: 50% 50% " src="https://placekitten.com/300/700?a" data-cy="link-cards__image" alt='friendly kitten' />
                </picture>
            </div>
            <div class="link-cards__card-text">
                <div class='link-cards__card-heading-container'>

                    <h3 class="linked-title linked-title--h3">
                        <a href="#" class="linked-title__link">
                            <span class="linked-title__link-text">See your location</span>
                        </a>
                    </h3>
                </div>
                <div class="link-cards__card-description" data-cy="link-cards__card-description">
                    These are the benefits of a program or student organization
                </div>
            </div>
        </li>

        <li class="link-cards__card" data-cy="link-cards__card">
            <div class="link-cards__image-wrapper" data-show-image="false">
            </div>
            <div class="link-cards__card-text">
                <div class='link-cards__card-heading-container'>

                    <h3 class="linked-title linked-title--h3">
                        <a href="#" class="linked-title__link">
                            <span class="linked-title__link-text">See your location</span>
                        </a>
                    </h3>
                </div>
                <div class="link-cards__card-description" data-cy="link-cards__card-description">
                    These are the benefits of a program or student organization
                </div>
            </div>
        </li>

        <li class="link-cards__card" data-cy="link-cards__card">
            <div class="link-cards__image-wrapper" data-show-image="true">
                <picture class="link-cards__picture">
                    <source srcset="https://placekitten.com/350/750" type="image/webp">
                    <img class="link-cards__image" style="object-position: 50% 50% " src="https://placekitten.com/350/750" data-cy="link-cards__image" alt='friendly kitten' />
                </picture>
            </div>
            <div class="link-cards__card-text">
                <div class='link-cards__card-heading-container'>

                    <h3 class="linked-title linked-title--h3">
                        <a href="#" class="linked-title__link">
                            <span class="linked-title__link-text">See your location</span>
                        </a>
                    </h3>
                </div>
                <div class="link-cards__card-description" data-cy="link-cards__card-description">
                    These are the benefits of a program or student organization
                </div>
            </div>
        </li>

        <li class="link-cards__card" data-cy="link-cards__card">
            <div class="link-cards__image-wrapper" data-show-image="true">
                <picture class="link-cards__picture">
                    <source srcset="https://placekitten.com/350/750" type="image/webp">
                    <img class="link-cards__image" style="object-position: 50% 50% " src="https://placekitten.com/350/750" data-cy="link-cards__image" alt='friendly kitten' />
                </picture>
            </div>
            <div class="link-cards__card-text">
                <div class='link-cards__card-heading-container'>

                    <h3 class="linked-title linked-title--h3">
                        <a href="#" class="linked-title__link">
                            <span class="linked-title__link-text">See your location</span>
                        </a>
                    </h3>
                </div>
                <div class="link-cards__card-description" data-cy="link-cards__card-description">
                    These are the benefits of a program or student organization
                </div>
            </div>
        </li>
    </ul>
</div>
 
{#
/**
 * Block Name: Example block
 *
 * This is the template that displays the example block.
 */
#}

<div class="link-cards"
    data-cy="link-cards">
    <div class="link-cards__introduction">
        <h2 class="link-cards__heading"
            data-cy="link-cards__heading">
            {{ fields.header }}
        </h2>
        <div class="link-cards__description"
             data-cy="link-cards__description">
            {{ fields.description }}
        </div>
    </div>
    <ul class="link-cards__cards">
        {{ content }}
        {% for item in fields.innerBlocks.cards  %}
            {% include 'blocks/link-card/link-card.twig' with item %}
        {% endfor %}
    </ul>
</div>
 
{
  "fields": {
    "type": "link-cards",
    "header": "Link cards heading",
    "description": "Link cards description",
    "showDescription": true,
    "innerBlocks": {
      "cards": [
        {
          "fields": {
            "type": "link-card",
            "showImage": true,
            "image": {
              "url": "https://placekitten.com/300/700?a"
            },
            "image_alt_text": "friendly kitten",
            "link_text": "See your location",
            "link_reference": "#",
            "description": "These are the benefits of a program or student organization",
            "focalPoint": {
              "x": 50,
              "y": 50
            }
          }
        },
        {
          "fields": {
            "type": "link-card",
            "showImage": false,
            "image": {
              "url": "https://placekitten.com/350/750"
            },
            "image_alt_text": "friendly kitten",
            "link_text": "See your location",
            "link_reference": "#",
            "description": "These are the benefits of a program or student organization"
          }
        },
        {
          "fields": {
            "type": "link-card",
            "showImage": true,
            "image": {
              "url": "https://placekitten.com/350/750"
            },
            "image_alt_text": "friendly kitten",
            "link_text": "See your location",
            "link_reference": "#",
            "description": "These are the benefits of a program or student organization",
            "focalPoint": {
              "x": 50,
              "y": 50
            }
          }
        },
        {
          "fields": {
            "type": "link-card",
            "showImage": true,
            "image": {
              "url": "https://placekitten.com/350/750"
            },
            "image_alt_text": "friendly kitten",
            "link_text": "See your location",
            "link_reference": "#",
            "description": "These are the benefits of a program or student organization",
            "focalPoint": {
              "x": 50,
              "y": 50
            }
          }
        }
      ]
    }
  }
}
  • Content: 
    .link-cards
    @extends $componentWithMargin
    --card-background-color white
    --card-border-color transparent
    --card-heading-text-color blue500
    --card-heading-text-color-focused blue500
    --card-description-text-color grey500

    &__introduction
        margin-bottom 48px

    &__heading
        @extends $headline2
        color blue500

        &:not(:last-child)
            margin-bottom 8px

        &--is-hidden
            @extends $invisibleShowFocused

    &__description
        @extends $body
        color grey500

    &__cards
        display grid
        grid-column-gap 16px
        grid-row-gap 16px
        grid-template-columns repeat(auto-fit,minmax(272px,1fr))
        list-style none

        +above(883px)
            grid-template-columns repeat(auto-fit,minmax(336px,1fr))

    &__card
        border solid 2px var(--card-border-color)

    &__image
        aspect-ratio 16/9
        border-radius 8px
        object-fit cover
        width 100%

    &__card-text
        padding 24px

    &__card-heading-container
        margin-bottom 8px

    &__link
        text-decoration none

    &__card-description
        @extends $body
        color var(--card-description-text-color)
  • URL: /components/raw/link-cards/link-cards.styl
  • Filesystem Path: patterns/blocks/link-cards/link-cards.styl
  • Size: 1.2 KB

No notes defined.