Here are some examples of styles for reference.  Try inspecting the page and adding t-gold, t-conversions or t-network-services to the body class (you might need to reload the page to try these out). This, by the way is basic, normal copy styling. This is bold. This is italic. This is a link.

This is a h1 default class

This is a h1, class=”c1f”

This is a h1, class=”c1b”

This is a h1, class=”c2f”

This is a h1, class=”c2b”

This is a h1, class=”c1″

This is a h1, class=”c2″

This is a h2 default class

This is a h2, class=”c1f”

This is a h2, class=”c1b”

This is a h2, class=”c2f”

This is a h2, class=”c2b”

This is a h2, class=”c1″

This is a h2, class=”c2″

This is an h2 class=”fancy”

… and on down

Buttons – though some of these styles can be used for other stuff

This is an a class=”button” Called a CTA or Call To Action button. Use these for most action links. buttons can also be combined with directional classes as follows.
“button up” “button left” “button down”

“button for .pdf” button for .ppt” button for .doc” button for external link

This is an a class=”button wide”

This is an a class=”button big”

This is an a class=”button big wide”

This is an a class=”button lightgreen”

This is an a class=”button bottom” it sticks to the bottom of the content

This is an alternate category colored class=”button2″ for inside blockquotes

This is a link to a PDF it gets the icon automatically.
This is a link to a PPT
This is a link to a DOC
This is an external link
This is an external link

Use class=”noicon” to turn the icon off (like this one)

This is an h1 inside a blockquote

This is a blockquote, or a pull quote. use for highlighting a sentence or 2 from the content. This is the normal content information.

This is an h2 in a blockquote

More paragraph copy. This is a link in the quote.

This is an h3 in a blockquote

and even more paragraph content.

Alerts

this header, just so you know, is style=”clear:both” to get us out from beside that blockquote.

This is a p class=”alert”

This is a p class=”alert-help” or “success”

This is a p class=”alert-info” or “notice”

This is a p class=”alert-error” or “error”

Definition Lists

This is the definition term

this is the definition description. this is the definition description. this is the definition description. this is the definition description.

This is the definition term

this is the definition description. this is the definition description. this is the definition description. this is the definition description.

This is the definition term

this is the definition description. this is the definition description. this is the definition description. this is the definition description.

This is the definition term

this is the definition description. this is the definition description. this is the definition description. this is the definition description.

Some Utility Styles

This is a span class=”emph” Used for stuff like NEW!
This is a span class=”fineprint”
This is a span class=”credit” (not sure where this is used)
.nomargin is just that, no margin
.nomargin is zero margin, .nogutter is negative margin to compensate for @gutter px
.nogutter is useful when make a Sidebar CPT of links, and using a ul class=”fancy”, make it a ul class=”fancy nogutter” and it’ll look right.
.floatright, .floatleft

Cards Element

GitLab issue 88 is going to rename leadership-block to cards
looks like this – inspect the code to reuse HTML

div class=”fourcols cards”

div class=”threecols cards”

div class=”twocols cards”

This is a Table

this is a table class=”sortable” (tabledata, if you see it still is a holdover from the old cuanswers). It automatically zebra stripes for you.

un-ordered lists with the “fancy” class

• Thing One
• Thing Two
• You get the point?

ul.fancy.compact

• Thing One
• Thing Two
• You get the point?

ol.fancy

1. Thing One
2. Thing Two
3. Thing Three
4. You get the point?
5. This is an a inside a fancy ol