Component Library

Multi Column Content: Default 

<div class="multi-column-content">
    <div class="multi-column-content__column">
        <div class="text-content">
            <h3>3-Column Heading Lorem</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
        </div>
    </div>
    <div class="multi-column-content__column">
        <div class="text-content">
            <h3>3-Column Heading Lorem</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
        </div>
    </div>
    <div class="multi-column-content__column">
        <div class="text-content">
            <h3>3-Column Heading Lorem</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
        </div>
    </div>
</div>
 
<div class="multi-column-content{% if columns|length < 3 %} multi-column-content-two-col{% endif %}">
  {% for column in columns %}
  <div class="multi-column-content__column">
    <div class="text-content">
      {{ column | raw }}
    </div>
  </div>
  {% endfor %}
</div>
 
{
  "columns": [
    "<h3>3-Column Heading Lorem</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>",
    "<h3>3-Column Heading Lorem</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>",
    "<h3>3-Column Heading Lorem</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>"
  ]
}
  • Content: 
    .multi-column-content {
  @include media-breakpoint-up(md) {
    display: flex;
    margin-right: rem(-40);
  }
  &.multi-column-content-two-col {
    @include media-breakpoint-up(md) {
      margin-right: rem(-100);
    }
  }
  &.multi-column-content--alternative {
    text-align: center;
    margin-top: rem(60);
    margin-bottom: rem(40);
    @include media-breakpoint-up(md) {
      display: flex;
      margin-right: rem(-74);
    }
  }
}
.multi-column-content__column {
  margin: 0 0 rem(40) 0;
  @include media-breakpoint-up(md) {
    flex: 1 1 0px;
    padding-right: rem(40);
    margin-bottom: 0;
  }
  .multi-column-content-two-col & {
    @include media-breakpoint-up(md) {
      padding-right: rem(100);
    }
  }
  .multi-column-content--alternative & {
    @include media-breakpoint-up(md) {
      padding-right: rem(74);
      position: relative;
    }
    &:after {
      @include media-breakpoint-up(md) {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: rem(2);
        border-right: rem(2) solid $off-white;
        right: rem(37);
      }
    }
    &:last-child {
      margin-bottom: 0;
      &:after {
        display: none;
      }
    }
  }
  .link-tertiary {
    font-size: rem(18);
    line-height: (25 / 18);
    padding: 0 rem(13);
    @include media-breakpoint-up(md) {
      padding: 0;
    }
    .arrow {
      bottom: rem(12);
    }
  }
  .text-content {
    margin-bottom: 0;
  }
}
  • URL: /components/raw/multi-column-content/_multi-column-content.scss
  • Filesystem Path: src/components/multi-column-content/_multi-column-content.scss
  • Size: 1.5 KB

Multi-Column Content

This is a custom component (no class prefix in place as it does not conflict with bootstrap)

  • There are two variations of the component. The default is unstructured in terms of the content input and multi-column-content--alternative is more structured and has fields for an icon/image (optional), title, description and tertiary link.
  • This component is set up to handle 2 and 3 columns with an additional class of .multi-column-text-two-col automatically added if 2 column to allow for custom gap spacing between columns
  • The default columns are set up to allow for raw html, so any markup (including images) could potentially be placed inside
  • The custom styles are imported into the index.scss file as @import "../components/multi-column-text/multi-column-text";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--multicolumn-text">.