• dark maroon #5b0013
• official maroon #7a0019
• light maroon #900021
• dark gold #ffb71e
• official gold #ffcc33
• light gold #ffde7a

Neutral grays for text

• darker gray #333333
• dark gray #5a5a5a
• medium gray #777677

Neutral grays for backgrounds

• light gray #d5d6d2
• lighter gray #f0efee
• off-white #f9f7f6

'Open Sans', sans-serif

​​‌​‌A​‌B​‌C​‌Ć​‌Č​‌D​‌Đ​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌Š​‌T​‌U​‌V​‌W​‌X​‌Y​‌Z​‌Ž​‌
​​‌​‌a​‌b​‌c​‌č​‌ć​‌d​‌đ​‌e​‌f​‌g​‌h​‌i​‌j​‌k​‌l​‌m​‌n​‌o​‌p​‌q​‌r​‌s​‌š​‌t​‌u​‌v​‌w​‌x​‌y​‌z​‌ž​‌
​​‌​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌
​​‌​‌‘​‌?​‌’​‌“​‌!​‌”​‌(​‌%​‌)​‌[​‌#​‌]​‌{​‌@​‌}​‌/​‌&​‌<​‌-​‌+​‌÷​‌×​‌=​‌>​‌®​‌©​‌$​‌€​‌£​‌¥​‌¢​‌:​‌;​‌,​‌.​‌*

A block quotation (also known as a long quotation or extract) is a quotation in a written document , that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences . Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer sucessive paragraphs indented with no margins between them.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and distinguished visually. If a block quote is removed from the article, no information is lost.

Heading Level 1— 2em

Heading Level 2— 1.77em

Heading Level 3— 1.38em

Heading Level 4— 1.22em

Heading Level 5— 1.125em

Heading Level 6— 1.125em

This is an example of a pull quote. Use this to highlight text that is within the content of your web page. UR Web Team

Pull quotes are short excerpts from the presented text. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article. If a pull quote is removed from the article, no information is lost.

This is an example of a pull quote. Use this to highlight text that is within the content of your web page. UR Web Team

Photo credit: Morris team

Folwell has been built to include the Font Awesome 5.0 library.

Carmen Martin with the Bell Museum’s Pleistocene Minnesota diorama, featuring a (synthetic) woolly mammoth, giant beaver, and glacier, and a real musk ox.

Small Button Regular Button Emphasis Button

Outline Button

Full Width Button

Give Button

“For each of us, he was a ready consultant, part of the Clear Adviser Network , and an always supportive and enthusiastic champion of our nascent ideas,” says a former student.

I have attempted to develop funding for students, a more coherent curriculum for our graduate programs, and unique research experiences unavailable at the other university in the world.

Link: Emphasis

This is an emphasis link. Use it outside of your body content, similar to how you'd use a button.

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. Lists can be nested inside of each other
   1. This is a nested list item
   2. This is another nested list item in an ordered list
      1. This is a nested list item
      2. This is another nested list item in an ordered list
         1. This is a nested list item
         2. This is another nested list item in an ordered list
4. This is the last list item

• This is a list item in an unordered list
• An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
• Lists can be nested inside of each other
  • This is a nested list item
  • This is another nested list item in an unordered list
    • This is a nested list item
    • This is another nested list item in an unordered list
      • This is a nested list item
      • This is another nested list item in an unordered list
• This is the last list item

A stylized list of links is available for times when your site needs a nice-looking list of links.

• Center for Genome Engineering
• Center for Immunology
• Center for Magnetic Resonance Research
• Center of American Indian and Minority Health
• Deborah E. Powell Center for Women's Health
• Developmental Biology Center
• Institute for Engineering in Medicine

Left aligned image at 50%

• This style sets the image width to 50% of its containing pane and aligns it left.
• Right and bottom margins are built in so text and other content doesn’t about the image.
• A caption style has been applied to the text below the image.

Right aligned image at 50%

• This style sets the image width to 50% of its containing pane and aligns it right.
• Right and bottom margins are built in so text and other content doesn’t about the image.
• A caption style has been applied to the text below the image.

Left aligned image at 33%

• This style sets the image width to 33% of its containing pane and aligns it left.
• Right and bottom margins are built in so text and other content doesn’t about the image.
• A caption style has been applied to the text below the image.

Right aligned image at 33%

• This style sets the image width to 33% of its containing pane and aligns it right.
• Right and bottom margins are built in so text and other content doesn’t about the image.
• A caption style has been applied to the text below the image.

Left aligned image at 20%

• This style sets the image width to 20% of its containing pane and aligns it left.
• Right and bottom margins are built in so text and other content doesn’t about the image.
• A caption style has been applied to the text below the image.

Right aligned image at 20%

• This style sets the image width to 20% of its containing pane and aligns it right.
• Right and bottom margins are built in so text and other content doesn’t about the image.
• A caption style has been applied to the text below the image.

Left aligned image at actual size

• This style does not adjust the image size, but positions it to be aligned left.
• This style is best used for images smaller than 200 pixels wide. Styles used for larger images would stretch the image and make it pixelated.
• Right and bottom margins are built in so text and other content doesn’t about the image.

Right aligned image at actual size

• This style does not adjust the image size, but positions it to be aligned right.
• This style is best used for images smaller than 200 pixels wide. Styles used for larger images would stretch the image and make it pixelated.
• Right and bottom margins are built in so text and other content doesn’t about the image.

Circle image (made from a square)

• This style can be used in conjunction with other image styles to align the image.
• This style takes a square image and turns it into a circle. It is very important that you crop and save the image as a square for this to work. For best results, it should be paired with a 1:1 ratio square image.

Full sized image

• This style sets the image to be 100% of the full width of its containing pane, minus any padding that the pane may have built into it.
• This style may distort smaller images and make them blurry. It is best used in smaller columns, or with landscape-oriented images.
• Note: High-resolution images take a considerable amount of time to load - it is best to optimize them for the web.

Expand all