<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=" true"">
<picture class="topic-block__picture">
<source srcset="https://placekitten.com/750/1200?a" type="image/webp">
<img class="topic-block__image" src="https://placekitten.com/750/1200?a" style="object-position: 50% 50%" alt='Alt text' />
</picture>
</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": true,
"linkText": "Read more",
"linkUrl": "https://google.com/"
}
}
.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
No notes defined.