Sample Components Cheat Sheet
H1 Second Line
Hero body this is a wysiwyg editor. This is a Service page. Not all components are set to display on all page types currently, although we can change the settings.
If you don't select a hero image, this default abstract background will display. Consider your mobile image when building a page.
This is a special section alert.
"Left content with background"
This is Section Text. You need a background image with this component that is blank/light to the left and has an image to the right. An example is By-the-numbers.png.
-
Icon Text
In the wysisyg editor. You can change the icons, they are images. -
45 SPECIALTIES
We offer a variety of specialties -
45 SPECIALTIES
We offer a variety of specialties
H2 Title - Add a View. (Ex: Patient Stories view)
This is optional Section Text. For Patient Stories we are choosing to display three in one row. You could add more.
There is an anchor ID for this section so you can link directly to it.
Two Columns - Background color selectino = gray
Two column options:
- 50/50%
- 66/33%
- 33/66%
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two column options:
- 50/50%
- 66/33%
- 33/66%
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two Columns - Background color selectino = purple
Two column options:
- 50/50%
- 66/33%
- 33/66%
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two column options:
- 50/50%
- 66/33%
- 33/66%
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two Columns - Background color selection = Purple 2
Two column options:
- 50/50%
- 66/33%
- 33/66%
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two column options:
- 50/50%
- 66/33%
- 33/66%
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two Columns - Background color selection = Light Blue
Two column options:
- 50/50%
- 66/33%
- 33/66%
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two column options:
- 50/50%
- 66/33%
- 33/66%
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two Columns - Background color selection = background image
Two column options:
- 50/50%
- 66/33%
- 33/66%
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two column options:
- 50/50%
- 66/33%
- 33/66%
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Featured Highlights
Featured Highlights provides decorative icons to break up page content. Not fully implemented. (future use)
Featured Highlights provides decorative icons to break up page content. Not fully implemented. (future use)
Featured Highlights provide decorative icons to break up page content. Title optional.
Three columns with icons
This component has options for - gray or white background color.
Section text for Three columns with icons.
Text on top of two columns.
This component offers different background options - an image or colors. See Women's Health for an example of the background image.
Stay Healthy at Any Age
"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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Expecting and New Mothers
"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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Video section
Section text is optional to describe the video.
Optional Section Text 2
H3 Left Title/Text/Link & Right Image
This is section text. This component is not fully implements, targeted for future use.
Basic component
Adding the "Basic" component gives you the wysiwyg editor that you can use to add a body text area of custom content for text, images and links.
How to create text buttons:
You can add a button into any text using the wysiwyg editor. First, add text. Then, link the text using the wysiwyg editor link button. Then, select the linked text and use the Style drop down (in the wysiwyg editor) to apply a button style. (Tip: you have to apply the link first and then select the link in order for the button styles to appear.)
Button Light Blue Light Blue Empty Button
White button (see code) White Button Purple Empty Button
Tip: You can use it to customize inbetween columns.
Note: Select the table with a click, then on the wysiwyg editor, select either "gray striped table" or "blue striped table" to add alternate row formatting.
| Table Heading One | Table Heading Two |
|---|---|
| Row one | Row one col 2 |
| Row two | Row two col 2 |
| Lorem ipsum | Lorem ipsum |
Left Image/Right Text Center
Right text area
"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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Title text and buttons
"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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Left Text/Right Image
This is the section 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Title/Text/Three Column Images/Button
This is optional section text. This component is not fully implemented, targeted for future use.
Frequently Asked Questions
What is the best way to communicate with my provider?
The best way to reach your provider is by email through MyHealth Info. Log in or sign up for MyHealth Info. Learn more about MyHealth Info.
What do I need to know about pregnancy and COVID-19 (Coronavirus)?
Learn more about Pregnancy and COVID-19 (Coronavirus).
Link List - H2 Title
This is optional section text for the Link List component.
Title & Full Width Image
This is optional section text
Title & Text & Buttons
This is section text. Tip: You can center or left align the section text to match the title or your preference.
