Backgrounds and Cards

Cards

The box where this data is presented uses a neutral background.  The area where we have data that is important uses a card-1 style (Titan blue).  Notice how that data has instant recognition and users are going to be drawn to it. 

Remember to not rely solely on color and never provide instructions that would put the user to "read the content in blue".  Card styles are still going to be read by screen readers the same as any other content on the page so your message needs to be clear and understood as if there was no change in the background.

Sed bibendum arcu orci

A vulputate urna interdum et. Sed vitae pretium diam. Donec lacinia elit nec enim porta aliquet sed eget tellus. Quisque ipsum turpis, pulvinar eget velit eget, aliquam facilisis purus.

Proin dolor nulla, luctus ut lectus ut, porttitor laoreet neque. Nunc venenatis, est non eleifend suscipit, massa metus sodales felis, vel vulputate arcu ante in metus. Phasellus sit amet rutrum turpis. Nulla risus urna, lacinia a aliquam id, facilisis a nibh. Integer augue est, tempor porttitor dolor eu, placerat varius quam.

Suspendisse porta molestie elit, non suscipit sapien iaculis ac. Vivamus lobortis scelerisque sem, in sollicitudin nibh euismod at. Sed viverra mauris nunc, nec condimentum nunc pharetra a. Ut imperdiet pretium nibh id ullamcorper. Nulla ultricies nibh arcu, maximus interdum urna vehicula non. Nulla finibus ipsum sit amet metus vehicula faucibus. Ut quis hendrerit ipsum.

The next thing

Curabitur lobortis magna dolor, bibendum vestibulum nisl mattis ac. Quisque ut mollis ipsum. Mauris sed elit sodales, fermentum est sed, facilisis sem. Mauris nec sem sit amet nulla tempus tempus. Donec rhoncus venenatis risus quis mollis. Proin pharetra viverra mauris, non semper dui. Nulla aliquet viverra erat. Sed feugiat lacinia justo a euismod. Nunc scelerisque convallis imperdiet. Praesent venenatis nibh libero, ac cursus felis bibendum sit amet.