style guide

here you can reference the styling of commonly used content elements. most of these are styled via components/normalize/*.css and src/global/variables.css

text

headings

h1 (italic | bold | italic&bold | link | )

h2 (italic | bold | italic&bold | link | )

h3 (italic | bold | italic&bold | link | )

h4 (italic | bold | italic&bold | link | )

h5 (italic | bold | italic&bold | link | )

h6 (italic | bold | italic&bold | link | )

h1 margins

phasellus nec sem in justo pellentesque facilisis. nulla sit amet est. suspendisse feugiat. phasellus gravida semper nisi. donec id justo.

sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. nam at tortor in tellus interdum sagittis. in ac felis quis tortor malesuada pretium. fusce pharetra convallis urna. sed cursus turpis vitae tortor.

heading 2 margins

phasellus nec sem in justo pellentesque facilisis. nulla sit amet est. suspendisse feugiat. phasellus gravida semper nisi. donec id justo.

sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. nam at tortor in tellus interdum sagittis. in ac felis quis tortor malesuada pretium. fusce pharetra convallis urna. sed cursus turpis vitae tortor.

heading 3 margins

phasellus nec sem in justo pellentesque facilisis. nulla sit amet est. suspendisse feugiat. phasellus gravida semper nisi. donec id justo.

sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. nam at tortor in tellus interdum sagittis. in ac felis quis tortor malesuada pretium. fusce pharetra convallis urna. sed cursus turpis vitae tortor.

heading 4 margins

phasellus nec sem in justo pellentesque facilisis. nulla sit amet est. suspendisse feugiat. phasellus gravida semper nisi. donec id justo.

sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. nam at tortor in tellus interdum sagittis. in ac felis quis tortor malesuada pretium. fusce pharetra convallis urna. sed cursus turpis vitae tortor.

heading 5 margins

phasellus nec sem in justo pellentesque facilisis. nulla sit amet est. suspendisse feugiat. phasellus gravida semper nisi. donec id justo.

sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. nam at tortor in tellus interdum sagittis. in ac felis quis tortor malesuada pretium. fusce pharetra convallis urna. sed cursus turpis vitae tortor.

heading 6 margins

phasellus nec sem in justo pellentesque facilisis. nulla sit amet est. suspendisse feugiat. phasellus gravida semper nisi. donec id justo.

sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. nam at tortor in tellus interdum sagittis. in ac felis quis tortor malesuada pretium. fusce pharetra convallis urna. sed cursus turpis vitae tortor.

paragraphs and links

big(italic | bold | italic&bold | link | )

normal (italic | bold | italic&bold | link | )

small (italic | bold | italic&bold | link | )

regular paragraph. etiam iaculis nunc ac metus. bold italic bold and italic. vestibulum eu odio. a link. cras sagittis. sed aliquam ultrices mauris. curabitur a felis in nunc fringilla tristique.

regular paragraph. etiam iaculis nunc ac metus. bold italic bold and italic. vestibulum eu odio. a link. cras sagittis. sed aliquam ultrices mauris. curabitur a felis in nunc fringilla tristique.

element-based small paragraph for suplimentary information (e.g. captions). sed aliquam ultrices mauris. curabitur a felis in nunc fringilla tristique.

element-based big paragraph for suplimentary information (e.g. captions). sed aliquam ultrices mauris. curabitur a felis in nunc fringilla tristique.

blockquotes

basic. lorem ipsum dolar sit etiam iaculis nanc at metus sed aliquam ultrices. lorem ipsum dolar sit etiam iaculis nanc at metus sed aliquam ultrices. lorem ipsum dolar sit etiam iaculis nanc at metus sed aliquam ultrices.

phasellus nec sem in justo pellentesque facilisis. nulla sit amet est. suspendisse feugiat. phasellus gravida semper nisi. donec id justo.

in a paragraph with citation. lorem ipsum dolar sit etiam iaculis nanc at metus sed aliquam ultrices. lorem ipsum dolar sit etiam iaculis nanc at metus sed aliquam ultrices. cite

phasellus nec sem in justo pellentesque facilisis. nulla sit amet est. suspendisse feugiat. phasellus gravida semper nisi. donec id justo.

multiple paragraphs. lorem ipsum dolar sit etiam iaculis nanc at metus sed aliquam ultrices. lorem ipsum dolar sit etiam iaculis nanc at metus sed aliquam ultrices.

lorem ipsum dolar sit etiam iaculis nanc at metus sed aliquam ultrices. lorem ipsum dolar sit etiam iaculis nanc at metus sed aliquam ultrices em.

phasellus nec sem in justo pellentesque facilisis. nulla sit amet est. suspendisse feugiat. phasellus gravida semper nisi. donec id justo.

lists

unordered lists

• unordered list item.
• unordered list item.
• unordered list item. phasellus blandit leo ut odio. praesent vestibulum dapibus nibh. nullam dictum felis eu pede mollis pretium. fusce fermentum. curabitur ullamcorper ultricies nisi. phasellus blandit leo ut odio. praesent vestibulum dapibus nibh.
• unordered list item
  • nested list item.
  • nested list item.
  • unordered list item. phasellus blandit leo ut odio. praesent vestibulum dapibus nibh. nullam dictum felis eu pede mollis pretium. fusce fermentum. curabitur ullamcorper ultricies nisi. phasellus blandit leo ut odio. praesent vestibulum dapibus nibh.
  • nested list item.
• last item.

ordered lists

1. ordered list item.
2. ordered list item.
3. unordered list item. phasellus blandit leo ut odio. praesent vestibulum dapibus nibh. nullam dictum felis eu pede mollis pretium. fusce fermentum. curabitur ullamcorper ultricies nisi. phasellus blandit leo ut odio. praesent vestibulum dapibus nibh.
4. ordered list item.
   1. nested list item.
   2. nested list item.
   3. unordered list item. phasellus blandit leo ut odio. praesent vestibulum dapibus nibh. nullam dictum felis eu pede mollis pretium. fusce fermentum. curabitur ullamcorper ultricies nisi. phasellus blandit leo ut odio. praesent vestibulum dapibus nibh.
   4. nested list item.
5. last item.

1. big ol’ ol list.
2. nested list item.
3. unordered list item. phasellus blandit leo ut odio. praesent vestibulum dapibus nibh. nullam dictum felis eu pede mollis pretium. fusce fermentum. curabitur ullamcorper ultricies nisi. phasellus blandit leo ut odio. praesent vestibulum dapibus nibh.
4. nested list item.

forms

text

label

textarea

radio button

radio button
checked radio button

checkbox

checkbox
checked checkbox

select box

value 1selected value 2value 3

button (with bottom margins)

basic tables

table heading	table heading	table heading	table heading	table heading
row heading	cell	cell	cell	cell
row heading	cell	cell	cell	cell
row heading	cell	cell	cell	cell
row heading	cell	cell	cell	cell
row heading	cell	cell	cell	cell

embedded content

images and captions

iframe