Typography
The Dallas College website currently uses Montserrat for all headings on the website and Open Sans for body and other text.
Fallbacks are for Monserrat are Open Sans, Helvetica, Arial and sans-serif.
Fallbacks for Open Sans are Arial, Helvetica and sans-serif.
Both fonts can be accessed from Google Fonts.
Headings
This is an H2
This is an H3
This is an H4
This is an H5
This is an H6
You can have a regular header And wrap it with the .small class for a subhead
Optional H2 Header for Landing Pages
Apply to a heading using the page-header--xl custom format (Format > Formats > Custom Formats > page-header--xl).
H3 Header With Modular Titles
Apply to a heading using the modular-title custom format (Format > Formats > Custom Formats > modular-title).
H2 Header with Red
Apply to a heading using the text-secondary custom format (Format > Formats > Custom Formats > text-secondary).
H2 Header with Dark Blue
Apply to a heading using the text-primary custom format (Format > Formats > Custom Formats > text-primary).
Emphasis Fonts
The cb-* custom formats add emphasis to text needs a stronger font but doesn't fit a proper heading hierarchy structure.
cb-title-light
Apply to text using the cb-title-light custom format (Format > Formats > Custom Formats > cb-title-light).
cb-title-sm
Apply to text using the cb-title-sm custom format (Format > Formats > Custom Formats > cb-title-sm).
cb-title
Apply to text using the cb-title custom format (Format > Formats > Custom Formats > cb-title).
cb-title-lg
Apply to text using the cb-title-lg custom format (Format > Formats > Custom Formats > cb-title-lg).
cb-title-xl
Apply to text using the cb-title-xl custom format (Format > Formats > Custom Formats > cb-title-xl).
Paragraphs
This is lead paragraph text used by applying lead custom format (Format > Formats > Custom Formats > lead) to a <p> and should be used to emphasize the first sentence(s) of an intro to a page or section.
This is regular paragraph text which is displayed at 16px using Open Sans. This is how a hyperlink appears in a regular paragraph. This is regular paragraph text which is displayed at 16px using Open Sans. This is how a hyperlink appears in a regular paragraph.
This is a new regular paragraph text which is displayed at 16px using Open Sans. This is how a hyperlink appears in a regular paragraph.
This is paragraph with .small text and should be used when styling a note, footnote, annotation or aside.
Lists
Unordered Lists
- Item One
- Item Two
- Item Three
Ordered Lists
- Item One
- Item Two
- Item Three
Unstyled Lists
Apply to a list using the list-unstyled custom format (Format > Formats > Custom Formats > list-unstyled).
- Item 1
- Item 2
- Item 3
Inline List
Apply to a list using the list-inline custom format (Format > Formats > Custom Formats > list-inline).
- Item 1
- Item 2
- Item 3
List With Bottom Border
Apply to a list using the list-border-bottom custom format (Format > Formats > Custom Formats > list-border-bottom).
- Item 1
- Item 2
- Item 3
List Column Count
Apply two or three columns to a list using list-col-count-2 or list-col-count-3. Columns read top to bottom and then left to right.
- Item One
- Item Two
- Item Three
- Item Four
- Item Five
- Item Six
- Item Seven
- Item Eight
- Item Nine
- Item Ten
- Item One
- Item Two
- Item Three
- Item Four
- Item Five
- Item Six
- Item Seven
- Item Eight
- Item Nine
- Item Ten
Action Links
Action links provide a special emphasis on links as an alternative to a default hyperlink or a link styled as a button.
Standard Action Links
Apply to a list using the action-link custom format (Format > Formats > Custom Formats >action-link).
Quite Action Links
Apply to a list using the action-link-quiet custom format (Format > Formats > Custom Formats >action-link-quiet).
Action Links in an Inline List
You can combine action links with an inline list by applying both the action-link custom format and list-inline to an ordered or unordered list.
You can also center the list using the TinyMCE alignment options.
Blockquote
Standard Blockquote
You all are an integral part of Dallas College, regardless of what your role is all about. Regardless of title. Regardless of position. You are Dallas College. You connect people and ideas. You are the solution to solving the problems of those in need. You are hope. Dallas College cannot function without you. I hope you will stand with us as we transform lives and communities, creating hope and futures, bridging what divides us through education.
Blockquote With a Source
View source (Tools > Source code) to replicate HTML structure:
A well-known quote, contained in a blockquote element.
Indent
Apply to a paragraph using the indent custom format (Format > Formats > Custom Formats > indent).
You all are an integral part of Dallas College, regardless of what your role is all about. Regardless of title. Regardless of position. You are Dallas College. You connect people and ideas. You are the solution to solving the problems of those in need. You are hope. Dallas College cannot function without you. I hope you will stand with us as we transform lives and communities, creating hope and futures, bridging what divides us through education.