Model Site Optional secondary text for expansion
on name or identity only

CSS Styles: Basic HTML
[div#mainheadline with nested h1.nomarginvertical]

h2 a.link_headline Linked Head, Black Text, No Underline

a.link_nounderline linked text »
a.text_bodysmall link_nounderline linked text goes here »
a.link_reverse Link Item »

p - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dapibus. Nullam congue. Integer ullamcorper magna sit amet lorem blandit nonummy. Fusce vestibulum felis nec sapien. Duis aliquam vehicula purus. Morbi urna metus, molestie ac, rhoncus vel, congue eget, ipsum. Vivamus tempor arcu venenatis nulla.

h2 Proin odio augue, venenatis vitae, malesuada sit amet

h3 Aliquam malesuada tortor nec dui. Sed malesuada, ante quis

h4 - Phasellus elementum, velit sed egestas lacinia, velit nisl convallis

h5 - Phasellus commodo, nibh sed dignissim ultrices, tellus massa posuere sapien
h6 - Nunc eget massa ed massa urna, scelerisque nec, placerat iaculis, feugiat dictum

h3.nomarginbottom - Aliquam malesuada tortor nec dui

p.nomargintop - Suspendisse euismod, mauris ac viverra scelerisque, magna lorem aliquam purus, ut malesuada turpis arcu quis nisl. Suspendisse ante tortor, sagittis id, facilisis sed, scelerisque nec, dolor.

p.nomarginbottom - Cras non turpis id est molestie dapibus. Aliquam adipiscing eros sit amet.

h3.nomarginvertical - Aliquam malesuada tortor nec dui

p.nomargintop - Etiam lobortis fermentum nulla.Nam nec nulla. Donec risus diam, molestie ut, ultrices non, ultrices non, nibh. In ac sapien.

span.text_leadinheadline Praesent sagittis: Donec et risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi odio enim, pulvinar vitae, pretium ut, sodales at, enim. Suspendisse euismod, mauris ac viverra scelerisque, magna lorem aliquam purus, ut malesuada turpis arcu quis nisl.


Default <hr> (above) has been re-defined to make it 1px, flat, and SoM Rule Grey

  1. ol - Default is alt text, slightly smaller than normal body text. Donec risus diam, molestie ut, ultrices non, ultrices non, nibh. In ac sapien.
  2. Etiam lobortis fermentum nulla.
  3. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  4. With <p> Proin odio augue, venenatis vitae, malesuada sit amet

  5. With <p>Suspendisse euismod, mauris ac viverra scelerisque, magna lorem aliquam purus, ut malesuada turpis arcu quis nisl.

  6. With <p> Etiam lobortis fermentum nulla. Nam nec nulla. Donec risus diam, molestie ut, ultrices non, ultrices non, nibh. In ac sapien.
  1. li.text_bodynormal - Apply a class to each list item <li> element (not the <ul>) to modify the default text style. Suspendisse ante tortor, sagittis id, facilisis sed, scelerisque nec, dolor.
  2. li.text_bodylarge - Cras non turpis id est molestie dapibus.
  3. li.text_alert - Aliquam adipiscing eros sit amet nulla. Nam nec nulla.
  4. li.text_allcaps - Aliquam adipiscing eros sit amet nulla. Nam nec nulla.
  5. p.text_bodynormal - Apply a class to a paragraph <p> tag to change the text without changing the list item number.

  6. p.text_bodytiny - With <p> Suspendisse euismod, mauris ac viverra scelerisque, magna lorem aliquam purus, ut malesuada turpis arcu quis nisl.

  7. p.text_highlight - With <p> Etiam lobortis fermentum nulla. Nam nec nulla. Donec risus diam, molestie ut, ultrices non, ultrices non, nibh. In ac sapien.

<blockquote> Sed in ligula. Maecenas iaculis, justo vel pellentesque blandit, lectus nunc aliquet sapien, quis euismod urna nisl vitae pede. Praesent sagittis. Donec et risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi odio enim, pulvinar vitae, pretium ut, sodales at, enim.

<blockquote><p> Sed in ligula. Maecenas iaculis, justo vel pellentesque blandit, lectus nunc aliquet sapien, quis euismod urna nisl vitae pede. Praesent sagittis. Donec et risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi odio enim, pulvinar vitae, pretium ut, sodales at, enim.

p.text_alert - Vestibulum at turpis. Nunc laoreet ante ut nunc. Aliquam et tortor quis risus molestie tristique. Proin blandit arcu non urna. Duis nunc lectus, lobortis nec, eleifend sit amet, pharetra a, erat.

p.text_allcaps - Vestibulum at turpis. Nunc laoreet ante ut nunc. Aliquam et tortor quis risus molestie tristique. Proin blandit arcu non urna. Duis nunc lectus, lobortis nec, eleifend sit amet, pharetra a, erat.

p.text_altfont - Vestibulum at turpis. Nunc laoreet ante ut nunc. Aliquam et tortor quis risus molestie tristique. Proin blandit arcu non urna. Duis nunc lectus, lobortis nec, eleifend sit amet, pharetra a, erat.

p.text_bodylarge - Nam nisl pede, convallis ac, scelerisque eget, porta et, tellus. In leo augue, sagittis sed, cursus ut, rhoncus sit amet, dui. Fusce arcu augue, rutrum id, dictum eu, vehicula vel, dolor.

p.text_bodynormal - Phasellus arcu. Donec id enim eget mauris condimentum congue. Maecenas non dui. Fusce quis velit sit amet ante ultrices mattis. Sed id nibh. Nulla ut velit id urna cursus imperdiet. Vivamus libero. Cras porttitor tempus ipsum. Ut elit.

p.text_bodymedium - Phasellus arcu. Donec id enim eget mauris condimentum congue. Maecenas non dui. Fusce quis velit sit amet ante ultrices mattis. Sed id nibh. Nulla ut velit id urna cursus imperdiet. Vivamus libero. Cras porttitor tempus ipsum. Ut elit.

p.text_bodysmall - Nunc laoreet justo tempor metus. Etiam lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dapibus. Nullam congue. Integer ullamcorper magna sit amet lorem blandit nonummy. Fusce vestibulum felis nec sapien.

p.text_bodytiny - Duis aliquam vehicula purus. Morbi urna metus, molestie ac, rhoncus vel, congue eget, ipsum. Vivamus tempor arcu venenatis nulla. Proin odio augue, venenatis vitae, malesuada sit amet, feugiat sed, nisl. Quisque accumsan mauris sit amet ligula. Nullam in sapien vel lectus semper mattis. Donec consequat luctus velit. Curabitur porta.

p.text_bold - Fusce ipsum purus, lobortis nec, blandit blandit, scelerisque vitae, velit. Suspendisse nec orci. Aliquam malesuada tortor nec dui. Sed malesuada, ante quis semper feugiat, dui dui nonummy magna, quis fringilla ipsum nibh vitae ipsum.

p.text_caption - Vivamus ut nulla vel mi dictum hendrerit. Ut interdum diam id sem. Maecenas elementum cursus pede. Aenean suscipit sem quis tellus posuere sagittis. Sed eleifend leo eget risus. Phasellus elementum, velit sed egestas lacinia, velit nisl convallis velit, at lobortis quam lacus ut eros. Nulla pede.

p.text_highlight - Vivamus ut nulla vel mi dictum hendrerit. Ut interdum diam id sem. Maecenas elementum cursus pede. Aenean suscipit sem quis tellus posuere sagittis. Sed eleifend leo eget risus. Phasellus elementum, velit sed egestas lacinia.

p.text_italic - Vivamus ut nulla vel mi dictum hendrerit. Ut interdum diam id sem. Maecenas elementum cursus pede. Aenean suscipit sem quis tellus posuere sagittis. Sed eleifend leo eget risus. Phasellus elementum, velit sed egestas lacinia.

p.text_leadinheadline - Vivamus ut nulla vel mi dictum hendrerit. Ut interdum diam id sem. Maecenas elementum cursus pede.

p.text_reverse - for text that overlays dark colors

p.text_quote - Nullam fermentum mauris. Etiam malesuada ante hendrerit neque. Integer vel sapien a erat lobortis molestie. Nullam elit elit, scelerisque at, euismod eget, tincidunt sed, pede. Pellentesque tellus enim, semper id, volutpat in, pulvinar eget, nulla. Phasellus commodo, nibh sed dignissim ultrices, tellus massa posuere sapien, quis suscipit eros nunc ac libero.

p.text_spacehoriz - Aliquam tempor, risus a dictum placerat, urna ante aliquet erat, et pulvinar sem nisi at lacus. Ut nonummy, diam vel luctus pulvinar, dolor enim volutpat justo, in blandit leo nisl et nisi. Nunc eget massa. S

p.text_spacenone - ed massa urna, scelerisque nec, placerat iaculis, feugiat dictum, magna. Nulla feugiat. Mauris tristique nibh ut velit. Integer congue ipsum nec sem. Suspendisse dapibus gravida risus. Mauris elementum neque quis ante. Morbi sagittis varius magna.

p.text_spacevert (adds back standard 150% line-height) - Sed in ligula. Maecenas iaculis, justo vel pellentesque blandit, lectus nunc aliquet sapien, quis euismod urna nisl vitae pede. Praesent sagittis. Donec et risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi odio enim, pulvinar vitae, pretium ut, sodales at, enim.

Tables and vertical spacing

table - h1 through h6 and p - nested in table - inserts extra vertical space in most browsers

p all such elements have extra vertical spacing, above and below

Table with table_nobreaks CSS modifier to remove vertical spacing

table.table_nobreaks - removes vertical margins from h1 through h6 and p

p note: removes from all such elements, whether wanted or not. Spacing can be added back in with other controls

Table with CSS margin modifiers on nested elements

table h2.nomargintop - removes top margin from this block element only

p.nomarginbottom - each element must be classed individually to remove or add vertical spacing where needed.

Table with table_standard modifier to add background colors

<th>s get a tan background, bold text Ipsum Factum
table.table_standard creates automatic styling of headings (<th>) and table background. The weight of the cell border rules is determined by setting the cellspacing of the table. Vertical alignment within the cell is also set by the user. sismodignit atum

h4 and other block-level elements insert extra spacing

volore molore

Table with table_standard AND table_nobreaks modifiers

Lorem Ipsum Factum

p table.table_standard table_nobreaks - combining both styles creates the background layout effect and removes all vertical spacing.

valign top

p Lor senisl illut lor irit wis nim dolobore dipis dignis accum nos augiat. Ut wisl ea feu facil ipsuscip er irit aut nonumsan utpate consecte mincinisi.

et vel volore

h4 Lore consecte molumsa

p Digna adipit ullaore aesecte venit prat. Duip eui te mod modigna adignisl in ulputatue dolor ing eugait, sim zzriuscing elessequat, quis digniamet.

Stanford Medicine Resources:

Footer Links: