Component Guidelines
Content components are the primary tool to add content to a page. They are added inside the page using the WordPress block editor.
Rich Text. This component is used to add standard body copy, headings, lists, images, and separators. Think of this component as adding a “section,” with all copy elements relating to the same message or point. Create a new Rich Text component for communicating the next message. This will allow more margin separation between “sections” than would normally be achievable with standard paragraph margins.
Options:
XL Headline – Sets the first heading to larger than normal text size.
Use Leader Paragraph – Sets the first paragraph in larger, bolder type for emphasis.
Showcase. This component is used to showcase a major message with an image sidebar. Caption will display under image if one exists in the image meta data. Minimum image width of 1200px recommended.
Options:
XL Headline – Sets the heading to larger than normal text size.
Use Leader Paragraph – Sets the first paragraph in larger, bolder type for emphasis.
Link Group – Optional call-to-action buttons may be added below text.
Showcase List. This component is used to showcase a major message with a link list sidebar.
Options:
XL Headline – Sets the heading to larger than normal text size.
Use Leader Paragraph – Sets the first paragraph in larger, bolder type for emphasis.
Link Group – Optional call-to-action buttons may be added below text.
Accordion. This component is used for expandable content.
Options:
XL Headline – Sets the heading to larger than normal text size.
Use Leader Paragraph – Sets the first paragraph in larger, bolder type for emphasis.
Link Group – Optional call-to-action buttons may be added below text.
Gallery Slider. This component displays a series of images in a unique slider format. It is meant to be used with images of varying proportions. If displaying images all the same proportion is desired, they should be prepared beforehand to all the same dimensions. Recommended maximum width is 666px.
Options:
Headline and call-to-action button.
Masthead. This component is used for page title, images, and impact text at the top of pages.
Options:
Image trio appearing below title and text.
Image Trio. This component is used to display a trio of images with heading, descriptions, and links.
Info Cards. This component is used to display topic information in a two-wide grid format.
Impact Statement. This component is used to display a large, impactful, statement or quote.
Options:
Statement Icon appearing above statement.
Impact Statement Block. This component is used to display a large, impactful, statement or quote. Only use this component within the Rich Text component.
Options:
Statement Icon appearing above statement.
Image Guide. This component displays imagery in a unique format to support a key message. Background and foreground images are required
Options:
Mobile-specific foreground image.
Heading
Introduction
Team Slider. This component displays the MyCrestCare Team content in a slider format. Image, heading, and description. Images are automatically cropped to 755×598 pixels. It’s best to prepare images to this size beforehand if precise image subject position is required.
Options:
Section heading.
Team List. This component is used to display the official team member list. Name and title are required.
Options:
Bio and image.
Jumbo List. This component creates lists with more spacing and larger bullets than standard ul/ol styles.
Directory List. This component creates a directory with images, descriptions, and links. See it in action on the Affiliates section of the About Us page.
Call-To-Action. This component is used to display a large call-to-action section.
Options:
Statement Icon
Use Leader Paragraph – Sets the first paragraph in larger, bolder type for emphasis.
CTA Size – Selects normal or full bleed section size.
Button location – Set normal (button appears below text) or offset (button appears to right of text). Offset recommended when full bleed size is selected.
Link group
Image Duo. This component is used to display two asymmetric images.
Options:
Text block appearing beneath first image.