Wilmington University

Wilmington University Design System

Icons and Stats

WilmU currently uses Font Awesome version 5 single color and duotone icons. We are in the process of updating to version 6 and will provide updates within the design system once implemented across the website.

Proof Points

For proof points, icons should be one of the two options to complement the information but not call too much attention to it. The PRIMARY version is styled with class Icon-primary (code snippets below) and uses our primary (#00843d) and primary 4 (#014e25) colors. The NEUTRAL version is styled with class Icon-neutral and uses our neutral 1 (#d1d1d1) and neutral 2 (#949494) colors.

Stacked

Immediate impact

3-week intensive programs, offered 100% online with in-person options, provide sought-after skills you can use immediately on the job.

Engaging instruction led by experts

You'll learn from industry leaders with subject matter expertise gained from real-world experience

Big return on investment

Your time and resources are well spent on courses that yield tangible results quickly at a price that makes sense.

Immediate impact

3-week intensive programs, offered 100% online with in-person options, provide sought-after skills you can use immediately on the job.

Engaging instruction led by experts

You’ll learn from industry leaders with subject matter expertise gained from real-world experience

Big return on investment

Your time and resources are well spent on courses that yield tangible results quickly at a price that makes sense.


Horizontal

Direct Mail

Location Name
Address Line 1
Address Line 2

Select your program of interest and review any associated Admission Requirements

Discover our 200+ career-relevant programs and the requirements for admissions.

Choose your start date

Our open admissions policy allows your to choose from six start times per year for most programs.

Stats

More color options exist with stats. Color choice depends on the purpose and location of the stats on the page (top-of-page main focus area, lower-on-page supporting section). You should never mix yellow and green in one icon!

Stacked

40+ clubs and organizations.

16 NCAA division II athletic teams.

Yellow-ribbon military friendly instituion.

Alternating Primary & Accent
  • Accent: #F9C22B and #E2AE3D
  • Primary: #00843D and #014E25

40+ clubs and organizations.

16 NCAA division II athletic teams.

Yellow-ribbon military friendly instituion.

Primary and Neutral

#00843D and #949494

40+ clubs and organizations.

16 NCAA division II athletic teams.

Yellow-ribbon military friendly instituion.

Primary only

#00843D and #014E25

40+ clubs and organizations.

16 NCAA division II athletic teams.

Yellow-ribbon military friendly instituion.

Accent and Neutral

#F9C22B and #94949

Horizontal

40+ clubs and organizations.

16 NCAA division II athletic teams.

Yellow-ribbon military friendly instituion.


Html/CSS

Single Proof Point Code Snippet

See the Pen Icon Stacked by Wilmington University (@WilmU01) on CodePen.

Proof Point Group Code Snippet

See the Pen Icon Stacked Neutral by Wilmington University (@WilmU01) on CodePen.

Stats Code Snippet

See the Pen Stat by Wilmington University (@WilmU01) on CodePen.

Class List

  • .Icon = Horizontal proof point
  • .IconStacked = Stacked proof point
  • .Stat = Stat
  • .StatStacked = Stacked stat
  • .Icon-primary = Primary color for icons
  • .Icon-primaryReversed = Primary color for icons reversed
  • .Icon-accent = Accent color for icons
  • .Icon-accentReversed = Accent color for icons reversed
  • .Icon-neutral = Neutral color for icons
  • .Icon-neutralReversed = Neutral color for icons reversed
  • .Icon-primaryNeutral = Primary and Neutral color for icons
  • .Icon-neutralPrimary = Primary and Neutral color for icons reversed
  • .Icon-accentNeutral = Accent and Neutral color for icons
  • .Icon-neutralAccent = Accent and Neutral color for icons reversed
  • .Icon-content and .IconStacked-content = class for the content container within a proof point
  • .Stat-number and .StatStacked-number = class for the span that wraps a number in a stat
  • .Stat-info and .StatStacked-info = class for the span that wraps the info/content in a stat