Style Guide

Simple Text Element 

<div class="simpleText-wrap bg-grey">
    <div class="container">
        <div class="title-warp">
            <h2 class="main-title"> Here comes an Introduction</h2>
        </div>
        <div class="info-wrap">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscinge elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et. Lorem ipsum dolor sit amet, consetetur sadipscinge elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et.</p>
        </div>
        <a class="btn btn-link" href="#">Find out more</a>
    </div>
</div>
 
<div class="simpleText-wrap {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  <div class="container">
    <div class="title-warp">
      <h2 class="main-title"> {{title}}</h2>
    </div>
    <div class="info-wrap">
      {{desc}}
    </div>
    <a class="btn btn-link" href="{{ btn_link }}">{{btn_text}}</a>
  </div>
</div>
 
{
  "title": "Here comes an Introduction",
  "desc": "<p>Lorem ipsum dolor sit amet, consetetur sadipscinge elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et. Lorem ipsum dolor sit amet, consetetur sadipscinge elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et.</p>",
  "btn_text": "Find out more",
  "btn_link": "#",
  "bgGrey": true
}
  • Content: 
    .simpleText-wrap {
  padding: 80px 0;
  @include media-breakpoint-down(lg) {
    padding: 60px 0;
  }
  .container {
    max-width: 830px;
    // margin: auto;
    padding: 0 15px;
    .title-warp {
      padding-bottom: 60px;
      @include media-breakpoint-down(lg) {
        padding-bottom: 40px;
      }
      .main-title {
        font-family: "PlayfairDisplay-Bold";
      }
      .title {
        font-size: 17px;
        font-family: "OpenSans_light";
        line-height: 23px;
        color: #120f29;
      }
    }
    .info-wrap {
      padding-bottom: 35px;
      p {
        color: #120f29;
        margin-bottom: 0;
      }
      blockquote {
        p {
          padding-bottom: 0 !important;
        }
      }
    }
  }
}
  • URL: /components/raw/simple_text_element/simple_text_element.scss
  • Filesystem Path: components/03-components/simple_text_element/simple_text_element.scss
  • Size: 739 Bytes
  • Handle: @simple_text_element
  • Preview:
  • Filesystem Path: components/03-components/simple_text_element/simple_text_element.twig

There are no notes for this item.