ARTICLES

Articles are long-format text components.

Articles can display formatted text such as headers, bold, italic, hyperlinks, bulleted or numbered lists, block quotes, images and buttons. If you need short text that is centered, consider using a Title.

In Articles, text is automatically separated into paragraphs such as the following placeholder text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 1

Multiple paragraphs can be broken up with headings. Heading 1 is the largest heading and should be used at the top of pages and to introduce major new sections of the page.

Heading 2

Heading 2 is the 2nd largest heading and should be used under Heading 1s to display subsections.

Heading 3

Heading 3 is the 3rd largest heading and should be used under Heading 2s as a sub-subsection.

Text Sizes and Formats

Here is some large text can be used to draw attention to a sentence.

Here is normal text.

Here is some small text.

Here is some extra small text.

Here is a block quote

Sentences can contain bold, italic text as well as hyperlinks.

Lists

Bulleted Lists

Here is a bulleted list
It has three different
Lines of information

Numbered Lists

Here is a numbered list
It also has three different
Lines of information

Embedded Images

Multiple images can be embedded in an Article component. The images can optionally have a caption.

People packing carrots at WSCAH — Here is a caption for the image. Blah blah blah blah blah blah blah blah blah blah blah blah blah.

Button Rows

Button rows allow you to add one or more buttons within an article.

Button 1 Button 2

Learn more about button rows.

Editing Tips

When articles are rendered on the website, they will take hints for how to display based on how it is formatted in this article. However the exact styling and coloring of the text will be different and optimized to look best on the website. For example, the text on the website will change color depending on the palette of the parent block.

When entering text, hitting the return key will create a new paragraph. Holding the shift while hitting the the return key will create a soft return or break. This will be a new line of text with less space before it than a paragraph.

Multiple returns between paragraphs will be ignored in the website. If you need top create more space between two parts of an article, create a new block on the page and add a new article.

Mostly you can pasted formatted text from a Google doc into an Article and will will render correctly. However, it will sometimes add extra soft-returns for characters it doesn't recognize which can mess up the rendering on the website. You can then go back to the article and delete hidden white characters.

Multiple Columns

Article text can flow across multiple columns like a newspaper.

This article is set to flow across three columns on the widest screens. It will automatically switch to two or one columns on narrower screens, so if you don't see three, make your browser window wider.

Also notice how this text is white, that's because this article is in a block where the palette is set to blue. The article will always be optimized to display the headers and text using a color that works with the current block's palette.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?