Globals

Colors

Fonts

$font-sans: 'Nunito Sans', sans-serif

$font-serif: 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

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

Paragraph

Description:

Display a paragraph

Usage:

<p>Elementum faucibus <a href="#">vehicula id neque</a> magnis scelerisque quam conubia torquent, auctor nisl quis aliquet venenatis sem sagittis morbi eu, fermentum ipsum congue ultrices non dui lectus pulvinar. Sapien etiam convallis urna suscipit euismod pharetra tellus himenaeos, dignissim consectetur cum suspendisse sem ornare eros enim egestas, cubilia venenatis mauris vivamus elit fringilla duis.</p>

HTML Output:

<p>Elementum faucibus <a href="#">vehicula id neque</a> magnis scelerisque quam conubia torquent, auctor nisl quis aliquet venenatis sem sagittis morbi eu, fermentum ipsum congue ultrices non dui lectus pulvinar. Sapien etiam convallis urna suscipit euismod pharetra tellus himenaeos, dignissim consectetur cum suspendisse sem ornare eros enim egestas, cubilia venenatis mauris vivamus elit fringilla duis.</p>

Elementum faucibus vehicula id neque magnis scelerisque quam conubia torquent, auctor nisl quis aliquet venenatis sem sagittis morbi eu, fermentum ipsum congue ultrices non dui lectus pulvinar. Sapien etiam convallis urna suscipit euismod pharetra tellus himenaeos, dignissim consectetur cum suspendisse sem ornare eros enim egestas, cubilia venenatis mauris vivamus elit fringilla duis.

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

fill (optional) The fill color of the icon. Default: none

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

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

Usage:

<?php wds_firemon_display_svg( array(
			'icon'   => 'facebook-square',
			'title'  => 'Facebook Icon',
			'desc'   => 'Facebook social icon svg',
			'height' => '50',
			'width'  => '50',
			'fill'   => '#20739a',
		) ); ?>

HTML Output:

	<svg
	 height="50" width="50" fill="#20739a"		class="icon icon-facebook-square"
	 aria-labelledby="title-facebook-icon-43560 desc-facebook-icon-43560"		role="img">

					<title id="title-facebook-icon-43560">
				Facebook Icon			</title>
		
					<desc id="desc-facebook-icon-43560">
				Facebook social icon svg			</desc>
		
					<use xlink:href="#icon-facebook-square"></use>
		
	</svg>

Buttons

Button

Description:

Display a button.

Usage:

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

HTML Output:

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

Small Button

Description:

Display a small button.

Usage:

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

HTML Output:

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

Secondary Button

Description:

Display a secondary button.

Usage:

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

HTML Output:

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

Secondary Small Button

Description:

Display a secondary small button.

Usage:

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

HTML Output:

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

Button on Background

Description:

Display a button on a background.

Usage:

<button class="button on-bg" href="#">Click Me</button>

HTML Output:

<button class="button on-bg">Click Me</button>

Secondary Button on Background

Description:

Display a secondary button on a background.

Usage:

<button class="button sec on-bg" href="#">Click Me</button>

HTML Output:

<button class="button sec on-bg">Click Me</button>

Secondary Small Button on Background

Description:

Display a secondary small button on a background.

Usage:

<button class="button sec on-bg small" href="#">Click Me</button>

HTML Output:

<button class="button sec on-bg small">Click Me</button>

Forms

Input

Description:

Display a normal input.

Usage:

<input type="text" placeholder="Search Input">

HTML Output:

<input type="text" placeholder="Search Input">

Textarea

Description:

Display a textarea.

Usage:

<textarea placeholder="Textarea"></textarea>

HTML Output:

<textarea placeholder="Textarea"></textarea>

Radio

Description:

Display a radio.

Usage:

<input type="radio" />

HTML Output:

<input type="radio" />

Checkbox

Description:

Display a checkbox.

Usage:

<input type="checkbox" />

HTML Output:

<input type="checkbox" />

Default Select

Description:

Display default select.

Usage:

<select><option value="option1">Option 1</option><option value="option2">Option 2</option></select>

HTML Output:

<select><option value="option1">Option 1</option><option value="option2">Option 2</option></select>

Cards

Blog Card

Description:

Display a blog card.

Usage:

				<?php
				wds_firemon_display_card( array(
					'date'  => __( 'August 07, 2018', 'firemon'),
					'title' => __( 'Security Gets ‘Baked In’ at VMworld', 'firemon' ),
					'image' => 'https://picsum.photos/740/458/?random',
					'text'  => __( 'Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…', 'firemon' ),
					'url'   => '#',
					'more'  => __( 'Learn More', 'firemon' ),
					'class' => 'blog-card',
				) ); ?>

HTML Output:

	<div class="blog-card card">

					<a class="card-image" href="#" tabindex="-1" target="_self"><img src="https://picsum.photos/740/458/?random" alt="Security Gets ‘Baked In’ at VMworld"></a>
		
		<div class="card-section">

							<span class="date">August 07, 2018</span>
			
			
			
							<h2 class="card-title"><a href="#" target="_self">Security Gets ‘Baked In’ at VMworld</a></h2>
			
							<p class="card-text">Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…</p>
			
							<a class="learn-more" href="#" target="_self">Learn More</a>
			
		</div><!-- .card-section -->
	</div><!-- .card -->

August 07, 2018

Security Gets ‘Baked In’ at VMworld

Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…

Learn More

Horizontal Blog Card

Description:

Display a horizontal blog card.

Usage:

				<?php
				wds_firemon_display_card( array(
					'author' => __( 'Tim Woods', 'firemon' ),
					'date'  => __( 'August 07, 2018', 'firemon'),
					'title' => __( 'Security Gets ‘Baked In’ at VMworld', 'firemon' ),
					'image' => 'https://picsum.photos/740/458/?random',
					'text'  => __( 'Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…', 'firemon' ),
					'url'   => '#',
					'more'  => __( 'Learn More', 'firemon' ),
					'class' => 'blog-card horizontal',
				) ); ?>

HTML Output:

	<div class="blog-card horizontal card">

					<a class="card-image" href="#" tabindex="-1" target="_self"><img src="https://picsum.photos/740/458/?random" alt="Security Gets ‘Baked In’ at VMworld"></a>
		
		<div class="card-section">

							<span class="date">August 07, 2018</span>
			
							<span class="sep">•</span>
			
							<span class="author">Tim Woods</span>
			
							<h2 class="card-title"><a href="#" target="_self">Security Gets ‘Baked In’ at VMworld</a></h2>
			
							<p class="card-text">Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…</p>
			
							<a class="learn-more" href="#" target="_self">Learn More</a>
			
		</div><!-- .card-section -->
	</div><!-- .card -->

August 07, 2018 • Tim Woods

Security Gets ‘Baked In’ at VMworld

Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…

Learn More

In the News Card

Description:

Display an in the news card.

Usage:

				<?php
				wds_firemon_display_in_the_news_card( array(
					'title' => __( 'Security Gets ‘Baked In’ at VMworld', 'firemon' ),
					'image' => 'https://picsum.photos/740/458/?random',
					'text'  => __( 'Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…', 'firemon' ),
				) ); ?>

HTML Output:

	<div class="in-the-news-card background-white no-hover card">

					<div class="card-image"><img src="https://picsum.photos/740/458/?random" alt="Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum."></div>
		
		<div class="card-section">

							<h2 class="card-title color-tenn">Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.</h2>
			
							<div class="card-text color-nevada">Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.</div>
			
		</div><!-- .card-section -->
	</div><!-- .card -->

Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.

Larger Blog Card

Description:

Display a larger blog card.

Usage:

				<?php
				wds_firemon_display_card( array(
					'date'  => __( 'August 07, 2018', 'firemon'),
					'title' => __( 'Security Gets ‘Baked In’ at VMworld', 'firemon' ),
					'image' => 'https://picsum.photos/740/458/?random',
					'text'  => __( 'Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…', 'firemon' ),
					'url'   => '#',
					'class' => 'blog-card large',
				) ); ?>

HTML Output:

	<div class="blog-card large card">

					<a class="card-image" href="#" tabindex="-1" target="_self"><img src="https://picsum.photos/740/458/?random" alt="Security Gets ‘Baked In’ at VMworld"></a>
		
		<div class="card-section">

							<span class="date">August 07, 2018</span>
			
			
			
							<h2 class="card-title"><a href="#" target="_self">Security Gets ‘Baked In’ at VMworld</a></h2>
			
							<p class="card-text">Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…</p>
			
			
		</div><!-- .card-section -->
	</div><!-- .card -->

August 07, 2018

Security Gets ‘Baked In’ at VMworld

Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…

Larger Horizontal Blog Card

Description:

Display a larger horizontal blog card.

Usage:

				<?php
				wds_firemon_display_card( array(
					'author' => __( 'Tim Woods', 'firemon' ),
					'date'  => __( 'August 07, 2018', 'firemon'),
					'title' => __( 'Security Gets ‘Baked In’ at VMworld', 'firemon' ),
					'image' => 'https://picsum.photos/740/458/?random',
					'text'  => __( 'Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…', 'firemon' ),
					'url'   => '#',
					'more'  => __( 'Read More', 'firemon' ),
					'class' => 'blog-card horizontal large',
				) ); ?>

HTML Output:

	<div class="blog-card horizontal large card">

					<a class="card-image" href="#" tabindex="-1" target="_self"><img src="https://picsum.photos/740/458/?random" alt="Security Gets ‘Baked In’ at VMworld"></a>
		
		<div class="card-section">

							<span class="date">August 07, 2018</span>
			
							<span class="sep">•</span>
			
							<span class="author">Tim Woods</span>
			
							<h2 class="card-title"><a href="#" target="_self">Security Gets ‘Baked In’ at VMworld</a></h2>
			
							<p class="card-text">Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…</p>
			
							<a class="learn-more" href="#" target="_self">Read More</a>
			
		</div><!-- .card-section -->
	</div><!-- .card -->

August 07, 2018 • Tim Woods

Security Gets ‘Baked In’ at VMworld

Another VMworld has come and gone, but the latest one was distinctly different from its predecessors—and I’m not talking about the presence of “The Mountain” from “Game…

Testimonial Card

Description:

Display a testimonial card.

Usage:

				<?php
				wds_firemon_display_testimonial_card( array(
					'quote'  => __( 'I can single handedly do the analysis work of an entire remediation team - validate my findings - export the information in a format that is friendly to pass along to my admins - track remediation efforts - and update documentation in one interface.', 'firemon' ),
					'credit' => __( 'Jim D.', 'firemon' ),
					'logo'   => '/wp-content/uploads/2018/12/southwest-1.png',
					'class'  => 'testimonial-card',
				) ); ?>

HTML Output:

	<div>
		<div class="testimonial-card card">

			<div class="card-section">

									<span class="decorative-spacer"></span>
					<div class="card-quote">I can single handedly do the analysis work of an entire remediation team - validate my findings - export the information in a format that is friendly to pass along to my admins - track remediation efforts - and update documentation in one interface.</div>
				
									<div class="credit-container">
													<span class="card-credit">
								Jim D.							</span>
						
													<img class='card-logo' src="/wp-content/uploads/2018/12/southwest-1.png" alt=""></a>
											</div><!-- .credit-container -->
											</div><!-- .card-section -->
		</div><!-- .card -->
	</div>

I can single handedly do the analysis work of an entire remediation team - validate my findings - export the information in a format that is friendly to pass along to my admins - track remediation efforts - and update documentation in one interface.

Jim D.

Icon Product Card

Description:

Display a icon product card.

Usage:

				<?php
				wds_firemon_display_icon_card( array(
					'title' => __( 'Global Policy Controller (GPC)', 'firemon' ),
					'icon' => '/wp-content/uploads/2018/12/security.svg',
					'text'  => __( 'FireMon GPC delivers frictionless security management for complex, hybrid environments, giving security managers and business stakeholders a single, consistent operating model that improves security, increases agility and reduces costs.', 'firemon' ),
					'url'   => '#',
					'icon_image' => 'icon',
					'more'  => __( 'Learn More', 'firemon' ),
					'class' => 'icon-card product',
				) ); ?>

HTML Output:

	<div class="icon-card product card" style="background-color: #ffffff">

		<div class="card-section">

			
							<a class="card-image icon /wp-content/uploads/2018/12/security.svg" href="#" target="_self" tabindex="-1"><img src="https://www.firemon.com/wp-content/themes/firemon/assets/images/svg-icons/dynamic//wp-content/uploads/2018/12/security.svg.svg" alt=""></a>
			
			
							<p class="card-text color-nevada">FireMon GPC delivers frictionless security management for complex, hybrid environments, giving security managers and business stakeholders a single, consistent operating model that improves security, increases agility and reduces costs.</p>
			
							<a class="learn-more" href="#" target="_self">Learn More</a>
			
		</div><!-- .card-section -->
	</div><!-- .card -->

FireMon GPC delivers frictionless security management for complex, hybrid environments, giving security managers and business stakeholders a single, consistent operating model that improves security, increases agility and reduces costs.

Learn More

Icon Help Card

Description:

Display a icon Help card.

Usage:

				<?php
				wds_firemon_display_icon_card( array(
					'title' => __( 'Vulnerability Management', 'firemon' ),
					'icon' => '/wp-content/uploads/2018/12/database.svg',
					'text'  => __( 'Vulnerability management comes with a stack of trouble. It’s tough to make sense of scanner data in the context of your own network, leading you to question: to patch or not to patch?', 'firemon' ),
					'url'   => '#',
					'icon_image' => 'icon',
					'more'  => __( 'Learn More', 'firemon' ),
					'class' => 'icon-card help background-white-lilac',
				) ); ?>

HTML Output:

	<div class="icon-card help background-white-lilac card" style="background-color: #ffffff">

		<div class="card-section">

			
							<a class="card-image icon /wp-content/uploads/2018/12/database.svg" href="#" target="_self" tabindex="-1"><img src="https://www.firemon.com/wp-content/themes/firemon/assets/images/svg-icons/dynamic//wp-content/uploads/2018/12/database.svg.svg" alt=""></a>
			
			
							<p class="card-text color-nevada">Vulnerability management comes with a stack of trouble. It’s tough to make sense of scanner data in the context of your own network, leading you to question: to patch or not to patch?</p>
			
							<a class="learn-more" href="#" target="_self">Learn More</a>
			
		</div><!-- .card-section -->
	</div><!-- .card -->

Vulnerability management comes with a stack of trouble. It’s tough to make sense of scanner data in the context of your own network, leading you to question: to patch or not to patch?

Learn More

Icon Large Card

Description:

Display a large icon card.

Usage:

				<?php
				wds_firemon_display_large_icon_card( array(
					'title' => __( 'Vulnerability Management', 'firemon' ),
					'icon' => '/database',
					'text'  => __( 'Vulnerability management comes with a stack of trouble. It’s tough to make sense of scanner data in the context of your own network, leading you to question: to patch or not to patch?', 'firemon' ),
					'subtitle'  => __( 'Nibh bibendum orci curabitur dapibus mi hac in taciti euismod viverra.', 'firemon' ),
					'url'   => '#',
					'button'  => __( 'Learn More', 'firemon' ),
				) ); ?>

HTML Output:

	<div class="icon-card large card" style="background-color: #ffffff">

		<div class="card-section">

			
			
							<h3 class="card-title color-tenn"><a class="card-link  color-tenn" href="#" target="_self">Vulnerability Management</a></h3>
			
							<h4 class="card-subtitle color-black">Nibh bibendum orci curabitur dapibus mi hac in taciti euismod viverra.</h4>
			
							<p class="card-text color-nevada">Vulnerability management comes with a stack of trouble. It’s tough to make sense of scanner data in the context of your own network, leading you to question: to patch or not to patch?</p>
			
							<a class="button tertiary" href="#" target="_self">View Openings</a>
			
		</div><!-- .card-section -->
	</div><!-- .card -->

Vulnerability Management

Nibh bibendum orci curabitur dapibus mi hac in taciti euismod viverra.

Vulnerability management comes with a stack of trouble. It’s tough to make sense of scanner data in the context of your own network, leading you to question: to patch or not to patch?

View Openings

Mini Card

Description:

Display a mini card.

Usage:

				<?php
				wds_firemon_display_mini_card( array(
					'title'  => __( 'What we're looking forward to at VMworld 2018', 'firemon' ),
					'url'   => '#',
					'more'  => __( 'Learn More', 'firemon' ),
					'image'   => '<img src="https://picsum.photos/125/125/?random" />',
					'class'  => 'mini-card',
				) ); ?>

HTML Output:

	<div class="mini-card card">

					<a class="card-image" href="" target="_self" tabindex="-1"><img src="https://picsum.photos/125/125/?random" /></a>
		
		<div class="card-section">

							<h3 class="card-title color-black"><a class="card-link color-black" href="" target="_self">What we're looking forward to at VMworld 2018</a></h3>
			
			
		</div><!-- .card-section -->
	</div><!-- .card -->