Content Block 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/content-block.css?cb=">

<div class="content-block content-block--with-image">
    <div class="grid-x">
        <div class="cell content-block__image">

            <div class="image  ">
                <figure>
                    <picture>
                        <source media="(max-width: 840px)" type="image/jpeg" srcset="https://dummyimage.com/800x100/f0f0f0/545454.png" />
                        <source media="(min-width: 841px)" type="image/jpeg" srcset="https://dummyimage.com/1600x900/f0f0f0/545454.png" />
                        <img src="" loading="lazy" alt="Image Alt Text">
                    </picture>
                    <figcaption class="image__caption">Image caption appears inside figcaption tag</figcaption>
                </figure>
            </div>
        </div>
        <div class="cell content-block__content">
            <div class="content-block__html">
                <link media="all" rel="stylesheet" href="/assets/themes/default/css/richtext.css?cb=">

                <div class="richtext">Here is the text for the title: Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor.</div>
            </div>
            <div class="content-block__cta">
                <link media="all" rel="stylesheet" href="/assets/themes/default/css/cta.css?cb=">

                <a href="#" data-module="cta" class="cta primary-cta content-block__link" role="button">
                    Click here
                </a>
                <link media="all" rel="stylesheet" href="/assets/themes/default/css/cta.css?cb=">

                <a href="#" data-module="cta" class="cta secondary-cta content-block__link" role="button">
                    Click here
                </a>
            </div>
        </div>
    </div>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/content-block.css?cb={{cacheBuster}}">
{{/if}}

<div class="content-block {{#if image}}content-block--with-image{{/if}}">
    <div class="grid-x">
        {{#if image}}
        <div class="cell content-block__image">
            {{> @image image }}
        </div>
        {{/if}}
        <div class="cell content-block__content">
            <div class="content-block__html">{{> @rich-text html=content }}</div>
            <div class="content-block__cta">
                {{#if primaryCta}}
                {{> @cta url=primaryCta.url text=primaryCta.text modifier="content-block__link" }}
                {{/if}}
                {{#if secondaryCta}}
                {{> @cta url=secondaryCta.url text=secondaryCta.text modifier="content-block__link" isSecondary=true }}
                {{/if}}
            </div>
        </div>
    </div>
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "image": {
    "altText": "Image Alt Text",
    "caption": "Image caption appears inside figcaption tag",
    "placeholderImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
    "sources": [
      {
        "type": "image/jpeg",
        "desktopImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
        "mobileImageUrl": "https://dummyimage.com/800x100/f0f0f0/545454.png"
      }
    ]
  },
  "content": "Here is the text for the title: Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor.",
  "primaryCta": {
    "url": "#",
    "text": "Click here"
  },
  "secondaryCta": {
    "url": "#",
    "text": "Click here"
  }
}
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.content-block {
    &__content {
        margin: rem(20) 0;
    }

    &__html {
        margin-bottom: rem(20);
    }

    &__link {
        display: block;
        margin: 0 rem(30) rem(20) 0;
        max-width: rem(214);

        @include breakpoint(medium) {
            display: inline-block;
       }
    }
}
  • URL: /components/raw/content-block/content-block.scss
  • Filesystem Path: source/patterns/03-components/text/content-block/content-block.scss
  • Size: 400 Bytes

No notes defined.