Text-WYSIWYG Component
Warning!
Do not copy and paste text directly from a PDF or web page into a WYSIWYG field in Cascade.
If you need to copy and paste text, first paste it into a Word document, clean up any formatting issues, and then copy from Word into the WYSIWYG field.
Format information for understanding
The Text-WYSIWYG component is the primary tool for presenting content on your page. It is also the most flexible.
The Text-WYSIWYG component consists of one or more rich text fields that reflect how your content will look when published. Because text is the main way the website communicates information, this will be the component you use most.
Usage Guide
-
The Cascade editor approximates your final page styling: fonts, spacing, and font weights may appear differently once published. Use the Show Edit Preview or Preview Draft button to see how your content will actually look on the page.
- Use a separate Text-WYSIWYG instance for each content section. Each instance adds spacing above and below it, giving visitors a visual cue that a new section has begun.
- Mix single-column and multi-column instances to vary the page layout and maintain visual interest.
- Use the component to insert images and media inline with your text.
- Start with minimal formatting. In most cases, headings paired with plain body text are enough to communicate your message clearly. Too many competing styles create visual confusion.
- Avoid centering text that is more than a few words long. Centered text is harder to read.
- Create a reusable block. If the same content appears on multiple pages, create a reusable block instead of duplicating it manually.
Theme Guide
- Default: White background. Use this as your standard theme for maximum readability.
- Denim: Dark blue background with white text. Best suited for short passages; dark themes reduce readability at length.
- Jade: Green background with white text. Same guidance as Denim; reserve for brief content.
- Sand: Light brown background with dark blue headings. Use to visually distinguish a section within an otherwise Default-themed page.
- Sky: Light blue background with dark blue headings. Use for the same purpose as Sand when a cooler tone is preferred.
Fields
- Theme
- Number of columns on large displays
- Center content
- Rich Text Editor/WYSIWYG field
Key Takeaways
The Text-WYSIWYG is the most versatile and frequently used component on the site.
- Never paste directly from a PDF or web page. Paste into Word first to strip unwanted formatting, then copy from Word into Cascade.
- The Cascade editor only approximates your final styling. Use Show Edit Preview or Preview Draft to verify how content will appear when published.
- Keep styling minimal. Headings with plain body text are usually sufficient. Avoid centering text longer than a few words.
- Themes: Default (white) works best for most content. Use Sand or Sky to highlight sections. Reserve dark themes (Denim, Jade) for short text only.
Formatting Guide
Headings
Headings create visual hierarchy on the page, helping visitors understand how content is organized and making the page easy to scan. Every heading should be accompanied by body text, and a well-structured set of headings should convey the page's main points on their own.
Proper heading structure also matters beyond visual styling. Headings inform the underlying page code, which search engines and assistive technologies rely on to interpret and navigate your content.
Do not bold headlines. Headline weight is determined by its formatting. Headlines with bold added often become illegible.
First is Heading 2
Heading Two is the top-level heading for each content section. Do not use it to repeat the page title. Use it to divide content into sections or to serve as a headline for all the information on the page.
Then is Heading 3
Heading Three is a subheading of Heading Two, used to divide content within a section.
Heading 4 is less important
Heading Four is a subheading of Heading Three. It cannot be used at the same level as a neighboring Heading Three -- if Heading Three is in use, Heading Four must always sit below it in the hierarchy.
Heading 6 draws attention to a paragrah or list.
Use Heading six to introduce a small subsection of text, such as a list or clarifying statements on program pages.
Special Links
Most links in body text are contextual links that appear within the natural flow of a paragraph and give visitors a path to learn more about the subject being discussed. This link to the Links & CTAs page is an example of a contextual link.
Special links are separate from the surrounding text and are used as calls to action (CTAs). CTAs come in two formats: CTA Link and CTA Button. Both should follow the general guidelines for CTAs covered in the Links & CTAs section.
Links can be formatted when adding or editing a link using the insert a link button on the WYSIWYG editor.
CTA Link
A CTA Link sits on its own line, typically following a paragraph, and prompts the visitor to take action after reading.
CTA Links are the preferred CTA format in the Text-WYSIWYG component because they complement the surrounding text rather than interrupting it.
Write CTA Links as complete action statements, and keep them short enough to fit on a single line in mobile view.
CTA Button
CTA Buttons have no hard character limit in the Text-WYSIWYG editor, but should follow the same guidelines as buttons elsewhere on the site: limit to around 20 characters, use action words, and aim for three words or fewer.
Unlike CTA Links, CTA Buttons create a hard stop in the reading flow and strongly signal to the visitor to leave the page. Use them sparingly.
CTA Buttons should sit on their own line, though multiple buttons can appear on the same line with a space between them.
Columns
Use multiple columns to create visual interest and vary the page layout. Columns work best with short, simple content such as a single paragraph, a list, or a headline.
Combined with a contrasting theme or inline media, columns open up a wide range of layout options.
Columns automatically stack on smaller screens when the available width cannot support side-by-side readability.
Columns Draw Attention!
Using a two-column layout, placing the headline in the first column, and a short amount of text in the second column draws attention to shorter content that might have been missed by the visitor.
You can stack them!
Adding more rich text fields continues to stack the columns in the layout pattern. Repeating a pattern, such as putting the headline on one side, will create a list with deeper information. Ensure it is readable on mobile devices by previewing in Mobile View.
Media in Columns
Media (video, images) is displayed to fill the available width by default. Often, media that fills the full width of the page is overpowering. Placing the media in a multi-column layout with contextual copy next to it solves that problem.
Images
By default, images expand to fill the full available width. To adjust image size, use one of two inline image formats available in Cascade: Image: Center, Half Width and Image: One-Third Width (left- or right-floating). You can apply these formats in the styling pane inside the Insert/Edit Image window. Right-click an existing image and choose "image" or insert a new image to open the image editing window.
Include only one formatted image per Text-WYSIWYG instance. To display multiple images, use multiple Text-WYSIWYG components.
Image guidelines, aspect-ratios, and dimensions apply to all image on the website.
Additional Guidance
Image: Center, Half Width
On larger screens, the image is resized to 50% of the available width, centered on its own line with no surrounding text.
On mobile, the image displays at full width.
Example:
This image is half-width and centered. As you can see, it breaks out of the text and displays on its own line. 
The text is above and/or below the image, but not beside it.
Image: Left, One-Third Width & Image: Right, One-Third Width
On larger screens, the image is resized to 33% of the available width and positioned at the left or right margin, with text wrapping around it.
On mobile, the image displays at full width. It is good practice to add the image to the beginning of the corresponding paragraph so that will appear above it on mobile view.
Example- Image: Left, One-Third Width
This image is one-third the width available and floats to the left. That means that text and any other content will flow around it on the right side. This is the reason that you should only include one formatted image per WYSIWYG instance. Otherwise, you could end up stacking images awkwardly across the page.
Additional paragraphs and text will continue to wrap around the image. View this page as a mobile device to see the image stack full-width.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Example- Image: Right, One-Third Width
This image is one-third the width available and floats to the right. That means that text and any other content will flow around it on the left side. This is the reason that you should only include one formatted image per WYSIWYG instance. Otherwise, you could end up stacking images awkwardly across the page.
Additional paragraphs and text will continue to wrap around the image. View this page as a mobile device to see the image stack full-width.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Updated 6/15/26