Missouri State University Pattern Library

Columns

There are no notes for this item.

<article class="ContentBlock RichText Columns2 Page">
    <h1>Two columns</h1>
    <p class="Intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque id illo, mollitia, eveniet facilis nostrum enim eius suscipit asperiores, voluptatum ad consectetur alias accusamus dolores officiis impedit. Est, molestiae laboriosam?</p>
    <h2>Heading two</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque ut deleniti mollitia aliquam suscipit ducimus, quod voluptatibus ad enim repellendus culpa distinctio eos id sapiente. Vel quis voluptatum suscipit atque!</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam laudantium sit, voluptas sequi praesentium maiores! Expedita, sint rerum, mollitia recusandae impedit reprehenderit error dolorum aspernatur modi, omnis aut illum voluptatem?</p>
    <h2>Heading two</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo sit aspernatur explicabo amet vero voluptatum nesciunt molestiae. Cupiditate nulla animi, in aliquid, voluptas quae pariatur natus quam dolor labore laudantium?</p>
    <h3>Heading three</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ipsum modi explicabo, rerum esse fuga sapiente. Ratione, natus praesentium veniam autem esse nesciunt sed, voluptates minima perspiciatis recusandae hic pariatur.</p>
    <ul>
        <li>Lorem ipsum dolor sit amet consectetur.</li>
        <li>Lorem ipsum dolor sit amet consectetur.</li>
        <li>Lorem ipsum dolor sit amet consectetur.</li>
    </ul>
</article>
<article class="ContentBlock RichText Columns3 Page">
    <h1>Three columns</h1>
    <p class="Intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque id illo, mollitia, eveniet facilis nostrum enim eius suscipit asperiores, voluptatum ad consectetur alias accusamus dolores officiis impedit. Est, molestiae laboriosam?</p>
    <h2>Heading two</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque ut deleniti mollitia aliquam suscipit ducimus, quod voluptatibus ad enim repellendus culpa distinctio eos id sapiente. Vel quis voluptatum suscipit atque!</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam laudantium sit, voluptas sequi praesentium maiores! Expedita, sint rerum, mollitia recusandae impedit reprehenderit error dolorum aspernatur modi, omnis aut illum voluptatem?</p>
    <h2>Heading two</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo sit aspernatur explicabo amet vero voluptatum nesciunt molestiae. Cupiditate nulla animi, in aliquid, voluptas quae pariatur natus quam dolor labore laudantium?</p>
    <h3>Heading three</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ipsum modi explicabo, rerum esse fuga sapiente. Ratione, natus praesentium veniam autem esse nesciunt sed, voluptates minima perspiciatis recusandae hic pariatur.</p>
    <ul>
        <li>Lorem ipsum dolor sit amet consectetur.</li>
        <li>Lorem ipsum dolor sit amet consectetur.</li>
        <li>Lorem ipsum dolor sit amet consectetur.</li>
    </ul>
</article>
 
{{#> @rich-text pageClass='Columns2'}}
    {{#*inline 'freeformContent'}}
        <h1>Two columns</h1>
        <p class="Intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque id illo, mollitia, eveniet facilis nostrum enim eius suscipit asperiores, voluptatum ad consectetur alias accusamus dolores officiis impedit. Est, molestiae laboriosam?</p>
        <h2>Heading two</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque ut deleniti mollitia aliquam suscipit ducimus, quod voluptatibus ad enim repellendus culpa distinctio eos id sapiente. Vel quis voluptatum suscipit atque!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam laudantium sit, voluptas sequi praesentium maiores! Expedita, sint rerum, mollitia recusandae impedit reprehenderit error dolorum aspernatur modi, omnis aut illum voluptatem?</p>
        <h2>Heading two</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo sit aspernatur explicabo amet vero voluptatum nesciunt molestiae. Cupiditate nulla animi, in aliquid, voluptas quae pariatur natus quam dolor labore laudantium?</p>
        <h3>Heading three</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ipsum modi explicabo, rerum esse fuga sapiente. Ratione, natus praesentium veniam autem esse nesciunt sed, voluptates minima perspiciatis recusandae hic pariatur.</p>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
        </ul>
    {{/inline}}
{{/@rich-text}}
{{#> @rich-text pageClass='Columns3'}}
    {{#*inline 'freeformContent'}}
        <h1>Three columns</h1>
        <p class="Intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque id illo, mollitia, eveniet facilis nostrum enim eius suscipit asperiores, voluptatum ad consectetur alias accusamus dolores officiis impedit. Est, molestiae laboriosam?</p>
        <h2>Heading two</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque ut deleniti mollitia aliquam suscipit ducimus, quod voluptatibus ad enim repellendus culpa distinctio eos id sapiente. Vel quis voluptatum suscipit atque!</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam laudantium sit, voluptas sequi praesentium maiores! Expedita, sint rerum, mollitia recusandae impedit reprehenderit error dolorum aspernatur modi, omnis aut illum voluptatem?</p>
        <h2>Heading two</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo sit aspernatur explicabo amet vero voluptatum nesciunt molestiae. Cupiditate nulla animi, in aliquid, voluptas quae pariatur natus quam dolor labore laudantium?</p>
        <h3>Heading three</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ipsum modi explicabo, rerum esse fuga sapiente. Ratione, natus praesentium veniam autem esse nesciunt sed, voluptates minima perspiciatis recusandae hic pariatur.</p>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
            <li>Lorem ipsum dolor sit amet consectetur.</li>
        </ul>
    {{/inline}}
{{/@rich-text}}
 
/* No context defined for this component. */