Card Layout: 2 Across
This pattern provides for a section of cards that will fit into most existing page designs. Be sure to deploy it at the “base” of your document outline as opposed to within a column or group.
Features
- A
headingblock set to the H2 level. - An example of gold highlighting applied to a few words within the heading.
- A two column layout featuring
cardswhich use thecard-linkblock for further details. - A dedicated call to action
buttonat the bottom of the card pattern.
Notes
- Need a three or four column layout instead? Duplicate an individual column to extend the pattern to as many columns as you need.
- Need a different kind of card? Substitute the included card for any other card pattern in the library.
Card Layout: 3 Across + Background
Building on the previous pattern, the 3 Across card pattern adds a third column of cards and wraps the entire layout in a background section block to be able to apply a background color or texture from the Unity Design System.
Features
- Everything in the 2-Across pattern above
- A
background-sectionblock to enable quick selection of the UDS background textures and other options.
Card Layout: 3 Across with Query Loop
The query loop pattern is also a three-across design but utilizes the query-loop block along with a number of other core blocks to build cards based on the contents of other content within your site.
Features
- A
query-loopblock initially set to gather data from the latest three items from thepostsarea of your site. - A
post-templateblock set to display the cards in a grid and to limit the grid to three columns. - A story
cardblock configured to use additional core blocks that gather data from the query and display it properly within the card context. - An
alertblock configured to display a message to the end user in the event that the query returns no data.
