Style Guide

Text Blocks Element 

<div class="textBlocks-wrap bg-white">
    <div class="container">

        <div class="title-warp">
            <h2 class="title"> BlueBox Investment Strategy</h2>
            <h1 class="main-title">We invest in enablers</h1>
        </div>

        <div class="row textBlocks-row">
            <div class="col-md-6">
                <div class="leftTextWrap">
                    <h3 class="sub-title">Direct Connection</h3>
                    <h2 class="main-title">1. A strong <span>underlying technology trend</span>, principally Direct Connection</h2>
                </div>
            </div>
            <div class="col-md-6">
                <div class="rightTextWrap">
                    <p>The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years,</p>
                </div>
            </div>
        </div>

        <div class="row textBlocks-row">
            <div class="col-md-6">
                <div class="leftTextWrap">
                    <h3 class="sub-title">Create Value</h3>
                    <h2 class="main-title">2. A company’s ability to create value <span>as a result</span>of that <span>trend</span>.</h2>
                </div>
            </div>
            <div class="col-md-6">
                <div class="rightTextWrap">
                    <p>The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. </p>
                </div>
            </div>
        </div>

        <div class="row textBlocks-row">
            <div class="col-md-6">
                <div class="leftTextWrap">
                    <h3 class="sub-title">Strong barriers</h3>
                    <h2 class="main-title">3. <span>Strong barriers</span> to entry</h2>
                </div>
            </div>
            <div class="col-md-6">
                <div class="rightTextWrap">
                    <p>The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. </p>
                </div>
            </div>
        </div>

        <div class="row textBlocks-row">
            <div class="col-md-6">
                <div class="leftTextWrap">
                    <h3 class="sub-title">Division</h3>
                    <h2 class="main-title">4. A <span>reasonable division</span> of generated value between <span>outside shareholders</span> and other stakeholders</h2>
                </div>
            </div>
            <div class="col-md-6">
                <div class="rightTextWrap">
                    <p>The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years.</p>
                </div>
            </div>
        </div>

    </div>
</div>
 
<div class="textBlocks-wrap {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  <div class="container">

      <div class="title-warp">
        <h2 class="title"> {{title}}</h2>
        <h1 class="main-title">{{mainTitle}}</h1>
      </div>

    {% if textBlockBox is iterable %}
      {% for item in textBlockBox %}
        {{ item }}
      {% endfor %}
    {% else %}
      {{ desc }}
    {% endif %}
  </div>
</div>
 
{
  "bgGrey": false,
  "mainTitle": "We invest in enablers",
  "title": "BlueBox Investment Strategy",
  "textBlockBox": [
    {
      "$text_block": {
        "mainTitle": "1. A strong <span>underlying technology trend</span>, principally Direct Connection",
        "subTitle": "Direct Connection",
        "desc": "The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years,"
      }
    },
    {
      "$text_block": {
        "mainTitle": "2.  A company’s ability to create value <span>as a result</span>of that <span>trend</span>.",
        "subTitle": "Create Value",
        "desc": "The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. "
      }
    },
    {
      "$text_block": {
        "mainTitle": "3.  <span>Strong barriers</span> to entry",
        "subTitle": "Strong barriers",
        "desc": "The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. "
      }
    },
    {
      "$text_block": {
        "mainTitle": "4.  A <span>reasonable division</span> of generated value between <span>outside shareholders</span> and other stakeholders",
        "subTitle": "Division",
        "desc": "The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years."
      }
    }
  ]
}
  • Content: 
    .textBlocks-wrap {
  padding: 80px 0;
  @include media-breakpoint-down(lg) {
    padding: 60px 0;
  }
  .container {
    max-width: 1060px;
    padding: 0 15px;
  }

  .title-warp {
    padding-bottom: 90px;
    @include media-breakpoint-down(lg) {
      padding-bottom: 40px;
    }
    .title {
      font-size: 17px;
      font-family: "OpenSans_light";
      line-height: 23px;
      color: #120f29;
    }
    .main-title {
      font-size: 60px;
      font-family: "PlayfairDisplay-Bold";
      color: #120f29;
      margin-bottom: 0;
      @include media-breakpoint-down(lg) {
        font-size: 40px;
      }
    }
  }

  .textBlocks-row {
    padding-bottom: 90px;
    &:last-child {
      padding-bottom: 0;
    }
    @include media-breakpoint-down(lg) {
      padding-bottom: 40px;
    }
    .leftTextWrap {
      @include media-breakpoint-down(md) {
        padding-bottom: 25px;
      }
      .sub-title {
        font-size: 17px;
        font-family: "OpenSans_light";
        line-height: 23px;
        margin-bottom: 0;
        color: #120f29;
      }
      .main-title,
      .main-title p {
        color: #120f29;
        font-size: 35px;
        font-family: "PlayfairDisplay-Bold";
        line-height: 47px;
        max-width: 410px;
        @include media-breakpoint-down(lg) {
          font-size: 30px;
        }
        @include media-breakpoint-down(md) {
          line-height: 42px;
        }
        span {
          color: $secondary;
        }
      }
    }
  }
}
  • URL: /components/raw/text_blocks_element/text_blocks_element.scss
  • Filesystem Path: components/03-components/text_blocks_element/text_blocks_element.scss
  • Size: 1.5 KB
  • Handle: @text_blocks_element
  • Preview:
  • Filesystem Path: components/03-components/text_blocks_element/text_blocks_element.twig

There are no notes for this item.