Paragraph

Base Foundry stack

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

  • Set alignment of paragraph text
  • Style paragraph using preset or custom colors
  • Boost your type size using the Lead setting
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

Lead Text

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.

Normal Text

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.

Using Paragraph

General

Font Size
Choose to use the pre-defined text size, set as the Base Font size in the Control Center stack, or to use one of several pre-defined font sizes.

Staring with Foundry v2 you can click the small plus icon to have the option of setting a custom font size for your paragraph at each of the three responsive breakpoints. v2

Font
You can choose to use the Control Center’s font settings for your Paragraph or opt to select one of the Typeface stack’s font options. For more information on using Typeface be sure to read the documentation page for it here.

When using Typeface for your Paragraph stack’s font it is good practice to make sure you’re loading a normal, bold and italic version of the font using the Typeface stack.

Lead Paragraph
Allows you to supersize your paragraph’s text to create nice lead-in display type for your content.

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

Style

Paragraph Style
Use one of Foundry’s built-in color swatch presets or choose your own custom color for your paragraph text. Using the custom color picker you can set the color for the text, as well as links within your paragraph.

Starting with Foundry v2 we've added the following Header Styles:

  • White: A quick way to choose a pure white text color for your header. v2

Alignment
Allows you to set the justification of your Paragraph stack. You can set the alignment to Left, Center or Right. You may also choose to align the paragraph's text differently at each of the three responsive breakpoints.

Paragraph Extras

Advanced Features

Foundry includes some inline text elements for advanced users. You can use some simple HTML markup to add a little extra formatting to your text in the paragraph stack. Here are some of those formatting options:

Highlighted Text

You can use the <mark></mark> code snippet to highlight text within your 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...

Keyboard Combinations

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.

Insight
Formatting

When you copy and paste content from one source to another you'll often bring unwanted formatting, and even underlying code with that copied content.

Be sure that you're using RapidWeaver's Paste as Plain Text feature when pasting content into your project file. You'll then format it afterwards, adding bold & italicized styling as well as links using RapidWeaver.

You can find Paste as Plain Text option in the Edit menu in RapidWeaver as well as access it via the option + command + v shortcut key combination.

Insight
Font sizing

When using the Paragraph stack you want to keep in mind that the Font Size should always be set in the Paragraph stack's own settings. While the text field you use to enter text into the Paragraph stack has a sizing option, you'll want to ignore this feature as the stack itself should be handing this setting for you.