Globals

Primary Colors

Black Rose
$color-black-rose
Paprika
$color-paprika
Medium Electric Blue
$color-medium-electric-blue
Mineshaft
$color-mineshaft

Secondary Colors

Dark Wood
$color-dark-wood
Barley Corn
$color-barley-corn
Bandicoot
$color-bandicoot
Dark Electric Blue
$color-dark-electric-blue
Juniper
$color-juniper
Raven
$color-raven
Eggshell
$color-eggshell
Pampas
$color-pampas

Grays

Dark Gray
$color-dark-gray

Fonts

$font-sans: "ralewayregular", sans-serif

$font-serif: Roboto, Georgia, Times, "Times New Roman", serif

$font-code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace

$font-pre: "Courier 10 Pitch", Courier, monospace

Typography

H1

Description:

Display an H1

Usage:

<h1>This is a headline</h1> or <div class="h1">This is a headline</div>

HTML Output:

<h1>This is a headline one</h1>

This is a headline one

H2

Description:

Display an H2

Usage:

<h2>This is a headline</h2> or <div class="h2">This is a headline</div>

HTML Output:

<h2>This is a headline two</h2>

This is a headline two

H3

Description:

Display an H3

Usage:

<h3>This is a headline</h3> or <div class="h3">This is a headline</div>

HTML Output:

<h3>This is a headline three</h3>

This is a headline three

H3 Subnav Version

Description:

Display an H3 in the Subnavigation

Usage:

<h3 class="sub-nav">This is a headline in the subnavigation</h3> or <div class="h3 subnav">This is a headline in the subnavigatio</div>

HTML Output:

<h3 class="sub-nav">This is a headline three</h3>

H4

Description:

Display an H4

Usage:

<h4>This is a headline</h4> or <div class="h4">This is a headline</div>

HTML Output:

<h4>This is a headline four</h4>

This is a headline four

H5

Description:

Display an H5

Usage:

<h5>This is a headline</h5> or <div class="h5">This is a headline</div>

HTML Output:

<h5>This is a headline five</h5>
This is a headline five

H6

Description:

Display an H6

Usage:

<h6>This is a headline</h6> or <div class="h6">This is a headline</div>

HTML Output:

<h6>This is a headline six</h6>
This is a headline six

<p>

Description:

Display a standard paragraph

Usage:

<p>Curabitur aliquam urna vel tellus auctor aliquet. Suspendisse ac sodales arcu, at posuere eros. Proin venenatis turpis vitae eros viverra lobortis. Nulla id placerat dui, vitae pretium massa. Fusce ut odio sed lacus varius laoreet. Nulla non posuere lectus, at fermentum magna. Ut commodo eu augue ut fringilla. Proin dapibus enim nec orci egestas venenatis.</p>

HTML Output:

<p>Curabitur aliquam urna vel tellus auctor aliquet. Suspendisse ac sodales arcu, at posuere eros. Proin venenatis turpis vitae eros viverra lobortis. Nulla id placerat dui, vitae pretium massa. Fusce ut odio sed lacus varius laoreet. Nulla non posuere lectus, at fermentum magna. Ut commodo eu augue ut fringilla. Proin dapibus enim nec orci egestas venenatis.</p>

Curabitur aliquam urna vel tellus auctor aliquet. Suspendisse ac sodales arcu, at posuere eros. Proin venenatis turpis vitae eros viverra lobortis. Nulla id placerat dui, vitae pretium massa. Fusce ut odio sed lacus varius laoreet. Nulla non posuere lectus, at fermentum magna. Ut commodo eu augue ut fringilla. Proin dapibus enim nec orci egestas venenatis.

Paragraph Lead

Description:

Display a standard paragraph

Usage:

<p class="lead">This is a lead sentence.</p> or <span class="lead">This is a lead sentence</span>

HTML Output:

<p class="lead">This is a paragraph lead.</p>

This is a paragraph lead.

Icons

SVG

Description:

Display inline SVGs.

Parameters:

$args (required) Configuration arguments.

Arguments:

icon (required) The SVG icon file name. Default none

title (optional) The title of the icon. Default: none

desc (optional) The description of the icon. Default: none

Usage:

<?php wds_maloney_get_svg( array( 'icon' => 'facebook-square' ) ); ?>

HTML Output:

<svg class="icon icon-facebook-square " aria-hidden="true" role="img"><title>facebook-square</title><use xlink:href="#icon-facebook-square"></use></svg>

Logos

Buttons

Standard Button

Description:

Display a button.

Usage:

<button class="button" href="#">Click Me</button>

HTML Output:

<button class="button">Click Me</button>

Forms

Standard Input

Description:

Styling for the standard form input.

Usage:

<input type="text" placeholder="Name" name="name" id="name" value="" tabindex="1" />

HTML Output:

<input type="text" placeholder="Name" name="name" id="name" value="" tabindex="1" />

Default Image Sizes

Thumbnail

Description:

Default thumbnail size: 150 x 150, cropped.

Usage:

<?php the_post_thumbnail( 'thumbnail' ); ?>

Medium Image

Description:

Default medium image size, 300 x auto, cropped.

Usage:

<?php the_post_thumbnail( 'medium' ); ?>

Large Image

Description:

Default large image size, 1024 x 1024, cropped.

Usage:

<?php the_post_thumbnail( 'large' ); ?>

Custom Image Sizes

Home Hero Image

Description:

Custom hero image size, 1800 x 865. Size taken from live Fordham law banner images. (Will only stretch to max-width of content container on patterns page - usage will be full-width.)

Usage:

<?php the_post_thumbnail( 'home-hero' ); ?>

Single Post Featured Image

Description:

Custom single post featured image size, 1400 x 673. Aspect ratio the same as the home hero. (Will only stretch to max-width of content container on patterns page.)

Usage:

<?php the_post_thumbnail( 'post-thumb' ); ?>

River of Posts Image

Description:

Custom featured image size for the river of posts, 1024 x 492. Aspect ratio the same as the home hero.

Usage:

<?php the_post_thumbnail( 'river-thumb' ); ?>

Navigation

Breadcrumbs

Description:

Display the breadcrumbs.

Usage:

<?php wds_maloney_do_breadcrumbs(); ?>

HTML Output:

<ul class="site-breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
						<a class="breadcrumb-link" href="https://library.law.fordham.edu" itemscope itemtype="http://schema.org/Thing" itemprop="item">
							<span itemprop="name">Home</span>
						</a>
						<meta itemprop="position" content="1" />
					 &sol; </li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
						<span class="current" itemscope itemtype="http://schema.org/Thing" itemprop="item">
							<span itemprop="name">Patterns</span>
						</span>
						<meta itemprop="position" content="2" />
					</li></ul>