This page contains all modules that we’ve got implemented on WordPress. All are separated by the “Line Separator Block“.

Intro Full Width Block

with a subtitle

 

 

Intro Full Width With Animations Block

Paragraph line.

 

Add Animate Image will extend this block with another select image section which will layer on top of the background image. Every subsequent image will layer on top of the previous image.  

Intro Text + Background Image

With some paragraph content

And A Button

Intro Background Image + Text

This one looks broken?? Should be the same thing as above except mirrored

And A Button

Intro Text + Image

This is used on the homepage

With Button

Intro Image + Text

Should be the same as above except mirrored

My Button

Intro Wide Text + Image

I wonder where we use all of these on the actual website

Color Population Genomics

Intro Video

Not entirely sure where this is used but we have access to it!

Video

This module is called just “video”

Still in “video” – you can add content on the bottom of the page

Video Text

This module is called “Video Text”

Text + Video Text

Another video / text combo module

Text + Video + Images + Text

Needs 1 video but can have as many Images as you need

Videos

This one can have multiple videos

Some text as a description!

Videos Wave

Another format for multiple videos!

You can also add text (Video 1)

You can also add text (Video 2)

Video Accordions

Video + Accordions. Everything you ever wanted.

This is the (optional) description of the video

Body of accordion 1

Body of Accordion 2

You can have as many of these as you want


Text

This is the “Text” block

Heading 3 in here

it’s the most basic content block

Text + Image + Text

Allows you to have text as a title

AND on then as a body!

(after the image that is)

Text + Text + Image

TODO: Add a link to pages where this is used

Image Text

Image is on the left hand side, text block to the right

Text Image

Text block is on the left side, image to the right

Background Image + Text

Used on the homepage with a list

  • a
  • b
  • c
  • d

Text + Background Image

Same as the above but mirrored

  • a
  • b
  • c
  • d

Text + Image + Text With Light Blue Background

what a complicated name

Light blue background indeed!

Text + Blue Background

We use this quite often

Text + Light Blue Background

Like the previous one but different shade of blue (we should probably only use 1)

Text + Dark Blue Background

We use this one quite often as well

Text + Dark Blue Background + Images

We can put logos in this component

Color Population Genomics Partner
Color Population Genomics Partner
Color Population Genomics Partner

Below is “Logos”. I believe it’s used on the enterprise page as a row that has only logos and nothing else

Boxes With Blue Background

This is used on the research page

Content 2 is here

Content 3

Finally Content 4

Cols with Image and Text

The number of columns per row is configurable (between 2 and 5)

Col 1

Col 2

Col 3

Col 4

Cols With Text

the columns per row aren’t configurable on this one

text 1

text 2

text 3

Tiles

Items per row is configurable between 2 and 5

Tile 1

Tile 2

Tile 3

Tiles with Light Blue Background

Items per row is configurable between 2 and 5

Tile 1

Some text here

Tile 2

We have text here

Tiles with Dark Blue Background

Items per row is configurable between 2 and 5

Tile 1

text

Tile 2

text

Tile 3

text

Tile 4

text

Tiles with Full Width Light Blue Background

Items per row is configurable between 2 and 5

Tile 1

Some text here

Tile 2

Some text here

Tile 3

Some text here

Tile 4

Some text here

Tile 5

Some text here

Tiles Horizontal

Items per row is configurable between 2 and 5

Tile 1

Some text here

Tile 2

Some text here

Tile 3

Some text here

Tile 4

Some text here

Tiles Small Horizontal

Items per row is configurable between 2 and 5

Tile 1

Some text here

Tile 2

Some text here

Tile 3

Some text here

Tile 4

Some text here

Tile 5

Some text here

Tile 6

Some text here

Small Text

Used for references. See the bottom of /mission

Small Text + Grey Background

TODO: Find where this one is used! Probably also references?

Small Text + White Background

We have a bunch of these apparently 

Dark Blue Callout Row

Has less padding than “Text + Dark Blue Background”

Dark Blue Callout

Different from the dark blue callout row

Green Callout Row

Am I color blind or is this not green? It’s used on our landing pages I think.

Callout Row

Same as the others, just using the light blue background

Callout With Background Image

This is what we use for BCAM but it can be customized (including different colors for the button)!

Callout With Background Image

This is what we use for BCAM but it can be customized (including different colors for the button)!

Color Rows

Row 1 – Dark Blue (you can pick the color of every row individually)

Row 2

Row 2 – Blue (you can pick the color of every row individually)

Row 3

Row 3 – Light Blue (you can pick the color of every row individually)

Row 4

Row 4 – Light (you can pick the color of every row individually)

Steps Horizontal

 

1

Step 1

2

Step 2

3

Step 3

Steps Vertical

01

Step 1

02

Step 2

03

Step 3

The thing below is “Testimonials Slider

Slider

This is a slider that can hold arbitrary content

Testimonials Slider With Image

Below is “Testimonials Slider With Background Image”

Testimonials Slider Wave

Testimonials Slider Video

Images

A module that has a bunch of images

Description Image 1

Description Image 2

Description Image 3

Images with Title

A module that has a bunch of images with titles (you can have as many of them as you want)

Image Title 1
Image Title 2

Members

We can add “member” profiles and display them in this module

Mary-Claire King, Ph.D.

Geneticist and Professor of Genome Sciences and Medicine at the University of Washington. Advisor, Scientific Collaborator

Laura Esserman, M.D., M.B.A.

Breast surgeon and Director of the UCSF Carol Franc Buck Breast Care Center. Scientific Collaborator

Laura van’t Veer, Ph.D.

Molecular Biologist and leader of the Breast Oncology Program at the UCSF Cancer Center. Scientific Collaborator

Below is “Service” – we can launch various comparison tables with it!

Color for Employers

To learn more and get information on volume-based discounts for your organization, contact us today.

 
Consumer
Employer
The Color Test

Risk assessment and screening guidelines

Medication response genetic information

Access to genetic counselors and clinical pharmacists

Educational programs

Benefit Coordination

Launch and communications plan

Custom employee workflow

Co-branded marketing materials

Insights and Routing*

Newsletter personalization

Routing to available employee benefits

Employer Experience

Population-level risk reporting**

Dedicated account manager

Training and support

 

Tab 1 has some content

And below it has some sections

Section 1 – 123

Section 2 – 123

Section 3 – 123

Tab 2 title

Below are some sections

Tab 2 – section 1

Tab 2 – Section 2

Tab 3 – Section 3

List

List item 1

with a body

List item 2

another body

This supports a “Bottom Description”

List Wide

List Item 1
List Item 2

test test 123

List Item 3

item 3 body

List Fullwidth

Item 1

test

Item 2

test test

Item 3

test test test

And a “bottom description”

List Icons

Icon 1
Icon 2

Tiles Icons

Configurable between 2 and 5 items per row

text 1

text 2

text 3

Jobs

this pulls data from https://home.color.com/api/v1/hire_feed

Business Development
Business Operations Manager Burlingame, California
Head of Business Operations Burlingame, California
Clinical Laboratory
Automation Engineer, R&D Burlingame, California
Automation Engineer, Support Burlingame, California
Clinical Lab Assistant, COVID-19 Burlingame, California
Clinical Lab Scientist, COVID-19 Burlingame, California
Day Porter (Laboratory) Burlingame, California
Lab Instrumentation Specialist Burlingame, California
Lab Materials Handler Burlingame, California
PM Shift Supervisor, COVID-19 Burlingame, California
Procurement Specialist Burlingame, California
Senior Manager, Supply Chain Burlingame, California
Tech Transfer Scientist Burlingame, California
Clinical Services
Design
Head of Product Design Burlingame, California
Senior Product Designer Burlingame, California
Marketing
VP, Marketing Burlingame, California
People
People Operations Specialist Burlingame, California
Recruiting Sourcer Burlingame, California
Technical Recruiter Burlingame, California