Block Layout

<>
  <div className="Grid u-marginBottomSmall">
    <div className="u-sizeFull lg:u-size6of12">
      <div className="u-backgroundPrimaryLight">
        1 of 2
      </div>
    </div>
    <div className="u-sizeFull lg:u-size6of12 u-paddingLeftNone">
      <div className="u-backgroundPositiveLight">
        1 of 2
      </div>
    </div>
  </div>
  <div className="Grid Grid--withoutGutter u-marginBottomSmall">
    <div className="u-sizeFull lg:u-size6of12">
      <div className="u-backgroundPrimaryLight">
        1 of 2
      </div>
    </div>
    <div className="u-sizeFull lg:u-size6of12">
      <div className="u-backgroundPositiveLight">
        1 of 2
      </div>
    </div>
  </div>

  <div className="Grid u-marginBottomSmall">
    <div className="u-sizeFull lg:u-size4of12">
      <div className="u-backgroundPrimaryLight">
        1 of 3
      </div>
    </div>
    <div className="u-sizeFull lg:u-size4of12">
      <div className="u-backgroundPositiveLight">
        1 of 3
      </div>
    </div>
    <div className="u-sizeFull lg:u-size4of12">
      <div className="u-backgroundAccentLight">
        1 of 3
      </div>
    </div>
  </div>
  <div className="Grid Grid--withoutGutter u-marginBottomSmall">
    <div className="u-sizeFull lg:u-size4of12">
      <div className="u-backgroundPrimaryLight">
        1 of 3
      </div>
    </div>
    <div className="u-sizeFull lg:u-size4of12">
      <div className="u-backgroundPositiveLight">
        1 of 3
      </div>
    </div>
    <div className="u-sizeFull lg:u-size4of12">
      <div className="u-backgroundAccentLight">
        1 of 3
      </div>
    </div>
  </div>

  <div className="Grid u-marginBottomSmall">
    <div className="u-sizeFull lg:u-size3of12">
      <div className="u-backgroundPrimaryLight">
        1 of 4
      </div>
    </div>
    <div className="u-sizeFull lg:u-size3of12 u-paddingLeftNone">
      <div className="u-backgroundPositiveLight">
        1 of 4
      </div>
    </div>
    <div className="u-sizeFull lg:u-size3of12">
      <div className="u-backgroundAccentLight">
        1 of 4
      </div>
    </div>
    <div className="u-sizeFull lg:u-size3of12 u-paddingLeftNone">
      <div className="u-backgroundLighter">
        1 of 4
      </div>
    </div>
  </div>
  <div className="Grid Grid--withoutGutter u-marginBottomSmall">
    <div className="u-sizeFull lg:u-size3of12">
      <div className="u-backgroundPrimaryLight">
        1 of 4
      </div>
    </div>
    <div className="u-sizeFull lg:u-size3of12 u-paddingLeftNone">
      <div className="u-backgroundPositiveLight">
        1 of 4
      </div>
    </div>
    <div className="u-sizeFull lg:u-size3of12">
      <div className="u-backgroundAccentLight">
        1 of 4
      </div>
    </div>
    <div className="u-sizeFull lg:u-size3of12 u-paddingLeftNone">
      <div className="u-backgroundLighter">
        1 of 4
      </div>
    </div>
  </div>
</>

<div className="Grid">
  <div className="u-sizeFull lg:u-size4of12 u-marginBottomSmall">
    <div className="u-border u-roundedLarge u-backgroundWhite u-paddingSmall u-textCenter u-heightFull">
      <img
        src="holder.js/200px140"
        className="u-maxWidthFull u-marginTopSmall u-marginBottomLarge"
        alt=""
      />
      <h3 className="u-text500 u-fontMedium">
        Conversational BI on Data Warehouses in Retail
      </h3>
    </div>
  </div>
  <div className="u-sizeFull lg:u-size4of12 u-marginBottomSmall">
    <div className="u-border u-roundedLarge u-backgroundWhite u-paddingSmall u-textCenter u-heightFull">
      <img
         src="holder.js/200px140"
        className="u-maxWidthFull u-marginTopSmall u-marginBottomLarge"
        alt=""
      />
      <h3 className="u-text500 u-fontMedium">
        NLP chatbots for CRM Databases
      </h3>
    </div>
  </div>
  <div className="u-sizeFull lg:u-size4of12 u-marginBottomSmall">
    <div className="u-border u-roundedLarge u-backgroundWhite u-paddingSmall u-textCenter u-heightFull">
      <img
        src="holder.js/200px140"
        className="u-maxWidthFull u-marginTopSmall u-marginBottomLarge"
        alt=""
      />
      <h3 className="u-text500 u-fontMedium">
        Chat with Sales &amp; Marketing Data
      </h3>
    </div>
  </div>
</div>

<>
  <div className="u-flex u-marginBottomSmall">
    <div className="u-flexShrink0 u-paddingRightSmall u-backgroundPrimaryLight">
      <div style={{ width: 64 }}>1</div>
    </div>
    <div className="u-flexGrow1 u-backgroundPositiveLight">2</div>
  </div>
  <div className="u-flex u-marginBottomSmall">
    <div className="u-flexGrow1 u-backgroundPositiveLight">1</div>
    <div className="u-flexShrink0 u-paddingLeftSmall u-backgroundPrimaryLight">
      <div style={{ width: 128 }}>2</div>
    </div>
  </div>
</>

<div className="u-flex">
  <div className="u-flexShrink0 u-paddingRightSmall">
    <Avatar size="extraLarge" src="holder.js/100px64?text=64x64" />
  </div>
  <div className="u-flexGrow1">
    <div className="u-marginBottomExtraSmall">
      <strong>Patrick</strong>
      <span className="u-marginLeftExtraSmall u-textLight">
        24 minutes ago
      </span>
    </div>
    <div className="u-textGray">
      Now you can freely change the values inside E3 and G3 and the
      Conditional Formatting rule will be automatically applied. Another
      way of doing this is to rename the limit cells E3 and G3. On the
      Formula Bar.
    </div>
  </div>
</div>

<div style={{ height: 320 }}>
  <div className="u-flex u-flexColumn u-heightFull u-border u-paddingExtraSmall">
    <div className="u-border u-paddingExtraSmall">Top</div>
    <div className="u-border u-paddingExtraSmall u-flexGrow1 u-overflowVerticalAuto u-webkitScrollbar">
      <div style={{ height: 400 }}>Middle</div>
    </div>
    <div className="u-border u-paddingExtraSmall">Bottom</div>
  </div>
</div>

<div style={{ height: 320 }}>
  <div className="u-flex u-flexColumn u-heightFull u-border u-paddingExtraSmall">
    <div className="u-border u-paddingExtraSmall u-flexGrow1 u-overflowVerticalAuto u-webkitScrollbar">
      <div style={{ height: 400 }}>Top</div>
    </div>
    <div className="u-border u-paddingExtraSmall u-flexGrow1 u-overflowVerticalAuto u-webkitScrollbar">
      <div style={{ height: 400 }}>Bottom</div>
    </div>
  </div>
</div>