Quote

Quote your favorite author, celebrity, philosopher, your gran, or about about anyone else, and do it in style. Create pullout content from a main article that you want to bring to your visitor's attention.

Examples

That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple.

That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple.

But in the end it’s only a passing thing, this shadow; even darkness must pass.

The new Quote tool takes Foundry 2's older Blockquote and refines the heck out of it. We've added a significant number of new styling options and alignment features.

Additionally you can help make your quoted text stand out even more through the use of the Quote tool's decorative icon as well.

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.

Citation

Person

Enter the name of the person quoted in here. If you'd like to forego having a name attached to the quote then delete the contents of this field.

Source

This is the name of the source in which this quote originally appeared. As with the Person field above, if you'd like to forego having a source attached to the quote then delete the contents of this field.

Font

Font

Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface stack or simply use the Base Font that is defined in the Foundry Control Center.

Font Weight

Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.

Quote Font Size

Here you can customize the font size for the main quote text. You're able to choose from a few options. You can have the labels inherit the Base Font sizing or choose a custom size at each breakpoint.

Font Size Units

When using the Custom option for the Quote Font Size you're given the ability to change the units that the font size is measured in.

Citation Size

Here you can customize the font size for the quote's citation text, which includes the name and source. You're able to choose from a few options. You can have the labels inherit the Base Font sizing or choose a custom size at each breakpoint.

Font Size Units

When using the Custom option for the Citation Size you're given the ability to change the units that the font size is measured in.

Styling

Quote 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 main Quote text. You're also provided an option to choose a custom one-off color as well.

Citation 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 Citation text, which includes the Name and Source. You're also provided an option to choose a custom one-off color as well.

Include Quote Icon

Enabling this feature will add a decorative Quote Icon to the top of the Quote text.

Icon 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 decorative Quote Icon. You're also provided an option to choose a custom one-off color as well.

Alignment

Alignment (Uniform)

This setting allows you to align the text to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Alignment (Non-Uniform)

Clicking on the small plus icon will give you the ability to adjust the alignment of the text independently at each of the 6 responsive breakpoints giving you more granular control.

Extras

Select all text when clicked

When enabled the text contained in this tool will be completely selected when the visitor clicks on it. This helps to make content easy for your visitors to copy and paste.

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.