Columns

The website will allow for a max of three columns within the content area when viewed on a conventional computer screen with a maximized browser. When minimized in width, the design takes on a new layout: the columns from left to right stack into one column. Columns can include a combination of images, video or WYSIWYG content. If an image or video is used in a one or two column layout, a yellow background design element will be added behind the column.

The image dimensions for this design are:

  • 1 Column min-width: 1,800 pixels
  • 2 or 3 Column min-width: 877 pixels

Available in: Gateway, Universal, Department and News Article pages.


Rendered HTML


One Column


Move Forward With Purpose

Our Story. Our Passion. Our Mission.

Students searching for intellectual stimulation and growth, critical thinkers seeking research opportunities, travellers at heart looking to learn abroad, and future leaders and citizens of the world who want to serve humankind, but don't yet know how N.C. A&T is the community that can help you succeed and improve the quality of life for all in the 21st century.

Text Link

Two Columns


Lorem Ipsum Dolor

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Callout Link

Lorem Ipsum Dolor

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Callout Link

Three Columns


Column 1 alt text

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Callout Link

Column 3 alt text

DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.

Callout Link

Column 3 alt text

DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.

Callout Link

HTML Source

Click the copy icon button to copy the HTML example code.


<!--One Column-->
<div class="columnWrap">
  <section aria-label="CTA Full Width Example" class="container ctaFullWidth">
      <div class="bgWrap">
          <div class="infoWrap" style="background-image: url('http://placehold.it/1800x500'); background-size: cover; background-position: 50% center;">
            <div class="infoWrapContent">
              <h2>Move Forward With Purpose</h2>
              <p class="subhead">Our Story. Our Passion. Our Mission.</p>
              <p>Students searching for intellectual stimulation and growth, critical thinkers seeking research  opportunities, travellers at heart looking to learn abroad, and future leaders and citizens of the world who want to serve humankind, but don't yet know how N.C. A&T is the community that can help you succeed and improve the quality of life for all in the 21st century.</p>
              <a href="#" class="callout">Text Link</a>
            </div>
            <div class="programBgDesign fillArea"></div>
            <div class="blueGradient fillArea"></div>
            <div class="deptGradient fillArea"></div>
          </div>
      </div>
  </section>
</div>

<!--Two Columns-->
<section aria-label="Two Columns" class="columns full right">
  <div class="wrapper">
    <div class="col6">
      <div class="content">
          <h2>Lorem Ipsum Dolor</h2>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p><a class="callout" href="#">Callout Link</a></p>
      </div>
    </div>
    <div class="col6">
      <div class="yellowStripesSquare">
        <a href="#">
          <img alt="Column 3 alt text" src="http://placehold.it/877x475&text=MIN-WIDTH: 877px" />
        </a>
      </div>
    </div>
  </div>
</section>
    
<section aria-label="Two Columns" class="columns full">
  <div class="wrapper">
    <div class="col6">
      <div class="yellowStripesSquare">
        <a href="#">
            <img alt="Column 3 alt text" src="http://placehold.it/877x475&text=MIN-WIDTH: 877px" />
        </a>
      </div>
    </div>
    <div class="col6">
      <div class="content">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p><a class="callout" href="#">Callout Link</a></p>
      </div>
    </div>
  </div>
</section>
                    
<!--Three Columns-->
<section aria-label="Three Columns" class="columns">
  <div class="wrapper">
    <div class="col4">
        <a href="#">
          <img alt="Column 1 alt text" src="http://placehold.it/877x475&text=MIN-WIDTH: 877px" />
        </a>
        <div class="content">
          <h3>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR</h3>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p><a class="callout" href="#">Callout Link</a></p>
        </div>
    </div>
    <div class="col4">
        <a href="#">
          <img alt="Column 2 alt text" src="http://placehold.it/877x475&text=MIN-WIDTH: 877px" />
        </a>
        <div class="content">
          <h3>DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM</h3>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
          <p><a class="callout" href="#">Callout Link</a></p>
        </div>
    </div>
    <div class="col4">
        <a href="#">
          <img alt="Column 3 alt text" src="http://placehold.it/877x475&text=MIN-WIDTH: 877px" />
        </a>
        <div class="content">
          <h3>DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM</h3>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
          <p><a class="callout" href="#">Callout Link</a></p>
        </div>
    </div>
  </div>
</section>