Missouri State University Pattern Library

Sample grids with content

No notes defined.

<section>
    <div class="grid_container">
        <div class="grid_row">
            <div class="grid_half">
                <div class="ContentBlock important-link">
                    <!-- Log the context received by the partial to see what it is receiving -->
                    <a href="https://www.missouristate.edu/">
                        <div class="eyebrow">Important Links 1</div>
                        <div class="headline">Important Links 1</div>
                    </a>
                </div>

            </div>
            <div class="grid_half">
                <div class="ContentBlock important-link">
                    <!-- Log the context received by the partial to see what it is receiving -->
                    <a href="https://www.missouristate.edu/">
                        <div class="eyebrow">Important Links 2</div>
                        <div class="headline">Important Links 2</div>
                    </a>
                </div>

            </div>
        </div>
    </div>
</section>

<section>
    <div class="grid_container">
        <div class="grid_row">
            <div class="grid_third">
                <div class="ContentBlock important-link">
                    <!-- Log the context received by the partial to see what it is receiving -->
                    <a href="https://www.missouristate.edu/">
                        <div class="eyebrow">Important Links 1</div>
                        <div class="headline">Important Links 1</div>
                    </a>
                </div>

            </div>
            <div class="grid_third">
                <div class="ContentBlock important-link">
                    <!-- Log the context received by the partial to see what it is receiving -->
                    <a href="https://www.missouristate.edu/">
                        <div class="eyebrow">Important Links 2</div>
                        <div class="headline">Important Links 2</div>
                    </a>
                </div>

            </div>
            <div class="grid_third">
                <div class="ContentBlock important-link">
                    <!-- Log the context received by the partial to see what it is receiving -->
                    <a href="https://www.missouristate.edu/">
                        <div class="eyebrow">Important Links 3</div>
                        <div class="headline">Important Links 3</div>
                    </a>
                </div>

            </div>
        </div>
    </div>
</section>
 
{{!-- 50-50 --}}
<section>
  <div class="grid_container">
    <div class="grid_row">
      {{#each col50}}
        <div class="grid_half">
          {{render '@important-link' this}}
        </div>
      {{/each}}
    </div>
  </div>
</section>


{{!-- 33-33-33 --}}
<section>
  <div class="grid_container">
    <div class="grid_row">
      {{#each col33}}
        <div class="grid_third">
          {{render '@important-link' this}}
        </div>
      {{/each}}
    </div>
  </div>
</section>
 
{
  "col50": [
    {
      "eyebrow": "Important Links 1",
      "headline": "Important Links 1",
      "url": "https://www.missouristate.edu/"
    },
    {
      "eyebrow": "Important Links 2",
      "headline": "Important Links 2",
      "url": "https://www.missouristate.edu/"
    }
  ],
  "col33": [
    {
      "eyebrow": "Important Links 1",
      "headline": "Important Links 1",
      "url": "https://www.missouristate.edu/"
    },
    {
      "eyebrow": "Important Links 2",
      "headline": "Important Links 2",
      "url": "https://www.missouristate.edu/"
    },
    {
      "eyebrow": "Important Links 3",
      "headline": "Important Links 3",
      "url": "https://www.missouristate.edu/"
    }
  ]
}