Body Text

Body Text is used for simple blocks of text. On a full-sized browser (laptop or desktop), the text is restricted from using the full available width. This keeps lines from becoming too long for good readability.

The example below shows a level 2 heading. Though several levels of headings are available, for readability, it’s best to go no deeper than 3 levels. Beyond that, it’d hard for readers to keep track of the differences between levels.

Breadcrumb

Navigational breadcrumbs help orient visitors to their location within the website. Following are examples of the breadcrumbs that appear at the top of Cause and Member pages.

Call to Action: Button

This is the basic CTA: a button that takes visitors somewhere.

Call to Action: Mailing List

This is a full-sized mailing list signup form.

Call to Action: Mailing List Slim

This is a minimal mailing list signup form.

Cause List

The List of Causes is a “data-driven” pattern. That means its content is automatically generated based upon the post or page where it appears. If you have specified one or more Causes for a post or page (using the checkboxes in the WordPress editor), the List of Causes pattern will show the associated Causes.

The List of Causes is created by entering a shortcode like this:

[csw-cause-list]

You enter a shortcode as you would enter any other text in the WordPress editor. When the page displays, the shortcode is replaced with the List of Causes.

When entering the List of Causes shortcode, you can specify two things about the list’s format:

• If shownames is set to true, the name for each Cause will appear below the icon. If it has any value other than true, or if it’s missing altogether, only the icon will appear.
• If title has a value, that title will appear at the top of the List of Causes. If the title is empty (“”) or is missing altogether, no title will appear at the top.

Here is an example of the shortcode with both parameters specified. And below the shortcode, you can see the Cause list that it generates.

[csw-cause-list shownames="true" title="This Story's Causes"]

Contact Form

A form visitors can use to contact CSW.

Hero Image

An example of the Hero Image is at the top of this page. The Hero Image appears at the top of the page’s content, and includes the page’s title.  For usability, it’s important to create a hero image that has good contrast with the white page title.

Hero images should be 1260 x 400 pixels.

Member List

The List of Members is a “data-driven” pattern. That means its content is automatically generated based upon the post or page where it appears. If you have specified one or more Members for a post or page (using the checkboxes in the WordPress editor), the List of Members pattern will show the associated Members

The List of Members is created by entering a shortcode like this:

[csw-member-list]

You enter a shortcode as you would enter any other text in the WordPress editor. When the page displays, the shortcode is replaced with the List of Members.

When entering the List of Members shortcode, you can specify two things about the list’s format:

• If shownames is set to true, the name for each Member will appear below the icon. If it has any value other than true, or if it’s missing altogether, only the icon will appear.
• If title has a value, that title will appear at the top of the List of Members. If title is empty (“”) or is missing altogether, no title will appear at the top.

Here is an example of the shortcode with all parameters specified. Below the shortcode, you can see the generated Member List.

[csw-member-list shownames="true" title="This Story's Members"]

News Across

[News Stories Across is a “data-driven” pattern. That means its content is automatically generated based upon recently published posts. You add a News Stories Across by entering a shortcode like this:

[csw-stories-across]

You enter a shortcode as you would enter any other text in the WordPress editor. When the page displays, the shortcode is replaced with the horizontal list of news stories.

When entering the News Stories Across shortcode, you can optionally specify two things that will determine which stories are included in the list:

• Specifying member-slug will restrict stories to just those that have been categorized for a particular member. For this value, provide the member’s “slug” rather than its full name—for example, “1k-friends” rather than “1000 Friends of Wisconsin.” You can find the member’s slug on the administrative side by going to Posts > Member Orgs.
• Specifying cause-slug will restrict stories to just those that have been categorized for a particular cause. For this value, provide the cause’s “slug” rather than its full name—for example, “disabilities” rather than “Empowering People with Disabilities.” You can find the cause’s member’s slug on the administrative side by going to Posts > Causes.
• If you specify both a member and a cause, the list will be restricted to stories that

This pattern will list the three most recent stories matching the criteria you specify. Only published stories will appear. They will appear in reverse chronological order—most recent first. If you specify both a member and a cause, the list will be restricted to stories that have been categorized for both that member and that story.

Here are four examples of shortcodes and the story lists they generate. These show all four combinations of settings:

1. No setting specified
2. Member specified (ACLU)
3. Cause specified (Engagement)
4. Member and Cause specified (ACLU + Engagement)

[csw-stories-across]
[csw-stories-across member-slug="aclu-wi"]
[csw-stories-across cause-slug="engagement"]
[csw-stories-across member-slug="aclu-wi" cause-slug="engagement"]

News Down

News Stories Down is a “data-driven” pattern. That means its content is automatically generated based upon recently published posts. You add a News Stories Across by entering a shortcode like this:

[csw-stories-down]  

You enter a shortcode as you would enter any other text in the WordPress editor. When the page displays, the shortcode is replaced with the vertical list of news stories.

When entering the News Stories Down shortcode, you can optionally specify two things that will determine which stories are included in the list:

• Specifying member-slug will restrict stories to just those that have been categorized for a particular member. For this value, provide the member’s “slug” rather than its full name—for example, “1k-friends” rather than “1000 Friends of Wisconsin.” You can find the member’s slug on the administrative side by going to Posts > Member Orgs.
• Specifying cause-slug will restrict stories to just those that have been categorized for a particular cause. For this value, provide the cause’s “slug” rather than its full name—for example, “disabilities” rather than “Empowering People with Disabilities.” You can find the cause’s member’s slug on the administrative side by going to Posts > Causes.
• If you specify both a member and a cause, the list will be restricted to stories that meet both criteria–for example, stories that are about both 1000 Friends and the Environment.

This pattern will list the two most recent stories matching the criteria you specify. Only published stories will appear. They will appear in reverse chronological order—most recent first. If you specify both a member and a cause, the list will be restricted to stories that have been categorized for both that member and that story.

Here are four examples of shortcodes and the story lists they generate. These show all four combinations of settings:

1. No setting specified
2. Member specified (WCBVI)
3. Cause specified (Families)
4. Member and Cause specified (WCBVI + Families)

[csw-stories-down]
[csw-stories-down member-slug="wc-blind"]
[csw-stories-down cause-slug="families"]
[csw-stories-down member-slug="wc-blind" cause-slug="families"]

Page Footer

At the very bottom of the page is the standard Page Footer. You can’t manually add this design pattern. It’s automatically added to the bottom of every page.

Page Header

At the very top of the page is the standard Page Header.

Pair Full

This pattern shows an image next to text. This pattern is “full” because the image and text together take the full width of the content area with no padding or indentation. The text ends with a “Learn More” link.

Image size can vary for both Pair Full and Pair Inset, though 630 pixels is a good minimum width in either case. The most important consideration for length is the length of the text half. Ideally, the photo will be at least as tall as the text at all screen sizes; you can test this by changing the width of your browser window.

If the image is too short, it’s not a terrible problem. The layout just looks neater if the image is as tall or taller than the text, since the image essentially acts as a border for the text.

There are two variants:

• 50-50 Full Text+Image
• 50-50 Full Image+Text

Pair Inset

This pattern shows an image next to text. This pattern is “inset” because the image and text have a white margin (indent) from the left and edges of the content area. The text ends with an action button.

Image size can vary for both Pair Full and Pair Inset, though 630 pixels is a good minimum width in either case. The most important consideration for length is the length of the text half. Ideally, the photo will be at least as tall as the text at all screen sizes; you can test this by changing the width of your browser window.

If the image is too short, it’s not a terrible problem. The layout just looks neater if the image is as tall or taller than the text, since the image essentially acts as a border for the text.

There are four variants:

• Pair Inset 50-50 Text+Image
• Pair Inset 50-50 Image+Text
• Pair Inset 67-33 Text+Image
• Pair Inset 33-67 Image+Text

Testimonial

This pattern adds one supporter testimonial, or two side-by-side testimonials.