Skip to main content

Multi column

Multi column is used to lay out content across multiple columns on the page grid in a way that it dynamically reflows across different viewports.

Example

Microsoft Windows 10 Creators Event

Empowering creativity with the Windows 10 Creators Update and Surface Studio

By Terry Myerson / Executive Vice President, WDP

With Windows 10, our goal is to have the effect of the Gutenberg Press on this next generation of computing, enabling 3D creativity, mixed reality, and eSports & game broadcasting for everyone. At our core, we believe each of us are creators. I’m personally inspired by creators who use technology to build a better world for each of us, who build communities with technology, and who develop revolutionary new ways to educate all types of students.

However you choose to create, we are building Windows for each of you. We want to help you make your mark on the world and for Windows to be the place you love to create and play. From the beginning, our Surface journey has been about empowering people to work and create in new ways.

It led us to create the first tablet that could truly replace your laptop with Surface Pro and to redefine the ultimate laptop with Surface Book. We believe there is a special alchemy when a device and software pair perfectly to create something new – a profound experience that can create an entirely new category. Today, we unveiled our next new category – an all new Surface device, designed for creators and professionals.

Surface Studio turns your desk into a creative studio. It is a new class of device that transforms from a desktop PC into a powerful digital canvas, unlocking a more natural and immersive way to create on the thinnest display ever built. With a 4.5k ultra HD screen, Surface Studio delivers 63% more pixels than a state-of-the-art 4K TV. Surface Studio works beautifully with pen, touch, and the new Surface Dial.

Surface Dial is a new input device designed for the creative process, enabling you to work with both of your hands. It integrates with Windows 10 to work with any Surface device for a faster and more intuitive way to scroll, zoom, and navigate. It also enables a set of unique experiences exclusive to Surface Studio, such as app-specific digital tools that allow you to quickly access shortcuts and move seamlessly through your workflow.

Surface Book with Performance Base, the most powerful Surface Book yet, packs 16 hours of battery life into the same sleek, versatile design people love. It has more than twice the GPU processing power than the original Surface Book. No other laptop combines this combination of battery life, performance and pixels, in as lightweight a package.

With Microsoft HoloLens, rich 3D content can break free from your screen and Microsoft Edge is the first browser to fully embrace 3D across devices. Showcasing the potential of this level of 3D immersion, we demo’d a prototype Houzz site where you can select furniture in the site and visualize it in your home before you buy it.

Powerful and affordable virtual reality is coming to everyone with the Creators Update. HP, Dell, Lenovo, ASUS, and Acer will ship the first VR headsets capable of mixed reality with the Windows 10 Creators Update. And these accessories will be the first and only with inside-out, six-degrees of freedom. Unlike every other virtual reality headset in the market today, there will be zero need for a separate room and complicated setup. While the less immersive VR accessories today cost more than $500, or require a new expensive device, these accessories will start at just $299 and work with affordable laptops and PCs.

Multi column with five columns on a default theme

Best practices

Use multi column to distribute text content uniformly up to 5 columns. Since this content would reflow, it never gets truncated at any viewport. However, the module height may change to ensure that contents gets distributed equally across columns.

Do

  • Consider in advance the impact of long passages on smaller viewports. While our type sizes are responsive, content may reflow into a single column at the smallest viewport making it overwhelming for users to read.
  • Include a minimum of two list items while using lists in multi column.

Don’t

  • Try to position the heading in a column that’s different from that of the paragraph text it accompanies. Headings and paragraphs stick together when used within multi column.
  • Use content hacks to force visual alignment for a specific screen size, as this will likely result in content breaks for all other viewports as soon as the content begins to reflow.

Also known as

Text reflow

Related

Heading
Subheading
Paragraph
Caption
List

Options

  • The number of columns which can be accommodated per viewport are as listed below. For example, content that is laid out to be 5 columns at VP6 will reflow into 4 columns at VP5, 3 columns at VP4 & VP3, 2 columns at VP2, and a single column at VP1.
Screen size 1 Column 2 Column 3 Column 4 Column 5 Column
VP6
VP5
VP4
VP3
VP2
VP1

Specifications

Browser support IE10+, Edge, Safari, Firefox, and Chrome

Development

  • Schema definition: The multi-column schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Paragraphs, Headings and Caption

Heading 1

Subheading

Paragraph 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, libero nec commodo sodales, purus lorem tempor risus, vitae imperdiet erat nisi sit amet augue. Morbi urna ante, elementum at dolor vitae, luctus fringilla purus. Maecenas dolor risus, rhoncus ut ultricies et, tempor quis sem. Suspendisse ac tellus tellus. Cras maximus et massa non tempor. Morbi sed nibh elementum, tempus massa a, aliquet sem. Pellentesque orci elit, molestie ac enim at, lacinia auctor ante.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.

Paragraph 4. Integer gravida venenatis nisl, eget gravida diam vehicula nec. In fringilla mattis tristique. Phasellus ex urna, ultricies a felis eget, suscipit auctor risus. Aliquam eleifend semper dapibus. Duis a sollicitudin justo. Ut sed enim consequat erat dapibus laoreet. Sed ut elit nec odio feugiat laoreet. Aenean ut convallis justo. Ut faucibus a mauris consectetur convallis. Sed auctor libero sit amet lectus eleifend venenatis.

Paragraph 5. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.

Paragraph 6. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur.

Caption level one

<div data-grid="col-12 pad-12x" class="m-multi-column f-columns-3">
    <div>
        <h2 class="c-heading-3">Heading 1</h2>
        <p class="c-heading-3">Subheading</p>
        <p class="c-paragraph-2">Paragraph 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, libero nec commodo sodales, purus lorem tempor risus, vitae imperdiet erat nisi sit amet augue. Morbi urna ante, elementum at dolor vitae, luctus fringilla purus.
            Maecenas dolor risus, rhoncus ut ultricies et, tempor quis sem. Suspendisse ac tellus tellus. Cras maximus et massa non tempor. Morbi sed nibh elementum, tempus massa a, aliquet sem. Pellentesque orci elit, molestie ac enim at, lacinia auctor
            ante.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus
            et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas
            vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.</p>
        <p class="c-paragraph-4">Paragraph 4. Integer gravida venenatis nisl, eget gravida diam vehicula nec. In fringilla mattis tristique. Phasellus ex urna, ultricies a felis eget, suscipit auctor risus. Aliquam eleifend semper dapibus. Duis a sollicitudin justo. Ut sed enim
            consequat erat dapibus laoreet. Sed ut elit nec odio feugiat laoreet. Aenean ut convallis justo. Ut faucibus a mauris consectetur convallis. Sed auctor libero sit amet lectus eleifend venenatis.</p>
        <p class="c-paragraph-4">Paragraph 5. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus
            et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas
            vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.</p>
        <p class="c-paragraph-4">Paragraph 6. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Aenean lacus enim, iaculis ac vestibulum ut,
            egestas et ante. Suspendisse dictum aliquam convallis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur.</p>
        <p class="c-caption-1">Caption level one</p>
    </div>
</div>

two-column

This is a two-column Heading

Subheading

Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, libero nec commodo sodales, purus lorem tempor risus, vitae imperdiet erat nisi sit amet augue. Morbi urna ante, elementum at dolor vitae, luctus fringilla purus. Maecenas dolor risus, rhoncus ut ultricies et, tempor quis sem. Suspendisse ac tellus tellus. Cras maximus et massa non tempor. Morbi sed nibh elementum, tempus massa a, aliquet sem. Pellentesque orci elit, molestie ac enim at, lacinia auctor ante.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.

Paragraph 3. Integer gravida venenatis nisl, eget gravida diam vehicula nec. In fringilla mattis tristique. Phasellus ex urna, ultricies a felis eget, suscipit auctor risus. Aliquam eleifend semper dapibus. Duis a sollicitudin justo. Ut sed enim consequat erat dapibus laoreet. Sed ut elit nec odio feugiat laoreet. Aenean ut convallis justo. Ut faucibus a mauris consectetur convallis. Sed auctor libero sit amet lectus eleifend venenatis.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur.

Caption level one

<div data-grid="col-12 pad-12x" class="m-multi-column f-columns-2">
    <div>
        <h1 class="c-heading-1">This is a two-column Heading</h1>
        <h2 class="c-subheading-2">Subheading</h2>
        <p class="c-paragraph-3">Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, libero nec commodo sodales, purus lorem tempor risus, vitae imperdiet erat nisi sit amet augue. Morbi urna ante, elementum at dolor vitae, luctus fringilla purus.
            Maecenas dolor risus, rhoncus ut ultricies et, tempor quis sem. Suspendisse ac tellus tellus. Cras maximus et massa non tempor. Morbi sed nibh elementum, tempus massa a, aliquet sem. Pellentesque orci elit, molestie ac enim at, lacinia auctor
            ante.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus
            et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas
            vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.</p>
        <p class="c-paragraph-3">Paragraph 3. Integer gravida venenatis nisl, eget gravida diam vehicula nec. In fringilla mattis tristique. Phasellus ex urna, ultricies a felis eget, suscipit auctor risus. Aliquam eleifend semper dapibus. Duis a sollicitudin justo. Ut sed enim
            consequat erat dapibus laoreet. Sed ut elit nec odio feugiat laoreet. Aenean ut convallis justo. Ut faucibus a mauris consectetur convallis. Sed auctor libero sit amet lectus eleifend venenatis.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus
            et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas
            vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Aenean lacus enim, iaculis ac vestibulum ut,
            egestas et ante. Suspendisse dictum aliquam convallis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur.</p>
        <p class="c-caption-3">Caption level one</p>
    </div>
</div>

three-column

This is a 3 column Heading

Subheading

Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, libero nec commodo sodales, purus lorem tempor risus, vitae imperdiet erat nisi sit amet augue. Morbi urna ante, elementum at dolor vitae, luctus fringilla purus. Maecenas dolor risus, rhoncus ut ultricies et, tempor quis sem. Suspendisse ac tellus tellus. Cras maximus et massa non tempor. Morbi sed nibh elementum, tempus massa a, aliquet sem. Pellentesque orci elit, molestie ac enim at, lacinia auctor ante.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.

Paragraph 3. Integer gravida venenatis nisl, eget gravida diam vehicula nec. In fringilla mattis tristique. Phasellus ex urna, ultricies a felis eget, suscipit auctor risus. Aliquam eleifend semper dapibus. Duis a sollicitudin justo. Ut sed enim consequat erat dapibus laoreet. Sed ut elit nec odio feugiat laoreet. Aenean ut convallis justo. Ut faucibus a mauris consectetur convallis. Sed auctor libero sit amet lectus eleifend venenatis.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur.

Caption level one.

<div data-grid="col-12 pad-12x" class="m-multi-column f-columns-3">
    <div>
        <h1 class="c-heading-1">This is a 3 column Heading</h1>
        <h2 class="c-subheading-2">Subheading</h2>
        <p class="c-paragraph-3">Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, libero nec commodo sodales, purus lorem tempor risus, vitae imperdiet erat nisi sit amet augue. Morbi urna ante, elementum at dolor vitae, luctus fringilla purus.
            Maecenas dolor risus, rhoncus ut ultricies et, tempor quis sem. Suspendisse ac tellus tellus. Cras maximus et massa non tempor. Morbi sed nibh elementum, tempus massa a, aliquet sem. Pellentesque orci elit, molestie ac enim at, lacinia auctor
            ante.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus
            et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas
            vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.</p>
        <p class="c-paragraph-3">Paragraph 3. Integer gravida venenatis nisl, eget gravida diam vehicula nec. In fringilla mattis tristique. Phasellus ex urna, ultricies a felis eget, suscipit auctor risus. Aliquam eleifend semper dapibus. Duis a sollicitudin justo. Ut sed enim
            consequat erat dapibus laoreet. Sed ut elit nec odio feugiat laoreet. Aenean ut convallis justo. Ut faucibus a mauris consectetur convallis. Sed auctor libero sit amet lectus eleifend venenatis.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus
            et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas
            vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Aenean lacus enim, iaculis ac vestibulum ut,
            egestas et ante. Suspendisse dictum aliquam convallis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur.</p>
        <p class="c-caption-3">Caption level one.</p>
    </div>
</div>

four-column

This is a four-column Heading

Subheading

Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, libero nec commodo sodales, purus lorem tempor risus, vitae imperdiet erat nisi sit amet augue. Morbi urna ante, elementum at dolor vitae, luctus fringilla purus. Maecenas dolor risus, rhoncus ut ultricies et, tempor quis sem. Suspendisse ac tellus tellus. Cras maximus et massa non tempor. Morbi sed nibh elementum, tempus massa a, aliquet sem. Pellentesque orci elit, molestie ac enim at, lacinia auctor ante.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.

Paragraph 3. Integer gravida venenatis nisl, eget gravida diam vehicula nec. In fringilla mattis tristique. Phasellus ex urna, ultricies a felis eget, suscipit auctor risus. Aliquam eleifend semper dapibus. Duis a sollicitudin justo. Ut sed enim consequat erat dapibus laoreet. Sed ut elit nec odio feugiat laoreet. Aenean ut convallis justo. Ut faucibus a mauris consectetur convallis. Sed auctor libero sit amet lectus eleifend venenatis.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur.

Caption level one.

<div data-grid="col-12 pad-12x" class="m-multi-column f-columns-4">
    <div>
        <h1 class="c-heading-1">This is a four-column Heading</h1>
        <h2 class="c-subheading-2">Subheading</h2>
        <p class="c-paragraph-3">Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, libero nec commodo sodales, purus lorem tempor risus, vitae imperdiet erat nisi sit amet augue. Morbi urna ante, elementum at dolor vitae, luctus fringilla purus.
            Maecenas dolor risus, rhoncus ut ultricies et, tempor quis sem. Suspendisse ac tellus tellus. Cras maximus et massa non tempor. Morbi sed nibh elementum, tempus massa a, aliquet sem. Pellentesque orci elit, molestie ac enim at, lacinia auctor
            ante.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus
            et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas
            vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.</p>
        <p class="c-paragraph-3">Paragraph 3. Integer gravida venenatis nisl, eget gravida diam vehicula nec. In fringilla mattis tristique. Phasellus ex urna, ultricies a felis eget, suscipit auctor risus. Aliquam eleifend semper dapibus. Duis a sollicitudin justo. Ut sed enim
            consequat erat dapibus laoreet. Sed ut elit nec odio feugiat laoreet. Aenean ut convallis justo. Ut faucibus a mauris consectetur convallis. Sed auctor libero sit amet lectus eleifend venenatis.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus
            et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas
            vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Aenean lacus enim, iaculis ac vestibulum ut,
            egestas et ante. Suspendisse dictum aliquam convallis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur.</p>
        <p class="c-caption-3">Caption level one.</p>
    </div>
</div>

five-column

This is a five-column Heading

Subheading

Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, libero nec commodo sodales, purus lorem tempor risus, vitae imperdiet erat nisi sit amet augue. Morbi urna ante, elementum at dolor vitae, luctus fringilla purus. Maecenas dolor risus, rhoncus ut ultricies et, tempor quis sem. Suspendisse ac tellus tellus. Cras maximus et massa non tempor. Morbi sed nibh elementum, tempus massa a, aliquet sem. Pellentesque orci elit, molestie ac enim at, lacinia auctor ante.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.

Paragraph 3. Integer gravida venenatis nisl, eget gravida diam vehicula nec. In fringilla mattis tristique. Phasellus ex urna, ultricies a felis eget, suscipit auctor risus. Aliquam eleifend semper dapibus. Duis a sollicitudin justo. Ut sed enim consequat erat dapibus laoreet. Sed ut elit nec odio feugiat laoreet. Aenean ut convallis justo. Ut faucibus a mauris consectetur convallis. Sed auctor libero sit amet lectus eleifend venenatis.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.

Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur.

Caption level one.

<div data-grid="col-12 pad-12x" class="m-multi-column f-columns-5">
    <div>
        <h1 class="c-heading-1">This is a five-column Heading</h1>
        <h2 class="c-subheading-2">Subheading</h2>
        <p class="c-paragraph-3">Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, libero nec commodo sodales, purus lorem tempor risus, vitae imperdiet erat nisi sit amet augue. Morbi urna ante, elementum at dolor vitae, luctus fringilla purus.
            Maecenas dolor risus, rhoncus ut ultricies et, tempor quis sem. Suspendisse ac tellus tellus. Cras maximus et massa non tempor. Morbi sed nibh elementum, tempus massa a, aliquet sem. Pellentesque orci elit, molestie ac enim at, lacinia auctor
            ante.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus
            et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas
            vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.</p>
        <p class="c-paragraph-3">Paragraph 3. Integer gravida venenatis nisl, eget gravida diam vehicula nec. In fringilla mattis tristique. Phasellus ex urna, ultricies a felis eget, suscipit auctor risus. Aliquam eleifend semper dapibus. Duis a sollicitudin justo. Ut sed enim
            consequat erat dapibus laoreet. Sed ut elit nec odio feugiat laoreet. Aenean ut convallis justo. Ut faucibus a mauris consectetur convallis. Sed auctor libero sit amet lectus eleifend venenatis.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Pellentesque habitant morbi tristique senectus
            et netus et malesuada fames ac turpis egestas. Nam quis facilisis turpis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur. Maecenas
            vehicula orci sed porta condimentum. Aenean lacus enim, iaculis ac vestibulum ut, egestas et ante. Suspendisse dictum aliquam convallis.</p>
        <p class="c-paragraph-3">Paragraph 3. Nunc laoreet et sem hendrerit finibus. Aliquam auctor fringilla ligula et tristique. Sed molestie, erat ac dignissim tincidunt, mi eros aliquet neque, vel facilisis risus magna ac metus. Aenean lacus enim, iaculis ac vestibulum ut,
            egestas et ante. Suspendisse dictum aliquam convallis. Vivamus id consectetur lacus. Vestibulum feugiat nisi ac massa convallis, eget ultricies odio imperdiet. Suspendisse venenatis sed eros sit amet efficitur.</p>
        <p class="c-caption-3">Caption level one.</p>
    </div>
</div>

Links

<div data-grid="col-12 pad-12x" class="m-multi-column f-columns-4">
    <ul class="c-list f-bare">
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 1</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 2</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 3</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 4</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 5</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 6</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 7</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 8</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 9</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 10</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 11</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 12</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 13</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 14</a>
        </li>
        <li>
            <a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink 15</a>
        </li>
    </ul>
</div>