Style Guide

Simple Text Element Highlighted Text 

<div class="simpleText-wrap bg-grey">
    <div class="container">
        <div class="title-warp">
            <h2 class="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>
            <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>
        <div class="quoteText">
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
        </div>
    </div>
</div>
 
<div class="simpleText-wrap {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  <div class="container">
    <div class="title-warp">
      <h2 class="title"> {{title}}</h2>
    </div>
    <div class="info-wrap">
      {% for item in descText %}
        <p>{{item.text}}</p>
      {% endfor %}
    </div>
    <div class="quoteText">
      <p>{{quoteText}}</p>
    </div>
  </div>
</div>
 
{
  "bgGrey": true,
  "title": "Here comes an Introduction",
  "quoteText": "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.",
  "descText": [
    {
      "item": null,
      "text": "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."
    },
    {
      "item": null,
      "text": "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."
    }
  ]
}
  • Content: 
    .simpleText-wrap {
  padding: 80px 0;
  @include media-breakpoint-down(lg) {
    padding: 60px 0;
  }
  .container {
    max-width: 830px;
    padding: 0 15px;
    .title-warp {
      padding-bottom: 60px;
      @include media-breakpoint-down(lg) {
        padding-bottom: 40px;
      }
      .title {
        font-size: 17px;
        line-height: 23px;
        color: #120f2980;
      }
    }
    .info-wrap {
      padding-bottom: 35px;
      p {
        color: #120f29;
        padding-bottom: 25px;
        margin-bottom: 0;
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
    .quoteText,
    blockquote {
      padding-left: 30px;
      max-width: 625px;
      @include media-breakpoint-down(lg) {
        padding-left: 0;
      }
      p {
        font-family: "OpenSans-SemiBoldItalic";
        padding-left: 10px;
        border-left: 2px solid $secondary;
        padding-bottom: 0 !important;
        margin-bottom: 0;
      }
    }
  }
}
  • URL: /components/raw/simple_text_element_with_highlighted_text/simple_text_element_with_highlighted_text.scss
  • Filesystem Path: components/03-components/simple_text_element_with_highlighted_text/simple_text_element_with_highlighted_text.scss
  • Size: 977 Bytes
  • Handle: @simple_text_element_with_highlighted_text
  • Preview:
  • Filesystem Path: components/03-components/simple_text_element_with_highlighted_text/simple_text_element_with_highlighted_text.twig

There are no notes for this item.