Children's Hospital Colorado

Design Blocks

Side by side blocks

A baby plays with wood blocks on the floor while mom watches over his shoulder.

H2 Heading Field

This is a side by side block with an image and content written over the blue background. It can be reversed so the image and text are flipped.

A woman wearing a white dress holds an ultrasound of her baby.

H3 Heading Field

This is a side by side block with an image and content written over the teal background with the Reverse Order box checked.

A closeup of a boy with short brown hair and wearing a blue sweater holding a light brown teddy bear with a dark brown hat.

H2 heading in content area

This is a side by side block with an image and content written over the green background. It can be reversed so the image and text are flipped.

A woman with short brown hair holds a young girl.

H3 heading in content area

This is a side by side block with an image and content written over the purple background with the Reverse Order box checked.

2 columns with video


Up to 10 Multidisciplinary experts collaborating on your case
5 Fetal surgeons


 

H3 heading in the content area

The block above is a 60/40 layout with video and proof points. This is a 40/60 layout with video and text block. We cannot add a color background to this text because it doesn't align with the video.



EYEBROW TITLE FIELD

A headshot of Dr. Melanie Everitt wearing a bright blue button down shirt.

“This is styled as a quote but could be any kind of text. The image is a small square image with the circle style applied by setting a property on the block.”

 Name, title

Additional 2 column options

Text next to proof point

Normally, we just put the proof point in the content area and float it right. Sometimes we want to have a clear 50/50 split between the columns, usually when stacked with other two-column blocks. This is an example of a 50/50 split.

Up to 10 Multidisciplinary experts collaborating on your case
5 Fetal surgeons

In this set of blocks, we're putting two content blocks side by side with different colors behind each side to break up the content. There are no patterns in the colors.

The vertical height of the block will vary based on the amount of text in the block. We intentionally removed padding above and below to decrease the amount of scrolling required on some of our longer pages.

We can also center the text and include icons or images within these text areas.

And we can link to prettier examples here

And here (with CTAs)

Images side by side

We can also put two images side by side, which will then stack on mobile. In the example linked below, you can see how there is a single text block stacked on top of the two images side by side, providing context for the images.

Care for the whole child example

Picture of Jaden, a young boy who was treated for HLHS at Children's Hospital Colorado.
Collection of twelve headshots of the physicians who worked together to treat Jaden for HLHS at Children's Hospital Colorado.

3-column options

Our options with three columns can be limited because we wind up with much smaller real estate for each item. This is most commonly used for CTAs but we can also expand most (not all) two-column options into three. These are best used on pages without a left nav.

In the examples below, you can see how we can combine:

  • Text with colored backgrounds
  • Text and images
  • CTAs with a gray background and without a background
  • Text and video

Pediatric expertise

Our specialists have devoted their careers to treating kids and only kids.

Kid and family-focused care

We treat the whole child and their family, not just the illness.

Multidisciplinary care

We come together to provide complete, convenient care for each child.

Example of tight real estate

This layout looks better when used on a page without a left nav.

Looks better here

This is a photo of Juniper at 4 years old. She is laying on her back on a colorful quilt with her arms crossed behind her head.  Juniper had a heart transplant at Children's Hospital Colorado.
Blue outline of a screen with a checklist

Sports articles

Whether you're an athlete, a coach or a parent of an athlete, we have advice to help you succeed.

Find what you need
blue outline of two people with one slightly in front of the other icon

Patient stories

Read more stories from patients who inspire us every day by overcoming any obstacle.

See their stories
Blue icon of a stethoscope

Find a doctor

Connect with our world-class orthopedics specialists at Children's Colorado.

Start searching
A mom holds up her baby

Multidisciplinary care

We come together to provide complete, convenient care for each child.

"Timeline"

.

.

The following section uses the "timeline" block. At this time, it can go vertical or horizontal. When vertical, the heading with the orange line below it is included. If you leave it blank, the orange line will still display.

The dots between each item are hard-coded, as are the small numbers next to each item title. Each item includes an icon/image and title, at minimum. We can also link the icon/image and/or the title; and we can add content below the title but are limited by the available real estate.

Timeline variations

The number one
1. Proof Points in Editorial

We can use proof points in a timeline but it won't right-align with text. It will go either above or below the text. We can also use it without text.

Up to 10 Multidisciplinary experts collaborating on your case
5 Fetal surgeons
2. Image and Title Linked

We can add an image or icon to the content area but it doesn't float. It will go above or below the text.

The number three
3. With video


Below is a horizontal timeline example. It doesn't display a block title and each item doesn't display additional content. It's just an image and title, and maybe a link. Max 5 items.

The number nine

Trying to replicate stuff

Full content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum, eros nec porta molestie, metus nisi luctus leo, sed hendrerit dolor lorem id tortor. Pellentesque rutrum eros non lacus placerat ornare. Nam pellentesque interdum laoreet. Duis magna orci, rutrum eu sollicitudin nec, tempus eu quam. Morbi vel bibendum sem, ac bibendum lacus. Proin vel porta ipsum.

Suspendisse facilisis, magna ac elementum blandit, erat mauris facilisis lorem, in ornare sem leo auctor urna. Pellentesque tincidunt, massa quis fermentum hendrerit, augue tortor consequat ligula, eget pellentesque mauris lectus vel nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce suscipit velit nisi, in feugiat lectus semper in. Donec ipsum risus, rutrum id nunc ac, viverra rutrum diam. Nam blandit vitae orci quis suscipit. Vivamus convallis nulla ac justo blandit porttitor a fermentum neque.

Sidebar content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum, eros nec porta molestie, metus nisi luctus leo, sed hendrerit dolor lorem id tortor. Pellentesque rutrum eros non lacus placerat ornare.

  • Suspendisse facilisis
  • Magna ac elementum blandit
  • Erat mauris facilisis lorem

In ornare sem leo auctor urna. Pellentesque tincidunt, massa quis fermentum hendrerit, augue tortor consequat ligula, eget pellentesque mauris lectus vel nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum, eros nec porta molestie, metus nisi luctus leo, sed hendrerit dolor lorem id tortor. Pellentesque rutrum eros non lacus placerat ornare. Nam pellentesque interdum laoreet. Duis magna orci, rutrum eu sollicitudin nec, tempus eu quam. Morbi vel bibendum sem, ac bibendum lacus. Proin vel porta ipsum.

Suspendisse facilisis, magna ac elementum blandit, erat mauris facilisis lorem, in ornare sem leo auctor urna. Pellentesque tincidunt, massa quis fermentum hendrerit, augue tortor consequat ligula, eget pellentesque mauris lectus vel nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce suscipit velit nisi, in feugiat lectus semper in. Donec ipsum risus, rutrum id nunc ac, viverra rutrum diam. Nam blandit vitae orci quis suscipit. Vivamus convallis nulla ac justo blandit porttitor a fermentum neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum, eros nec porta molestie, metus nisi luctus leo, sed hendrerit dolor lorem id tortor. Pellentesque rutrum eros non lacus placerat ornare. Nam pellentesque interdum laoreet. Duis magna orci, rutrum eu sollicitudin nec, tempus eu quam. Morbi vel bibendum sem, ac bibendum lacus. Proin vel porta ipsum.

Suspendisse facilisis, magna ac elementum blandit, erat mauris facilisis lorem, in ornare sem leo auctor urna. Pellentesque tincidunt, massa quis fermentum hendrerit, augue tortor consequat ligula, eget pellentesque mauris lectus vel nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce suscipit velit nisi, in feugiat lectus semper in. Donec ipsum risus, rutrum id nunc ac, viverra rutrum diam. Nam blandit vitae orci quis suscipit. Vivamus convallis nulla ac justo blandit porttitor a fermentum neque.

HOW TO ACHIEVE REMISSION

The population health solution

Creating a "circle of wellness" to influence behavior change in every area of his life."

PRODWEBSERVER2