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-32005 desc-facebook-icon-32005" role="img"> <title id="title-facebook-icon-32005"> Facebook Icon </title> <desc id="desc-facebook-icon-32005"> Facebook social icon svg </desc> <use xlink:href="#icon-facebook-square"></use> </svg>
Buttons
Forms
Search Form
Description:
Display the search form.
Usage:
<?php get_search_form(); ?>
HTML Output:
<form method="get" class="search-form" action="https://www.firemon.com/"> <label for="search-field"><span class="screen-reader-text">To search this site, enter a search term</span></label> <input class="search-field" id="search-field" type="text" name="s" value="" aria-required="false" autocomplete="off" placeholder="Search" /> <input type="submit" id="search-submit" class="button button-search" value="Submit" /> </form>
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 -->
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 MoreHorizontal 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 -->
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 MoreIn 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 -->
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 -->
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…
Read MoreTestimonial 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>
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 -->