Card

An extensible, modular, responsive content container with options for headers and footers, display toppers, and much more. Mix and match with your other Foundry tools.

Examples

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3_celociraptor

Hold onto your butts.

Foundry's Card tool takes some of the best elements from our previous Card tool as well as one of our previous Display tool to create an even easier to use, robust way to create call to action sections and other content containers.

Additionally we've included a feature in Container that can combine Cards into one element as a card wrapper.

Settings

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

General

Include Base Margin

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

Card Header

Mode

Here you can adjust what kind of content you wish to use as a header for the top section of your Card.

Drop Zone

This Header Mode allows you to insert any of the Foundry tools as the content in this Header section. This is the default option and contains a Foundry Header tool as the default content. This Mode provides great versatility in your design.

Image+

With the Image+ Mode you're able to use Foundry's various Image tools to create a stylish Header section for your Card. This Mode defaults to using the Image tool, but if you delete the default Image you can then choose to add any one of the following options.

  • Image
  • Image : Remote
  • Image : WebP
  • Whimsy
  • Zoom
None

This option disables the Header section of the Card tool completely. You still have access to the main Card content area and can add Header-like options there as well if you like for a different formatting style.

Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background area behind the Header section's content. You're also provided an option to choose a custom one-off color as well using a color picker.

Content Styling

Content Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background area for the main content section of the Card. You're also provided an option to choose a custom one-off color as well using a color picker.

Content Padding

Uniform Padding

Here you can choose from one of Foundry's Padding Presets or provide your own custom value for the padding around the main Content section of the Card. By clicking the small + icon above this setting the padding is set to 0 (zero) and you're able to instead use the Spacing tool to form your own custom padding around your content.

Custom Padding

Here you can adjust the custom value for the Uniform Padding when you've opted to use the Custom setting.

Custom Units

Allows you to choose the units of measure for the padding when using the Custom Padding option. You casn choose from Pixels (px) or Root EM (rem) for your units. Root EM (rem) is the defauly option.

Card Footer

Add Card Footer

Enabling this feature adds a footer section to the bottom of the Card. This section is populated by a Caption tool by default, but you can change this by deleting the Caption and instead choosing from one of the following items.

  • Caption
  • Paragraph
  • Header
  • Button
  • Button Group
  • Icons
Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background area for the footer section of the Card. You're also provided an option to choose a custom one-off color as well using a color picker.

Rounded Corners

Rounded Corners

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

Border

Border

Allows you to choose from 5 different preset border widths for easy styling. If you need something different you can choose the Custom option to set your of border thickness. By default the border is set to None.

Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the Card's border. You're also provided an option to choose a custom one-off color as well.

Hide Header Border

When enabled the thin border link between the header and card body will be removed. If you'd like a custom border this between the two can be achieved by using the Foundry Border tool.

Shadow

Shadow

Used to add a decorative shadow to this tool. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Hover Shadow

This setting can be used to apply a different shadow, or none at all, to the Card when the visitor hovers over the button on the page.

Animate Hover Shadow

When enabled a small transition animation, essentially a keyframe animation, will be applied to the button when the visitor hover over it. This will give the transistion from normal Shadow style to Hover Shadow style a bit more personality and visual interest.

Link

Add Link to Card

When enabled a link is added to the entire Card. This allows the visitor to click anywhere on the Card to visit the link that you define.

Add Accesibility Label

When enabled you can add an ARIA label for accessibility to your Card.

Advanced

Hide Overflow

Prevents contents of Card from overflowing its bounds. This can help eliminate a rendering problem when using images in the Card header in conjunction with rounded corners and a card border. If you're planning on using an image header in your Card, and rounded corners and a border, or you just wish to prevent content from escpaing the Card, you can enable this new feature.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.