Style Guide

Simple Text Element With Stats 

<div class="simpleTextStats-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>
        </div>

        <div class="row statInfo-row">
            <div class="col-md-4 statInfo-col">
                <div class="textInfo-wrap">
                    <h3>Fund launched</h3>
                    <p>30 March 2018</p>
                </div>

            </div>
            <div class="col-md-4 statInfo-col">
                <div class="textInfo-wrap">
                    <h3>Return since launch</h3>
                    <p>163,43%</p>
                </div>

            </div>
            <div class="col-md-4 statInfo-col">
                <div class="textInfo-wrap">
                    <h3>Annualised return</h3>
                    <p>30,2%</p>
                </div>

            </div>
        </div>

        <a class="btn btn-link" href="#">Past performance is not a guarantee of future returns. Based on S Class share performance</a>
    </div>
</div>
 
<div class="simpleTextStats-wrap {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  <div class="container">
    <div class="title-warp">
      <h2 class="title"> {{ title }}</h2>
    </div>
    <div class="info-wrap">
      {{ desc }}
    </div>

    <div class="row statInfo-row">
      {% for item in statInfo %}
        <div class="col-md-4 statInfo-col">
          {{ item }}
        </div>
      {% endfor %}
    </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": "Past performance is not a guarantee of future returns. Based on S Class share performance",
  "btn_link": "#",
  "bgGrey": true,
  "statInfo": [
    {
      "$stats_info": {
        "title": "Fund launched",
        "stat": "30 March 2018"
      }
    },
    {
      "$stats_info": {
        "title": "Return since launch",
        "stat": "163,43%"
      }
    },
    {
      "$stats_info": {
        "title": "Annualised return",
        "stat": "30,2%"
      }
    }
  ]
}
  • Content: 
    .simpleTextStats-wrap {
  padding: 40px 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;
        font-family: "OpenSans_light";
        line-height: 23px;
        color: #120f2980;
      }
    }
    .info-wrap {
      padding-bottom: 40px;
      p {
        color: #120f29;
        margin-bottom: 0;
      }
    }
    .statInfo-row {
      padding-bottom: 60px;
      @include media-breakpoint-down(md) {
        padding-bottom: 35px;
      }
      .statInfo-col {
        &:last-child {
          .textInfo-wrap {
            @include media-breakpoint-down(md) {
              margin-bottom: 0px;
            }
          }
        }
        .textInfo-wrap {
          @include media-breakpoint-down(md) {
            margin-bottom: 35px;
          }
          h3 {
            color: #120f2980;
            font-size: 14px;
            font-family: "OpenSans-SemiBold";
            line-height: 32px;
            margin-bottom: 0;
          }
          p {
            font-size: 19px;
            font-family: "OpenSans-SemiBold";
            line-height: 32px;
            margin-bottom: 0;
          }
        }
      }
    }
    blockquote {
      padding-left: 30px;
      max-width: 625px;
      @include media-breakpoint-down(lg) {
        padding-left: 0;
      }
      p {
        font-family: "OpenSans-BoldItalic";
        padding-left: 10px;
        border-left: 2px solid $secondary;
        padding-bottom: 0 !important;
      }
    }
  }
  .btn-link {
    font-size: 15px;
    cursor: not-allowed;
    pointer-events: none;
  }
}
  • URL: /components/raw/simple_text_element_with_stats/simple_text_element_with_stats.scss
  • Filesystem Path: components/03-components/simple_text_element_with_stats/simple_text_element_with_stats.scss
  • Size: 1.8 KB
  • Handle: @simple_text_element_with_stats
  • Preview:
  • Filesystem Path: components/03-components/simple_text_element_with_stats/simple_text_element_with_stats.twig

There are no notes for this item.