Component Library

Image text section 

<section class="image-text-section">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <img data-src="../../dist/images/hero--mona-eendra-313518.jpg" alt="Image" class="image lazyload   ">
            </div>
            <div class="col-xs-12 col-sm-6">
                <article class="text-box ">
                    <div class="text-box__inner">
                        <div class="text-box__content">
                            <h2 class="heading heading--column ">Text Box header</h2>

                            <p>Text Box content.</p>
                        </div>
                    </div>
                </article>
                <a href="" title="" class="link-button   " property="url">button text</a>

            </div>
        </div>
    </div>
</section>
 
<section class="image-text-section">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                {{ render '@image' image}}
            </div>
            <div class="col-xs-12 col-sm-6">
                {{ render '@text-box' textbox }}
                {{ render '@link-button' button}}
            </div>
        </div>
    </div>
</section>
 
{
  "image": {
    "url": "/dist/images/hero--mona-eendra-313518.jpg",
    "alt": "Image"
  },
  "textbox2": {
    "heading": {
      "text": "Header"
    },
    "textBoxContent": "Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus."
  },
  "button": {
    "text": "button text"
  }
}
  • Content: 
    /*
* Module: image text section
*/

:root {
    --image-text-section-padding: 40px;
    --image-text-background-color: var(--color-gray-light);
}

.image-text-section {
    background-color: var(--image-text-background-color);
    padding: var(--image-text-section-padding);
}
  • URL: /components/raw/image-text-section/image-text-section.css
  • Filesystem Path: src/03-organisms/section/image-text-section/image-text-section.css
  • Size: 277 Bytes

There are no notes for this item.