<div class="basic-text">
    <h3 class="basic-text__title">Lorem Ipsum</h3>
    <div class="basic-text__columns">
        <div class="basic-text__column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat nibh. Nunc interdum, urna porta congue faucibus, augue neque volutpat felis, at vestibulum metus odio a elit. Aenean sodales odio id nisl finibus maximus. Proin accumsan sed enim
            eu accumsan. Quisque sit amet congue magna. Donec dapibus commodo orci, consectetur gravida elit aliquet eu. Ut at lectus turpis. Morbi eu interdum leo. Maecenas a egestas leo, fermentum finibus mi. Morbi volutpat elit id pretium blandit.
            Vestibulum volutpat turpis quis elit hendrerit, ut facilisis felis scelerisque.
        </div>
    </div>
</div>
<div class="basic-text">
  {{#if title}}
  <h3 class="basic-text__title">{{title}}</h3>
  {{/if}}
  <div class="basic-text__columns">
    {{#each columns}}
    <div class="basic-text__column">
      {{#each items}}
      {{{this}}}
      {{/each}}
    </div>
    {{/each}}
  </div>
</div>
{
  "title": "Lorem Ipsum",
  "columns": [
    {
      "items": [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat nibh. Nunc interdum, urna porta congue faucibus, augue neque volutpat felis, at vestibulum metus odio a elit. Aenean sodales odio id nisl finibus maximus.",
        "Proin accumsan sed enim eu accumsan. Quisque sit amet congue magna. Donec dapibus commodo orci, consectetur gravida elit aliquet eu. Ut at lectus turpis. Morbi eu interdum leo.",
        "Maecenas a egestas leo, fermentum finibus mi. Morbi volutpat elit id pretium blandit. Vestibulum volutpat turpis quis elit hendrerit, ut facilisis felis scelerisque."
      ]
    }
  ]
}
  • Content:
    .basic-text {
      p:not([class]) {
        margin: 10px 0;
        color: $color-dark;
        font-size: 1.4rem;
        line-height: 1.7rem;
      }
    
      a:not([class]) {
        transition: color $transition-standard;
        color: $color-dark;
        font-weight: $font-weight-bold;
        text-decoration: none;
    
        &:hover {
          color: $color-primary;
        }
      }
    
      li:not([class]) {
        margin: 0;
        color: $color-dark;
        font-size: 1.4rem;
        line-height: 1.7rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        p:not([class]) {
          margin: 30px 0;
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
    
        li:not([class]) {
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
      }
    }
    
    .basic-text__columns {
      @include breakpoint($breakpoint-md) {
        display: table;
        width: 100%;
        table-layout: fixed;
      }
    }
    
    .basic-text__column {
      padding: 0 $gutter-width-half;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-md) {
        display: table-cell;
      }
    }
    
    .basic-text__title {
      margin: 20px 0;
      color: $color-dark;
      font-size: 2.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 3px;
      line-height: 2.8rem;
      text-align: center;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        font-size: 2.7rem;
        line-height: 3.2rem;
      }
    }
    
  • URL: /components/raw/basic-text/basic-text.scss
  • Filesystem Path: src/components/01-elements/text-blocks/basic-text/basic-text.scss
  • Size: 1.3 KB
  • Handle: @basic-text
  • Preview:
  • Filesystem Path: src/components/01-elements/text-blocks/basic-text/basic-text.html

There are no notes for this item.