Social Collage
SCSS Location: /styles/scss/partial/_social-collage.scss- Status: Design
- Status: Development
- Status: Documentation
Description
A component displaying a grid layout of 5 blocks, each comprised of an image and an optional link, social icon, and caption.
Guidelines
At mobile size the grid blocks will stack in one column. Captions, if present, will display for all images.
Between mobile and tablet size, the grid will be arranged with one full-width block at the top, and a 2x2 grid of blocks below. Captions on images in the 2x2 grid will not be displayed.
Above tablet size, the grid will be arranged with 2 columns of equal height: the first column consisting of one block taking up 50% width, and a 2x2 grid of blocks taking up 50% width in the second column. Captions on images in the 2x2 grid will not be displayed.
If no link is provided for the social collage block, no hover or focus state should be applied to the block when interacted with.
Usage
Can be used within any page that leverages flexible content.
Social collage links will open in a new tab.
