For a better experience, click the Compatibility Mode icon above to turn off Compatibility Mode, which is only for viewing older websites.

CSS Classes

This section is intended for the advanced web user.

CSS classes are the proper way to control the appearance and styling of HTML content on the web.

The optional classes below serve as a pool of available styles from which to choose from, in order to avoid proliferation of duplicate styles repeated on pages across the University, leading to slow performance and difficult maintanability of websites.

When used in conjuntion with eachother, in different arrangements, the below classes make for a powerful, extendable, reusable solution for doing the majority of things needed, such as: light-grids / floats / buttons / percentages / margin / padding / and handling text.

If a very specific custom class is needed, then yes, write that custom class in the academic unit or administrative department's "Styles" item in SiteCore. However, if it is something that can be added to this global list of classes please email: emy26@drexel.edu.

Do not write inline CSS styles.

Before using the classes, review this presentation about consistency.



Button

Description

Initiates a yellow button with white text.


Markup

<a class="button" href="#">Link Name</a>


Example

Link Name

Back to Top


More Button

Description

Initiates a button which displays an arrow offset to the left of a piece of text.


Markup

<a class="more-button" href="#">Link Name</a>


Example

Link Name

Back to Top


Tiny Text

Description

Reduces the size of text by 20%.


Markup

<p class="tiny-text">Text goes here.</p>


Example

Text goes here.

Back to Top


Big Text

Description

Increases the size of text by 20%.


Markup

<p class="big-text">Text goes here.</p>


Example

Text goes here.

Back to Top


Error Text

Description

Makes text red to indicate an error message with an icon offset to the left.


Markup

<p class="error-text">Text goes here.</p>


Example

Text goes here.

Back to Top


Warning Text

Description

Makes text orange to indicate a warning message with an icon offset to the left.


Markup

<p class="warning-text">Text goes here.</p>


Example

Text goes here.

Back to Top


Success Text

Description

Makes text green to indicate a success message with an icon offset to the left.


Markup

<p class="success-text">Text goes here.</p>


Example

Text goes here.

Back to Top


Before List

Description

Removes space before a list. Add class to the element before a list.


Markup

<p class="before-list">Text before a list.</p>


Example

Text before a list WITH class.

  • List item
  • List item

Text before a list WITHOUT class.

  • List item
  • List item

Back to Top


Fade

Description

Initiates a 60% opacity fade on hover.


Markup

<a class="fade" href="#"><img src="my-image.jpg" /></a>


Example

Back to Top


No Scale

Description

Disables scaling on an element, recommended for icons, logos, and other small graphics.


Markup

<img class="no-scale" src="my-image.jpg" />


Example

Back to Top


Percentages

Description

Reduces the size of an element based off the width of its parent container. This can be applied in multiples of 5% from 5 - 95.


Markup

<img class="percent-15" src="my-image.jpg" />
<img class="percent-35" src="my-image.jpg" />
<img class="percent-70" src="my-image.jpg" />


Example



Back to Top


Clearfix

Description

Apply this class to the parent container of floated elements. It will clear floats.


Markup

<div class="clearfix">
Float items inside this container.
</div>


Example

Back to Top


Float Left

Description

Initiates an element to float left. Defaults to 50% width and has minimal margin on the right and bottom sides. These values can be overridden if necessary.


Basic Markup

<div class="clearfix">
<img class="float-left" src="my-image.jpg" />
<p>Text goes here.</p>
</div>


Basic Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Extended Markup - Overriding percent and margin values

<div class="clearfix">
<img class="float-left percent-15 marg-1" src="my-image.jpg" />
<p>Text goes here.</p>
</div>


Extended Example - Overriding percent and margin values

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Top


Float Right

Description

Initiates an element to float right. Defaults to 50% width and has minimal margin on the left and bottom sides. These values can be overridden if necessary.


Basic Markup

<div class="clearfix">
<img class="float-right" src="my-image.jpg" />
<p>Text goes here.</p>
</div>


Basic Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Extended Markup - Overriding percent and margin values

<div class="clearfix">
<img class="float-right percent-15 marg-1" src="my-image.jpg" />
<p>Text goes here.</p>
</div>


Extended Example - Overriding percent and margin values

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Top


Margin

Description

Adds a small amount of margin to an element around each corner. This can be applied in multiples of 1% from 1 - 5.


Markup

<img class="marg-5" src="my-image.jpg" />


Example (red border illustrates space applied)

Back to Top


Padding

Description

Adds a small amount of padding to an element around each corner. This can be applied in multiples of 1% from 1 - 5.


Markup

<img class="pad-5" src="my-image.jpg" />


Example (red border illustrates space applied)

Back to Top


Scale

Description

Scales entire container and all of its contents proportionally. This can be applied in multiples of 10% from 10 - 90.


Markup

<div class="scale-50">
<img src="my-image.jpg" />
<p>Text goes here.</p>
</div>


Example


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Top


Fit Vids

Description

Required to make any non-DragonDrop video (i.e. Vimeo, Youtube) responsive.
Find out more about how to embed Youtube or Vimeo video on your site.


Markup

<div class="fitVids">
[iframe width="560" height="315" src="my-video" frameborder="0" allowfullscreen]
</div>


Example

Back to Top


Marketing Box

Description

An image with text in a faded blue bar sitting on top of the image. A link is necessary. Do not mix double and triple in the same clearfix container. If you want to have a row of three, then a row of two, wrap the first row in a clearfix container, and then the second row in another clearfix container. It is possible to wrap the entire <a> tag in a <div> and put the classes there.


Markup for two in a row

<a class="marketing-box double" href="#">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</a>

Markup for three in a row

<a class="marketing-box triple" href="#">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</a>


Example for two in a row

Example for three in a row

Back to Top


Promo Box

Description

An image with text below it contained in a blue box. Do not mix double and triple in the same clearfix container. A link is necessary. If you want to have a row of three, then a row of two, wrap the first row in a clearfix container, and then the second row in another clearfix container. It is possible to wrap the entire <a> tag in a <div> and put the classes there.


Markup for two in a row

<a class="promo-box double" href="#">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</a>

Markup for three in a row

<a class="promo-box triple" href="#">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</a>


Example for two in a row

Example for three in a row

Back to Top


Info Box

Description

An image with text inside. Not intended to be used with large amounts of text. One sentence caption is ideal. A link can be added but is not necessary. Text box can be positioned to the left (default) or right.


Basic markup

<div class="info-box">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</div>

Markup to position text box to the right

<div class="info-box right">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</div>

Markup with optional link

<div class="info-box">
<a href="#">
<img src="my-image.jpg">
<p>Short text description goes here.</p>
</a>
</div>


Basic example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Example with text box to the right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Example with optional link

Back to Top


Extra Box

Description

An image bar with a title. On hover, extra text becomes visible.


Basic markup

<div class="extra-box">
<img src="my-image.jpg">
<h2>Title Goes Here.</h2>
<p>Short text description goes here.</p>
</div>


Basic example

Recycling

Cans & Bottles, Paper, Printer Cartridges, and more.

Back to Top


Ad Box

Description

An image with a message, which upon hover, reveals more information and links about the initial message. The below example is set up to work inside "grid-12" which is the default inner-page middle column of a 3 column layout or half the width of a home-page layout. May need a clearfix parent container depending upon your usage. Will work with other grid units.


Markup

<div class="ad-box grid-12">
<img src="my-image.jpg">
<h2>Input <em>your</em> message here </h2>
<aside>
<h3>Sub title goes here</h3>
<p>Short text description goes here.</p>
<ul>
<li> <a class="button" href="#">Link Number 1</a></li>
<li> <a class="button" href="#">Link Number 2</a></li>
<li> <a class="button" href="#">Link Number 3</a></li>
</ul>
</aside>
</div>


Basic example

Input your message here

Back to Top


Slide Box

Description

A button with an animated image and description which initiate on hover. Set up to work inside "grid-12" which is the default inner-page middle column of a 3 column layout or half the width of a home-page layout. Not set up to work with other grid units.


Markup

<div class="slide-box">
<a href="#">
<div class="btn-wrap">
<h1>Title of Button</h1>
<p>Short text description goes here.</p>
</div>
</a>
<div class="img-wrap">
<img src="my-image.jpg">
</div>
</div>


Basic example

Back to Top


Pop Box

Description

A list of links. When a link is hovered, a box with an image and description will appear. Default pop out box color is grey. Can be overridden to be orange / blue / green.


Markup

<ul class="pop-box">
<li>
<a href="#">Link name goes here</a>
<aside>
<img src="my-image.jpg">
<em>Short text description goes here.</em>
</aside>
</li>
</ul>


Markup for orange pop out box color

<ul class="pop-box orange">
<li>
<a href="#">Link name goes here</a>
<aside>
<img src="my-image.jpg">
<em>Short text description goes here.</em>
</aside>
</li>
</ul>


Example


Example for orange pop out box color

Back to Top


Title Box

Description

Add to a DIV to wrap children inside a padded white box with a thin grey border with an optional title above.


Markup

<div class="title-box">
<h2>Title goes here.</h2>
<div class="title-box__info">
<p>Text goes here.</p>
</div>
</div>


Example

Title Goes Here

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Top


White Box

Description

Add to a DIV to wrap children inside a padded white box with a thin grey border.


Markup

<div class="white-box">
<p>Text goes here.</p>
</div>


Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Top


Grey Box

Description

Add to a DIV to wrap children inside a padded grey box.


Markup

<div class="grey-box">
<p>Text goes here.</p>
</div>


Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Top


Columns

Description

Add to a DIV to create a css3 based layout as two or three columns. *Will not render in IE 7-9.


Markup for two column

<div class="columns-2">
<p>Text goes here.</p>
</div>

Markup for three column

<div class="columns-3">
<p>Text goes here.</p>
</div>


Example for two column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Example for three column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Top