Card

Base Foundry stack

An extensible, responsive content container with options for headers and footers, a wide variety of child-stacks, and much more.

  • Choose from preset or custom colors
  • Add a headeer and footer
  • Include an overlay image with header
  • Insert a header or footer image
  • Insert any combination of child-stacks
  • Include one or two buttons connected to bottom of Card.
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

Image Image

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.

Card Stack

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 platea sit morbi.


A small note here.


Using Card

General

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Card stack.


Style

Style
Set the color of the Card to match your site using one of Foundry’s color swatch presets or make use of custom color pickers to style the Card stack.

Inverse Text
Inverse the Card’s text colors for use on dark backgrounds. This feature applies a translucent white color to the text to allow it to blend with any dark colored backgrounds.


Header & Footer

Header & Footer
Add a sectioned off header or footer to your Card that can accept customizable text.

Alignment
Allows you to set the justification of the Card’s header or footer text. You can set the alignment to Left, Center or Right. Each can be set independently of one another.

Style
Set the color of the Card’s header and footer section using Foundry’s color swatch presets or make use of custom color pickers to style these sections.

Inverse Header Text
Inverse the Card’s header and footer text color for use on dark background styles. This feature applies a translucent white color to the text to allow it to blend with any dark colored backgrounds.


Image

Top & Bottom Image
Add an image to the top or bottom of your Card. The images will appear just below the header section or just above the footer section if these sections are enabled. Otherwise the will appear at the very top or bottom of the Card, respectively.

You can opt to use the normal drag-and-drop image placement for your Top & Bottom image or, as of Foundry v2, you can use a custom remote URL for your image(s). v2

Alloy Droplet support has been added (as of v2.3.0) to allow you to use an Alloy Droplet tag to set the Top & Bottom background images.

Alt Tag.
Define the Alt Tag for your top or bottom image. The Alt Tag provides alternative information for an image if a user for some reason cannot view it.

Equal Height Card Deck
When using the Card stack within a Card Deck stack, you can enable this feature, when using a Bottom Image to ensure that the bottom image will be mounted to the base of the Card no matter what height the Card ends up being due to the equal height nature of the layout.


Overlay Image

Overlay Image
Include an image that overlaps, and is placed at the base of, the top image. This overlaid image is circular shaped. In order for it to be used it requires that you enable the top image as well.

Alt Tag.
Define the Alt Tag for your overlay image. The Alt Tag provides alternative information for an image if a user for some reason cannot view it.


Buttons v2

Button Layout
Choose whether to include one, or two buttons to be docked to the bottom of the Card stack.

Button Size
Choose the size of your button. You can opt for Standard or Large sized buttons.

Button Border Color
Allows you to define the color of the border between the buttons and the other Card stack contents.

Label One & Two
Set the label names for your button(s).

Button One & Two Links
Allows you to link each button, individually, to another page on your site or an external URL.

Button One & Two Styles
Choose from a Foundry preset color option for your buttons or use a custom color picker to set a custom style.


Child Stacks

The Card stack contains several child stacks that help you quickly and easily customize each card to your liking while creating your pages in Foundry. You add these child stacks to your card by clicking the small blue Plus Sign at the bottom of the Card stack and they can be rearranged via drag-and-drop. Card includes the following child stacks:

  • Paragraph
  • Image
  • Link (Inline)
  • List Group
  • Blockquote v2
  • Title
  • Slice*
  • Note
  • Divider
  • Please Note: The Slice child stack allows you to insert other stack types within the Card stack. This lets you use most other non-child stacks within your Card. Not all stacks will work within a Slice.
Insight
Slice item

Can't find a content type you like when adding items to the Card stack using the blue plus button at the bottom of the stack? Add just about any content you like by using the "Slice" content type. This type allows you to insert most anything.