Component Library

Image text section 

<section class="text-image-section">
    <div class="container">
        <div class="row">
            <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 ">Header</h2>

                            <p>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.</p>
                        </div>
                    </div>
                </article>
                <a href="" title="" class="link-button   " property="url">button text</a>

            </div>
            <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>
    </div>
</section>
 
<section class="text-image-section">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                {{ render '@text-box' textbox2}}
                {{ render '@link-button' button}}
            </div>
            <div class="col-xs-12 col-sm-6">
                {{ render '@image' image}}
            </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);
}

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

There are no notes for this item.