Card Deck
Need to build equal height columns of content? Flowing masonry style layouts? Card Deck allows you to do both using Foundry’s Cards stack.
- Easily add and re-arrange Card stacks within your Card Deck
- Choose from a Deck, Flow or Group style layout
Example
Deck
An example of the Card Deck stack’s equal height columns layout called Deck. Each of the three columns will be equal in height, and that height is based off of the tallest Card stack in the layout.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor nibh.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa sapien platea aliquet.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Flow
An example of the Card Deck stack’s masonry-like layout called Flow. This example is setup to have 3 columns and to switch to one-column mode at the tablet breakpoint.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor nibh.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa sapien platea aliquet.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales nullam.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
Group
An example of the Card Deck stack’s grouped card layout. This example is setup to have 3 columns paired together.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi.
Using Card Deck
The Card Deck stack helps you to build unique layouts based around the Card stack that comes with Foundry. All of the options that are included in the Card stack itself will be available to you when creating layouts with the Card Deck stack.
General
Mode
Choose from a Deck, Flow or Group layout. Each are detailed below.
- Deck: Allows your Card stacks to have equal heights when placed side-by-wide. Each Card will be the height of the tallest card in the Card Deck.
- Flow: Build a masonry grid style layout using the Card stack. The masonry grid will consist of columns of unequal heights that flow together without unnecessary gaps between Cards. The Flow mode is designed to be used with several stacks, 5 or more, in a larger grouping.
- Group: Much like the Deck mode but instead of being separate columns the Cards are touching and combine to form one element.
Columns
Often times a Card Deck may not even be needed. Card Decks can be useful, but Columns and Grids (found in the Potion Pack addon pack) can offer the same, if not more options.