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.
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.
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
Two items in a row
Three items in a row
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.
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.
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>
