Content Boxes

Content Boxes, version 1

New content boxes give you a subtle way to present information in a visually appealing area, which stands out from the rest of content. Each box is set to 30% of the content width so they can be used in groups of 3, 2, or used as one content piece. An image and / or a title can be used here as well.

Image of a smiling man

Aliquam viverra, magna vel vulputate dapibus, lacus felis eleifend arcu, sit amet faucibus arcu ex a lectus. Vivamus id ipsum quis elit rutrum auctor. Duis venenatis magna non elit aliquam blandit. Quisque a mattis odio, non pharetra ex.

There is no image, but there's a header

Aliquam viverra, magna vel vulputate dapibus, lacus felis eleifend arcu, sit amet faucibus arcu ex a lectus. Vivamus id ipsum quis elit rutrum auctor. Duis venenatis magna non elit aliquam blandit. Quisque a mattis odio, non pharetra ex.

Image of a smiling man

Aliquam viverra, magna vel vulputate dapibus, lacus felis eleifend arcu, sit amet faucibus arcu ex a lectus. Vivamus id ipsum quis elit rutrum auctor. Duis venenatis magna non elit aliquam blandit. Quisque a mattis odio, non pharetra ex.


Sample code

<div class="content-box">
  <img class="image" src="http://news.westernu.ca/wp-content/uploads/sites/2/2017/06/PREZWINNER_mills-340x220.jpg" />
  <p> Aliquam viverra, magna vel vulputate dapibus, lacus felis eleifend arcu, sit amet faucibus arcu ex a lectus.</p>
</div>

Content Boxes, version 2 (with a zoom-in effect on hover)

These content boxes can be lined from 1 to 4 in a row: 

One item in a row

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Two items in a row

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers. Learn how to strengthen your connections and build positive relationships with potential employers.

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Three items in a row

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Four items in a row

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers. Learn how to strengthen your connections and build positive relationships with potential employers.

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Five items in a row

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Homecoming Saturday

Learn how to strengthen your connections and build positive relationships with potential employers.

Code implementation

<div class="display-container">
<div class="display-box">
<div class="outerImageBackground">
<div class="imageBackground" style="background: url('http://alumni.westernu.ca/assets/img/homecoming/homecoming.jpg');"</div>
</div>
</div>
<h4>Homecoming Saturday</h4>
<a class="divLink" href="https://www.google.ca" rel="noopener" target="_blank"></a>
<div class="desc">
<p>Learn how to strengthen your connections and build positive relationships with potential employers.</p>
</div>
</div>