Missouri State University Pattern Library

Featured news

There are no notes for this item.

<div class="featured-news">
    <div class="ContentBlock call-to-action">
        <div class="eyebrow">
        </div>
        <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
        <p class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius ea ex adipisci.</p>
        <div class="link-bar">
            <ul class="container">
                <li>
                    <a href="#" class="button">Lorem ipsum</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="item feature">
            <a class="tile" href="#">
                <div class="image-container">
                    <img class="image" src="http://picsum.photos/1920/1080?random&#x3D;1" alt="">
                </div>
                <div class="container">
                    <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
                    <div class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat illo sequi maxime.</div>
                </div>
            </a>
        </div>
        <div class="item featurette">
            <div class="four-block">
                <div class="tiles">
                    <a class="tile" href="#">
                        <div class="image-container">
                            <img class="image" src="http://picsum.photos/1920/1080?random&#x3D;2" alt="Lorem ipsum dolor">
                        </div>
                        <div class="container">
                            <div class="eyebrow">Lorem ipsum dolor</div>
                            <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
                        </div>
                    </a>
                    <a class="tile" href="#">
                        <div class="image-container">
                            <img class="image" src="http://picsum.photos/1920/1080?random&#x3D;3" alt="Lorem ipsum dolor">
                        </div>
                        <div class="container">
                            <div class="eyebrow">Lorem ipsum dolor</div>
                            <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
                        </div>
                    </a>
                    <a class="tile" href="#">
                        <div class="image-container">
                            <img class="image" src="http://picsum.photos/1920/1080?random&#x3D;4" alt="Lorem ipsum dolor">
                        </div>
                        <div class="container">
                            <div class="eyebrow">Lorem ipsum dolor</div>
                            <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
                        </div>
                    </a>
                    <a class="tile" href="#">
                        <div class="image-container">
                            <img class="image" src="http://picsum.photos/1920/1080?random&#x3D;5" alt="Lorem ipsum dolor">
                        </div>
                        <div class="container">
                            <div class="eyebrow">Lorem ipsum dolor</div>
                            <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="featured-news">
  {{render '@call-to-action' cta merge=true}}
  <div class="container">
    <div class="item feature">
      {{render '@tile' feature}}
    </div>
    <div class="item featurette">
      {{render '@four-block' featurettes}}
    </div>
  </div>
</div>
 
{
  "cta": {
    "eyebrow": "Lorem ipsum dolor",
    "headline": "Lorem ipsum dolor sit amet consectetur",
    "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius ea ex adipisci.",
    "linkBar": {
      "link": [
        {
          "text": "Lorem ipsum",
          "url": "#"
        }
      ]
    }
  },
  "feature": {
    "image": {
      "src": "http://picsum.photos/1920/1080?random=1",
      "alt": null
    },
    "icon": {
      "src": "/images/test-icon.svg",
      "alt": null
    },
    "eyebrow": null,
    "headline": "Lorem ipsum dolor sit amet consectetur",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat illo sequi maxime.",
    "link": {
      "text": "Lorem ipsum",
      "url": "#"
    }
  },
  "featurettes": {
    "tiles": [
      {
        "tile": {
          "image": {
            "src": "http://picsum.photos/1920/1080?random=2",
            "alt": "Lorem ipsum dolor"
          },
          "eyebrow": "Lorem ipsum dolor",
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "link": {
            "url": "#"
          }
        }
      },
      {
        "tile": {
          "image": {
            "src": "http://picsum.photos/1920/1080?random=3",
            "alt": "Lorem ipsum dolor"
          },
          "eyebrow": "Lorem ipsum dolor",
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "link": {
            "url": "#"
          }
        }
      },
      {
        "tile": {
          "image": {
            "src": "http://picsum.photos/1920/1080?random=4",
            "alt": "Lorem ipsum dolor"
          },
          "eyebrow": "Lorem ipsum dolor",
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "link": {
            "url": "#"
          }
        }
      },
      {
        "tile": {
          "image": {
            "src": "http://picsum.photos/1920/1080?random=5",
            "alt": "Lorem ipsum dolor"
          },
          "eyebrow": "Lorem ipsum dolor",
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "link": {
            "url": "#"
          }
        }
      }
    ]
  }
}