Custom theme (replace with client name)

Link cards 

<div class="link-cards" data-cy="link-cards">
    <div class="link-cards__introduction">
        <h2 class="link-cards__heading" data-cy="link-cards__heading">

        </h2>
    </div>
    <ul class="link-cards__cards">

    </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>
        {% if fields.showDescription %}
            <div class="link-cards__description"
                 data-cy="link-cards__description">
                {{ fields.description }}
            </div>
        {% endif %}
    </div>
    <ul class="link-cards__cards">
        {{ content }}
    </ul>
</div>
 
{
  "fields": {
    "type": "link-cards"
  }
}
  • Content: 
    .link-cards
    @extends $componentWithMargin
    --card-background-color white
    --card-border-color charcoal
    --card-heading-text-color charcoalLight
    --card-heading-text-color-focused black
    --card-description-text-color greyDarkest

    &__introduction
        margin-bottom 48px

    &__heading
        @extends $headline2
        &:not(:last-child)
            margin-bottom 8px
        &--is-hidden
            @extends $invisibleShowFocused

    &__description
        @extends $body

    &__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)

    &__card-text
        border-top solid 2px var(--card-border-color)
        padding 24px

    &__card-heading
        @extends $linkHeadline3
        color var(--card-heading-text-color)
        margin-bottom 8px

    &__card-description
        @extends $bodySmall
        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.