test | Massachusetts Health Policy Commission

Blockquotes and callouts

This is a div with the class="darkblue float". Eget arcu dictum varius duis at consectetur lorem.

Nulla facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Dui id ornare arcu odio ut sem nulla. Amet nisl purus in mollis nunc. Curabitur eu mi sed dolor tincidunt interdum. Suspendisse mattis massa a magna egestas convallis, ac iaculis lectus dolor ac lacus.

This is a <blockquote>. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Egestas congue quisque egestas diam in arcu cursus.

Etiam pulvinar enim mi, nec ultrices nisi pellentesque et. Maecenas pharetra odio ut ex volutpat, vitae dapibus neque laoreet. Donec in erat diam. Pellentesque at quam id mauris lobortis eleifend. Curabitur venenatis tempor dolor, quis lacinia augue pellentesque a. Etiam quis justo nec odio pharetra vulputate et quis risus. Donec condimentum, lectus eu mattis ultrices, erat tortor vehicula massa.

"This is a div using class="blockquote". Remember to use "" otherwise the first line will stick out a little. Interdum et malesuada fames ac ante ipsum primis in faucibus."

Mauris consequat sollicitudin enim.

This is a div using class="callout". Quisque sed tellus auctor, pretium lectus eu, elementum eros. Nulla consectetur nisl sit amet dui tincidunt mollis varius id metus.

Mauris hendrerit lorem ut ornare finibus. Etiam fermentum pharetra tempor. Etiam finibus magna vitae justo varius hendrerit. Ut posuere augue in risus vehicula sagittis. Nunc convallis imperdiet tortor, sit amet viverra dolor vestibulum ac. Phasellus placerat lectus sit amet arcu tristique, non elementum neque tincidunt. Nullam gravida est mattis placerat aliquet.

Colored Backgrounds

On full width pages, <div class="container"> is used to stop the content from literally being full width (like a container).

This is a div with the class="darkblue". Curabitur tincidunt nunc eget ullamcorper elementum.

This is a div with the class="lightblue". Eget arcu dictum varius duis at consectetur lorem.

This is a div with the class="lightgray". Praesent porttitor orci nibh, a facilisis ex vehicula in.

This is a div with the class="gray". Mauris tristique auctor ex a hendrerit.

Interactive

<a class="pushable"> with <strong class="front"> inside

Title of Accordion

Donec ut fringilla erat, eu commodo justo. Nulla tincidunt ante eget mi fringilla, eget ornare enim commodo. In porttitor posuere diam et vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ullamcorper vulputate nulla ut sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nisl, dignissim sed lectus vehicula, pellentesque aliquet orci. Ut porttitor, mauris vitae porta rutrum, ex leo venenatis enim, vel suscipit felis risus in felis.

Cards work better with a background.

Typography and classes

This theme is built on Boostrap, so you can also use bootstrap classes.

Small text can either use the <small> tag or have a class of "small".

This p has a class="kicker".

This is bold.

Images can .small (max-height: 150px and max-width: 150px) and/or aligned right or left.

Widths:

Width 25%

Width 50%

Width 75%

Width 100%

Iframe sizes

3x4

1x1

4x3

16x9

21x9

Example: