Paragraph

Paragraph provides you a conduit for getting your text content into your pages and may just be the most used tool in Foundry.

This tool makes use of Markdown to help you get your thoughts across much quicker. Additionally Markdown provides us more control and formatting than ever before.

Examples

Paragraph is a pretty straight forward tool that allows you to present text to your visitors in a variety of ways. The majority of the text on this page, and others on this site, are created using the Paragraph tool.

Basics

This is a basic Paragraph with no changes to its settings whatsoever. The Paragraph tool uses Markdown for its content. A good resource for learning tips and tricks for Markdown is Daring Fireball's reference page.

Bolded

Here we've bolded this bit of text to set it apart in our paragraph.

Bolded text is as easy as placing double asterisk on each side of a word or set of wordd, like so: **this text would be bolded**

Lead Paragraph

Here we've applied Foundry's Lead Paragraph styling to this paragraph to set it apart. This feature automatically increases the type's font size to help it stand out to your visitors.

Misc Styles

A couple of fun things, discussed later in the settings, include highlighting text, marking text as deleted and inserting keyboard combinations inline like so: CMD+C

There's a lot more you can do with Foundry's Paragraph tool that we haven't shown here as well.

Man who catch fly with chopstick, accomplish anything.

Previously Foundry's Paragraph tool was powered by a styled text engine from RapidWeaver. While it looked nice on the surface it didn't create the cleanest code underneath. This new Paragraph tool cleans things up and provides you the ability to write in Markdown.

Additionally Markdown provides us a better way to create text with more formatting options. Not to mention we've added several new features to Paragraph that we think you'll find quite useful.

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.

Spaces Between <p> Tags

While you can use a Foundry Paragraph tool for each individual paragraph you write, it is often easier to group them together by writing them all in one Paragraph tool and simply putting an empty line between them.

Foundry is smart enough to parse this text and wrap each paragraph within the tool in its own HTML paragraph tag pair.

This feature will apply a margin to the bottom of each of these HTML paragraph tag pair to look more natural.

This excludes the last paragraph tag in the tool.

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 Sizing

Here you can customize the font size for the this tool. By default Paragraph inherits the font sizing from the Control Center. This is the most commonly used, and recommended, font sizing setting. You're also able to choose from one of 6 preset font sizes, or supply your own fonr sizes at each of the 6 individual responsive breakpoints.

Lead Paragraph

Allows you to supersize your Paragraph’s text to create nice lead-in display type for your content. Lead preset sizing and weight can be adjusted in Control Center.

Custom Line Height

Enable this setting to manually override the line height for this tool.

Custom Letter Spacing

When enabled, this slider lets you adjust the spacing between the individual characters within your text. The default value here is 0 (zero).

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.

Styling

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

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.

Sample Inline Text

Foundry has some styling built in for text within a paragraph. These can be used by inserting tag pairs with your text inside of your paragraphs. This section provides sample text with the appropriate inline tag pairs. You can copy and paste these samples into your own paragraphs.

These settings are purely samples and do not affect your site in any way.

Highlighted Text

You can use the <mark></mark> code snippet to highlight text within a paragraph. Here you can see we’ve highlighted a bit of text within this sentence using the following snippet:

Here you can see we’ve <mark>highlighted</mark> a bit of text within this sentence.

Deleted Text

You can use the <del></del> code snippet to strike through text within a paragraph. Here you can see we’ve deleted a bit of text within this sentence using the following snippet:

Here you can see we’ve <del>deleted</del> a bit of text

Keyboard Commands

When trying to indicate to your visitor a keyboard key, or combination of keys, to press you can use a simple snippet to highlight those keys and make them stand out. If we want to tell a user to press CMD + C to copy a piece of text, we could use this code snippet:

To copy some text press <kbd>CMD</kbd> + <kbd>C</kbd> and it will be saved to your computer’s clipboard.

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.