WYSIWYG

Overview

WYSIWYG (what you see is what you get) components provide a multipurpose text editor for incorporating a variety of information onto your page. Paragraphs, lists, tables, and images can be added to these components.

Many of the details found below also apply to text editor sections used by Accordions and other components.

When to use a WYSIWYG

• As a catch-all component for including text content with images, quotes, and tables.

Tips for best results

• Although WYSIWYG is an acronym for "what you see is what you get," there are many differences between the display of the editor and the final product on the site. Be sure to preview your page to ensure that the display is what you were expecting.
• After you paste text into any element, use the Remove Formatting tool in the WYSIWYG editing toolbar to clear out the source formatting
• The previous editor allowed for a variety of column structures that could accommodate different templates. The current editor isn’t currently set up for this, but the Text Card and Connect with us CTA components create column formats that may be useful in some situations. If you are familiar with HTML you can also add columns using the source code editor.
• Like before, images can be added to WYSIWYG components and aligned to left, right, or center. Note that captions are currently obscured by the image background but this will be removed with future style updates.
• YouTube players display at full page width by default. Use your judgment on whether any change is required. In some cases this display is the best option; in others it may feel imbalanced or overwhelm the page’s content. If you prefer to change it, a good alternative is the Featured Media – 1 column component.
• It can be helpful to put content into separate WYSIWYG components for different sections. By giving each section its own anchor tag it will be easier to link the different sections compared to adding anchors into the content manually.
• Working in the source code? If you toggle to Source view to work directly in HTML, you'll need to save your page after every component you edit. Editing one component in code view, then editing or adding another component before saving, can cause your first changes not to be saved. This applies to any field that uses the HTML text editor.

Image dimensions and considerations

• This content type can accommodate a wide range of image sizes and orientations, but the images will be re-sized to fit the layout. Most photos will be limited to 450px wide.
• See Working with Images for more information

Text Styles

1. Add your text in the Body field. Important: If you are copying and pasting pre-written text from another source such as an email or Word, you must take steps to clean the text or you will introduce unwanted formatting from the original source. You have two options:
   1. Use a tool like HTML Cleaner to remove unwanted styles and HTML attributes. This will retain many HTML tags such as headings, links, and lists.
   2. Paste with Ctrl-Shift-V will paste as plain text, removing any additional styling and all HTML tags.

A few useful text styles for your content include:

Lead content: An introductory paragraph with the Lead style can make a bold statement or highlight a primary idea. This helps to set it apart from the normal copy.

Blockquotes: Blockquotes can give a visual enhancement to quoted material to help it stand out from other content on the page.

Tables

• Tables show tabular data in columns and rows. The tables have been created to work on a responsive level by adding side scrolling when columns do not fit within the width of the screen.
• Although sometimes useful for structuring and styling pages, tables should only be used for displaying data where there is a relationship between the row/column headers and the content.
• If using the table tool in the menu remove the padding, border, and width attributes to use the built in styles and ensure it works properly on mobile devices
• Tables should always utilize a header row for accessibility and correct styling.

Resident	Bio
Image Bob, MD	Nunc ad placerat dignissim at aptent ullamcorper neque est placerat pulvinar scelerisque lacinia vestibulum tristique cum a parturient egestas parturient odio vel parturient sagittis a primis.Dis gravida. Curae fames orci inceptos a arcu condimentum platea nostra a morbi vestibulum nisl senectus hac ultricies parturient commodo a ad a suspendisse fames lacinia lacus.
Image Betty, MD	Nunc ad placerat dignissim at aptent ullamcorper neque est placerat pulvinar scelerisque lacinia vestibulum tristique cum a parturient egestas parturient odio vel parturient sagittis a primis.Dis gravida. Curae fames orci inceptos a arcu condimentum platea nostra a morbi vestibulum nisl senectus hac ultricies parturient commodo a ad a suspendisse fames lacinia lacus.
Image Sam, MD	Nunc ad placerat dignissim at aptent ullamcorper neque est placerat pulvinar scelerisque lacinia vestibulum tristique cum a parturient egestas parturient odio vel parturient sagittis a primis.Dis gravida. Curae fames orci inceptos a arcu condimentum platea nostra a morbi vestibulum nisl senectus hac ultricies parturient commodo a ad a suspendisse fames lacinia lacus.
Image Sally, MD	Nunc ad placerat dignissim at aptent ullamcorper neque est placerat pulvinar scelerisque lacinia vestibulum tristique cum a parturient egestas parturient odio vel parturient sagittis a primis.Dis gravida. Curae fames orci inceptos a arcu condimentum platea nostra a morbi vestibulum nisl senectus hac ultricies parturient commodo a ad a suspendisse fames lacinia lacus.

Alternating Rows

Alternate color rows can be helpful for visually differentiating table rows from each other. This can be enabled in two different ways depending on if you're editing an existing table or creating a new one:

• select the whole table, in the styles drop-down change the style to 'Alternating rows'
• When creating a table with the editor, in the CSS Class drop-down select 'alternating-row'

Button links

Buttons are links with a specific style applied to them. After adding a link, use the Styles drop-down to select the appropriate button. This won't render in the editor itself, check that it is applied correctly when you preview the page.

Link with Arrow

Button Primary

Button outline

Button Red

Button Yellow

Button Dark Green

Button Inverse

Images

Image

Images can be uploaded and embedded with the Insert from Media Library tool. Once added double-click the image to change its alignment on the page with respect to the text. Image captions are not currently working properly.

When aligning images the top of the image will be aligned with where you place the image. If you're trying to place an image to align with a paragraph, place your cursor at the beginning of the paragraph before inserting the image.

This content type can accommodate a wide range of image sizes and orientations, but the images will be re-sized to fit the layout. Most photos will be limited to 450px wide.

Advanced/Custom HTML Code 

Currently columns can only be added through the source code. You will need some familiarity with HTML to implement this properly.

2 columns 

<div class="grid"> 

<div class="grid__item grid__item--2"> 

[content] 

</div> 

<div class="grid__item grid__item--2"> 

[content] 

</div> 

</div> 

3 columns 

<div class="grid"> 

<div class="grid__item grid__item--3"> 

[content] 

</div> 

<div class="grid__item grid__item--3"> 

[content] 

</div> 

<div class="grid__item grid__item--3"> 

[content] 

</div> 

</div>