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

Optional Website Components

Both the Administrative and Alternative designs share many similar elements / components.

These elements / components can only be used in certain parts of the template, such as:

  1. Homepage Content Area
  2. Inner Page Content Area
  3. Inner Page Right Sidebar

* Do not place any non-navigation content in the column designated expressly for navigation. Left column navigation is both a convention for usability across all Drexel websites and a rule.

Home Page Content Area

There are several options for configuration of the homepage content area.

  1. Slideshow
  2. Custom message
  3. Learn more sidebar
  4. List of links sidebar

Slideshows

Slideshows are optional for site homepages. Currently there are two slideshow options.

  1. Slideshow Version 1
    • Width and height are variable
    • Default copy area background - #07294D
    • Font Family - Futura
    • Font color - #FFFFFF
    • Learn More button below copy
    • Slide navigation arrows and dots at bottom
  2. Slideshow Version 2
    • Width and height are variable
    • Copy area background - #07294D
    • Font Family - Futura
    • Font color - #FFFFFF
    • Entire slide is clickable
    • Slide navigation arrows flush left and right

Slideshow Version 1 Background Color Options

The background color for version 1 can be changed from slide to slide.

  1. Dark Blue (default)
    • Copy area background - #006298
  2. Light Blue
    • Copy area background - #6CACE4
  3. Green
    • Copy area background - #949300
  4. Orange
    • Copy area background - #DE7C00
  5. Red
    • Copy area background - #971B2F

Sidebars

Sidebar Color Options

Homepage sidebars have the option of having different background colors. Inner page sidebars do not have this option.

  1. Light Grey (default)
    • #E1E1E0
  2. Light Brown
    • #BFB8AF
  3. Light Green
    • #BAC5B9
  4. Mixed Colors
    • #E1E1E0 and #BAC5B9

Learn More Sidebars

The Learn More sidebar is available on both the homepage and inner pages.

Homepage Version

  • Overall width is variable
  • Background color - #E1E1E0
  1. Heading
    • Font family - Futura
    • Font color - #07294D
    • Font size - 1.9em
  2. Image
    • Width - 260px
    • Height - 180px
  3. Paragraph
    • Font family - Arial
    • Font color - #000000
    • Font size - 1.1em
    • Line Height - 1.4em
  4. Learn More button

Inner Page Version

  • Overall width is variable
  • Background color - #07294D
  1. Heading
    • Font family - Futura
    • Font color - #FFFFFF
    • Font size - 1.9em
  2. Image
    • Width - 260px
    • Height - 180px
  3. Paragraph
    • Font family - Arial
    • Font color - #FFFFFF
    • Font size - 1.1em
    • Line Height - 1.4em
  4. Learn More button

Profile Sidebars

The Profile Sidebar is available on both the homepage and the inner pages.

Homepage Version

  • Width variable
  • Background color - #E1E1E0
  1. Heading
    • Font family - Futura
    • Font color - #07294D
    • Font size - 1.9em
  2. Image
    • Width - 100px
    • Height - varies
    • Class used to float the image and keep to size can be found on the CSS Classes page
  3. Paragraph
    • Font family - Arial
    • Font color - #000000
    • Font size - 12px
    • Line Height - 1.4em
  4. HTML "strong" element used to create bold text
  5. HTML "em" element used to create italicized text

Inner Page Version

  • Overall width varies
  • Background color - #FFFFFF
  • Border - 1px solid #E1E1E0
  1. Heading
    • Font family - Futura
    • Font size - 1.9em
    • Font color - #07294D
  2. Image
    • Width and height are variable
    • Max width - 240px by proportional height
  3. Department / Title
    • Font family - Arial
    • Font size - 1.1em
    • Font style - italics
    • Font color - #000000
  4. Address / Contact
    • Font family - Arial
    • Font size - 1.1em
    • Font color - #000000
  5. Email
    • Font size - 1.1em
    • Font color - #006699

News Sidebar

A news sidebar is a quick way to showcase the three most recent news stories produced by a department or unit.

  • Overall width is variable
  • Background color - #07294D
  1. Heading
    • Font family - Futura
    • Font color - #FFFFFF
    • Font size - 1.9em
  2. News list item
    • Font family - Arial
    • Font size - 12px
    • Line Height - 1.5em
    • Font weight - bold
    • Hover background color - #FFC600
    • Font color - #006699
  3. Button

Events Sidebar

An events sidebar is a quick way to showcase the three most recent events produced by a department or unit.

  • Overall width is variable
  • Background color - #07294D
  1. Heading
    • Font family - Futura
    • Font color - #FFFFFF
    • Font size - 1.9em
  2. Events list item date / time
    • Font family - Arial
    • Font size - 12px
    • Line Height - 1.5em
    • Font color - #000000
  3. Events list item
    • Font family - Arial
    • Font size - 12px
    • Line Height - 1.5em
    • Font weight - bold
    • Hover background color - #FFC600
    • Font color - #006699
  4. Button

Call to Action Sidebar

A call to action sidebar should lead users to perform an action or gain more information. The entire container functions as a clickable button.

  • Overall width is variable
  • Background color - #FFC600
  1. Arrow Icon
    • Background color - #07294D
    • Arrow color - #FFC600
  2. Heading
    • Font family - Futura
    • Font size - 1.9em
    • Font color - #07294D
  3. Paragraph
    • Font family - Georgia
    • Font size - 1.1em
    • Font style - italics
    • Font color - #006699

Custom Messages

  1. Heading
    • Font family - Futura
    • Font color - #07294D
    • Font size - 170%
  2. Paragraph
    • Font family - Arial
    • Font color - #000000
    • Font size - 12px
    • Line Height - 1.6em
  3. Learn More button

Quicklinks

Quicklinks are available on both homepage and inner pages.

  • Width is variable
  • Background color - #E1E1E0
  1. Heading
    • Font family - Futura
    • Font color - #07294D
    • Font size - 1.9em
  2. List items
    • Font family - Arial
    • Font color - #000000
    • Font size - 12px
    • Line Height - 1.4em
    • Font link color - #006699
    • Font hover decoration - underline

Examples for inner pages will be coming soon.

Videos

It is preferable to upload videos to a Drexel University-associated YouTube or Vimeo account and embedded into the content area, in order to maximize Drexel University's social media presence. The iFrame embed code of these externally-hosted videos must be wrapped in a container using the "fitVids" (i.e. class="fitVids") class attribute in order to make the video responsive.

Alternatively, DragonDrop is a Drexel University web application used for capturing, encoding and publishing rich media for web access. DragonDrop may be a necessary option in some academic settings and when other restrictions arise. In order to make DragonDrop videos responsive, the width and height attributes must be removed.

Examples coming soon.

1. Homepage Content Area

2. Inner Page Content Area
3. Inner Page Right Sidebar
* Do not place any non-navigation content in the column designated expressly for navigation.
  Left column navigation is both a convention for usability across all Drexel websites and a rule.

1. Slideshow
2. Custom message
3. Learn More Sidebar
4. List of Links Sidebar

1. Slideshow Version 1
 •  Width and height vary
 •  Default copy area background - #07294D
 •  Font Family - Futura
 •  Font color - #FFFFFF
 •  Learn More button below copy
 •  Slide navigation arrows and dots at bottom

2. Slideshow Version 2
 •  Width and height vary
 •  Copy area background - #07294D
 •  Font Family - Futura
 •  Font color - #FFFFFF
 •  Entire slide is clickable
 •  Slide navigation arrows flush left and right

Slideshow Version 1 Background Color Option
1. Dark Blue (default)

Slideshow Version 1 Background Color Option
2. Light Blue

Slideshow Version 1 Background Color Option
3. Green

Slideshow Version 1 Background Color Option
4. Orange

Slideshow Version 1 Background Color Option
5. Red

Sidebar Color Option
1. Light Grey (default)

Sidebar Color Option
2. Light Brown

Sidebar Color Option
3. Green

Sidebar Color Option
4. Mixed Colors

Homepage Learn More Sidebar
1. Heading
2. Image
3. Paragraph
4. Learn More button

Inner Page Learn More Sidebar
1. Heading
2. Image
3. Paragraph
4. Learn More button

Homepage Profile Sidebar
1. Heading
2. Image
3. Paragraph
4. HTML "strong" element used to create bold text
5. HTML "em" element used to create italicized text

Inner Page Profile Sidebar
1. Heading
2. Image
3. Department / Title
4. Address / Contact
5. Email

News Sidebar
1. Heading
2. News list item
3. Button

Events Sidebar
1. Heading
2. Event list item date / time
3. Event list item
4. Button

Call to Action Sidebar
1. Arrow Icon
2. Heading
3. Paragraph

Custom Message
1. Heading
2. Paragraph
3. Learn More button