University of Florida College of the Arts Pattern Library

Topic Block: Without Image 

<div data-cy="topic-block" class="topic-block">
    <div class="topic-block__content-container topic-block__content-container--with-image">

        <div class="topic-block__copy-wrapper">
            <h2 class="topic-block__heading ">
                Topic Block Heading
            </h2>
            <div class="topic-block__description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
            </div>
            <div class="topic-block__button" data-cy="topic-block__button" data-show-cta="true">

                <a href="https://google.com/" class="standard-button standard-button--light
            standard-button---width standard-button--primary">
                    <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Read more</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <mask id="mask0_5509_8875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                        <rect width="24" height="24" fill="#D9D9D9" />
                                    </mask>
                                    <g mask="url(#mask0_5509_8875)">
                                        <path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" fill="white" />
                                    </g>
                                </svg></span></span></div>
                </a>
            </div>
        </div>
        <div class="topic-block__image-wrapper  data-show-image=" false"">
        </div>
    </div>
</div>
 
<div data-cy="topic-block" class="topic-block">
    <div class="topic-block__content-container {{ fields.image.url|default(false) ? 'topic-block__content-container--with-image' }}">

        <div class="topic-block__copy-wrapper">
            <h2 class="topic-block__heading {{ fields.hide_heading ? 'topic-block__heading--is-hidden' : '' }}">
                {{ fields.heading }}
            </h2>
            {% if fields.description %}
                <div class="topic-block__description">
                    {{ fields.description }}
                </div>
            {% endif %}
            {% if fields.showCTALink %}
                <div class="topic-block__button"
                     data-cy="topic-block__button"
                    {{ fields.showCTALink ? 'data-show-cta="true"' : 'data-show-cta="false"'}}>
                    {% include 'bits/standard-button/standard-button.twig' with {
                        button: {
                            text: fields.linkText,
                            url: fields.linkUrl,
                            type: 'primary',
                        },
                        background: 'light',
                    } %}
                </div>
            {% endif %}
        </div>
        <div class="topic-block__image-wrapper  {{ fields.showImage ? 'data-show-image="true"' : 'data-show-image="false"'}}">
            {% if fields.showImage | default %}
                <picture class="topic-block__picture">
                    <source srcset="{{ fields.image.url | resize(848) | towebp }}" type="image/webp">
                    <img class="topic-block__image" src="{{ fields.image.url ?: 'https://via.placeholder.com/432x272' }}"
                         style="object-position: {{fields.image.focalPoint.x }}% {{fields.image.focalPoint.y}}%" alt='{{ fields.image_alt_text ?: 'Alt text' }}'/>
                </picture>
                {% if fields.image.caption %}
                    <figcaption class="topic-block__caption wp-element-caption">
                        {{ fields.image.caption }}
                    </figcaption>
                {% endif %}
            {% endif %}
        </div>
    </div>
</div>
 
{
  "fields": {
    "type": "topic-block",
    "heading": "Topic Block Heading",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.",
    "image": {
      "url": "https://placekitten.com/750/1200?a",
      "alt": "A kitten",
      "focalPoint": {
        "x": 50,
        "y": 50
      }
    },
    "showCTALink": true,
    "showImage": false,
    "linkText": "Read more",
    "linkUrl": "https://google.com/"
  }
}
  • Content: 
    .topic-block
    @extends $componentWithMargin
    position relative

    &__heading
        @extends $headline3
        color blue500
        margin-bottom 8px

        &--is-hidden
            @extends $visually-hidden

    &__content-container
        align-items center
        display grid
        grid-gap 32px
        grid-template-areas "copy"
        grid-template-columns 1fr

        &--with-image
            grid-template-areas \
            "image" \
            "copy"

            +above(largeDeviceBreakpoint)
                grid-template-areas "copy image"
                grid-template-columns 1fr 1fr

    &__image-wrapper
        overflow hidden
        width 100%

    &__image
        aspect-ratio 1/1
        border-radius 8px
        grid-area image
        height 100%
        max-height 522px
        object-fit cover
        overflow hidden
        width 100%

    &__copy-container
        grid-area text-and-cta
        padding 24px
        +above(largeDeviceBreakpoint)
            padding 32px

    &__description
        @extends $bodyLarge
        color grey500

        & a
            @extends $hypertext

        & em
            font-style italic

        & strong
            font-weight 600

    &__button
        margin-top 32px
  • URL: /components/raw/topic-block/topic-block.styl
  • Filesystem Path: patterns/blocks/topic-block/topic-block.styl
  • Size: 1.3 KB

No notes defined.