Boosted Innovation Cup and Masonry

Integrate Masonry with the Boosted Innovation Cup grid system and cards component.

Masonry is not included in Boosted Innovation Cup. Add it by including the JavaScript plugin manually, or using a CDN like so:


<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
  

By adding data-masonry='{"percentPosition": true }' to the .row wrapper, we can combine the powers of Boosted's responsive grid and Masonry's positioning.


PlaceholderImage cap
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

A well-known quote, contained in a blockquote element.

PlaceholderImage cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

A well-known quote, contained in a blockquote element.

Card title

This card has a regular title and short paragraph of text below it.

Last updated 3 mins ago

PlaceholderCard image

A well-known quote, contained in a blockquote element.

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago