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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
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.
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.
Here you can adjust what kind of content you wish to use as a header for the top section of your Card.
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.
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.
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.
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.
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.
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.
Here you can adjust the custom value for the Uniform Padding when you've opted to use the Custom setting.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
When enabled you can add an ARIA label for accessibility to your Card.
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.
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.
This field allows you to replace the default HTML Comment with your own text.
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.