Genetics Society of America
Globals
Colors
Fonts
$font-sans: "Open Sans", sans-serif
$font-sans-alt: "Muli", sans-serif
$font-serif: Georgia, Times, "Times New Roman", serif
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 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.</p>
HTML Output:
<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.</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.
Link
Description:
Displays a link.
Usage:
<a href="#">Link</a>
HTML Output:
<a href="#">Link</a>
Table
Description:
Display a table
Usage:
<table title="A simple data table" aria-label="A simple data table"> <thead> <tr> <th scope="col">Table Header 1</th> <th scope="col">Table Header 2</th> <th scope="col">Table Header 3</th> <th scope="col">Table Header 4</th> <th scope="col">Table Header 5</th> <th scope="col">Table Header 6</th> </tr> </thead> <tbody> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> <td>Division 4</td> <td>Division 5</td> <td>Division 6</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> <td>Division 4</td> <td>Division 5</td> <td>Division 6</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> <td>Division 4</td> <td>Division 5</td> <td>Division 6</td> </tr> </tbody> </table>
HTML Output:
<table title="A simple data table" aria-label="A simple data table"> <thead> <tr> <th scope="col">Table Header 1</th> <th scope="col">Table Header 2</th> <th scope="col">Table Header 3</th> <th scope="col">Table Header 4</th> <th scope="col">Table Header 5</th> <th scope="col">Table Header 6</th> </tr> </thead> <tbody> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> <td>Division 4</td> <td>Division 5</td> <td>Division 6</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> <td>Division 4</td> <td>Division 5</td> <td>Division 6</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> <td>Division 4</td> <td>Division 5</td> <td>Division 6</td> </tr> </tbody> </table>
| Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 | Table Header 5 | Table Header 6 |
|---|---|---|---|---|---|
| Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Division 6 |
| Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Division 6 |
| Division 1 | Division 2 | Division 3 | Division 4 | Division 5 | Division 6 |
Ordered List
Description:
Display an ordered list.
Usage:
<ol> <li>ordered item</li> <li>ordered item <ul> <li><strong>unordered</strong></li> <li><strong>unordered</strong> <ol> <li>ordered item</li> <li>ordered item</li> </ol> </li> </ul> </li> <li>ordered item</li> <li>ordered item</li> </ol>
HTML Output:
<ol> <li>ordered item</li> <li>ordered item <ul> <li><strong>unordered</strong></li> <li><strong>unordered</strong> <ol> <li>ordered item</li> <li>ordered item</li> </ol> </li> </ul> </li> <li>ordered item</li> <li>ordered item</li> </ol>
- ordered item
- ordered item
- unordered
- unordered
- ordered item
- ordered item
- ordered item
- ordered item
Unordered List
Description:
Display an unordered list.
Usage:
<ul> <li>unordered item</li> <li>unordered item <ul> <li>unordered</li> <li>unordered <ol> <li><strong>ordered item</strong></li> <li><strong>ordered item</strong></li> </ol> </li> </ul> </li> <li>unordered item</li> <li>unordered item</li> </ul>
HTML Output:
<ul> <li>unordered item</li> <li>unordered item <ul> <li>unordered</li> <li>unordered <ol> <li><strong>ordered item</strong></li> <li><strong>ordered item</strong></li> </ol> </li> </ul> </li> <li>unordered item</li> <li>unordered item</li> </ul>
- unordered item
- unordered item
- unordered
- unordered
- ordered item
- ordered item
- unordered item
- unordered item
Blockquote
Description:
Display a blockquote.
Usage:
<blockquote><p>Stay hungry. Stay foolish.</p></blockquote>
HTML Output:
<blockquote><p>Stay hungry. Stay foolish.</p></blockquote>
Stay hungry. Stay foolish.
Code Tag
Description:
Display a code tag.
Usage:
<code>word-wrap: break-word;</code>
HTML Output:
<p>You will learn later on in these tests that <code>word-wrap: break-word;</code> will be your best friend.</p>
You will learn later on in these tests that word-wrap: break-word; will be your best friend.
Emphasize Tag
Description:
Display an <em> tag.
Usage:
<em>italicize</em>
HTML Output:
The emphasize tag should <em>italicize</em> text.
Strong Tag
Description:
Display bold text.
Usage:
<strong>bold<strong>
HTML Output:
<p>This tag shows <strong>bold<strong> text.</strong></strong></p>
This tag shows bold text.
Abbreviation Tag
Description:
Display an abbreviation.
Usage:
<abbr title="Seriously">srsly</abbr>
HTML Output:
<p>The abbreviation <abbr title="Seriously">srsly</abbr> stands for “seriously”.</p>
The abbreviation srsly stands for “seriously”.
Cite Tag
Description:
Display a citation.
Usage:
<cite>Automattic</cite>
HTML Output:
<p>“Code is poetry.” —<cite>Automattic</cite></p>
“Code is poetry.” —Automattic
Strikeout Text
Description:
Display strikeout text.
Usage:
<s>strikeout text</s>
HTML Output:
<p>This tag will let you <s>strikeout text</s>.</p>
This tag will let you strikeout text.
Delete Text
Description:
Display the edited content of a text string.
Usage:
<del>gsa</del>
HTML Output:
<p>We use <del>gsa</del> wd_s to build themes.</p>
We use gsa wd_s to build themes.
Preformatted tag.
Description:
This tag styles large blocks of code.
Usage:
<pre>.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
}</pre>
HTML Output:
<pre>.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
}</pre>
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
}
Keyboard Tag
Description:
To display a key.
Usage:
<kbd>Shift/kbd>
HTML Output:
<p>To paste copied text content stripped of formatting, use <kbd>⌘</kbd>+<kbd>Opt</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>.</p>
To paste copied text content stripped of formatting, use ⌘+Opt+Shift+V.
Subscript Tag
Description:
To display a subscript.
Usage:
<sub>2</sub>
HTML Output:
<p>Getting our science styling on with H<sub>2</sub>O, which should push the “2” down.</p>
Getting our science styling on with H2O, which should push the “2” down.
Superscript Tag
Description:
To display a superscript.
Usage:
<sup>2</sup>
HTML Output:
<p>Still sticking with science and Albert Einstein’s E = MC<sup>2</sup>, which should lift the “2” up.</p>
Still sticking with science and Albert Einstein’s E = MC2, which should lift the “2” up.
Variable Tag
Description:
The HTML Variable element (<var>) represents the name of a variable in a mathematical expression or a programming context.
Usage:
<var>x</var>
HTML Output:
<p>A simple equation: <var>x</var> = <var>y</var> + 2 </p>
A simple equation: x = y + 2
Address Tag
Description:
To display an address.
Usage:
<address> 1 Infinite Loop<br> Cupertino, CA 95014<br> United States </address>
HTML Output:
<address> 1 Infinite Loop<br> Cupertino, CA 95014<br> United States </address>
Cupertino, CA 95014
United States
Definition Lists
Description:
To display defintion lists.
Usage:
<dl> <dt>Definition List Title</dt> <dd>Definition list division.</dd> <dt>Startup</dt> <dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.</dd> <dt>#dowork</dt> <dd>Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.</dd> </dl>
HTML Output:
<dl> <dt>Definition List Title</dt> <dd>Definition list division.</dd> <dt>Startup</dt> <dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.</dd> <dt>#dowork</dt> <dd>Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.</dd> </dl>
- Definition List Title
- Definition list division.
- Startup
- A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
- #dowork
- Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Media
Right-aligned Image
Description:
Display a right-aligned image.
Usage:
<p><img class="alignright size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p> <p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
HTML Output:
<p><img class="alignright size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p> <p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.
Left-aligned Image
Description:
Display a left-aligned image.
Usage:
<p><img class="alignleft size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p> <p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
HTML Output:
<p><img class="alignleft size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p> <p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.
Center-aligned Image
Description:
Display a center-aligned image.
Usage:
<p><img class="aligncenter size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p> <p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
HTML Output:
<p><img class="aligncenter size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p> <p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.
Image with Caption
Description:
Display an image with a caption.
Usage:
<p>[caption id="" align="alignright" width="250"]<img class="size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /> Image Caption.[/caption]</p> <p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
HTML Output:
<p>[caption id="" align="alignright" width="250"]<img class="size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /> Image Caption.[/caption]</p> <p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.
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_gsa_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-75252 desc-facebook-icon-75252" role="img"> <title id="title-facebook-icon-75252"> Facebook Icon </title> <desc id="desc-facebook-icon-75252"> 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:
<div class="search-form"><label for="search-field"><span class="screen-reader-text">To search this site, enter a search term</span></label><input class="search-field" type="text" name="s" value="" placeholder="Search"><input type="submit" class="button button-search" value="Submit"></div>
Email Signup
Description:
Display an email signup form
Usage:
<div class="email-signup-form"><input class="email-signup" type="email" placeholder="Enter your email"><input type="submit" class="button button-email" value="Sign Up"></div>
HTML Output:
<div class="email-signup-form"><input class="email-signup" type="email" placeholder="Enter your email"><input type="submit" class="button button-email" value="Sign Up"></div>
Input
Description:
Display a normal input.
Usage:
<label>Form input</label><input type="text" placeholder="Text input">
HTML Output:
<label>Form input</label><input type="text" placeholder="Text input">
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>
Checkboxes
Description:
Display checkboxes.
Usage:
<p> <label><input type="checkbox" name="checkboxes" value="check_1"> Radio 1</label><br /> <label><input type="checkbox" name="checkboxes" value="check_2"> Radio 2</label><br /> <label><input type="checkbox" name="checkboxes" value="check_3"> Radio 3</label> </p>
HTML Output:
<p> <label><input type="checkbox" name="checkboxes" value="check_1"> Radio 1</label><br /> <label><input type="checkbox" name="checkboxes" value="check_2"> Radio 2</label><br /> <label><input type="checkbox" name="checkboxes" value="check_3"> Radio 3</label> </p>
Radio boxes.
Description:
Display radio boxes.
Usage:
<p> <label><input type="radio" name="radio_button" value="check_1"> Radio 1</label><br /> <label><input type="radio" name="radio_button" value="check_2"> Radio 2</label><br /> <label><input type="radio" name="radio_button" value="check_3"> Radio 3</label> </p>
HTML Output:
<p> <label><input type="radio" name="radio_button" value="check_1"> Radio 1</label><br /> <label><input type="radio" name="radio_button" value="check_2"> Radio 2</label><br /> <label><input type="radio" name="radio_button" value="check_3"> Radio 3</label> </p>
Textarea
Description:
Display a textarea.
Usage:
<textarea id="text_area"></textarea>
HTML Output:
<textarea id="text_area"></textarea>
Generic Elements
Numeric Pagination
Description:
Display numeric pagination.
Usage:
wds_gsa_display_numeric_pagination()
HTML Output:
<nav class="pagination-container"> <a class="prev page-numbers" href="#>«</a> <a class="page-numbers" href="#">1</a> <span aria-current="page" class="page-numbers current">2</span> <a class="page-numbers" href="#">3</a> <a class="next page-numbers" href="#">»</a> </nav>
Cards
Does Candida grow on trees?
Are you planning a visit to Capitol Hill to advocate for science? We asked Giovanna Collu, former Co-Chair of the Early Career Scientist Policy Subcommittee, to discuss the lessons she learned representing GSA at a Hill Day …
Blog Card
Description:
Display a blog card.
Usage:
<?php wds_gsa_display_card( array( 'title' => __( 'Does Candida grow on trees?', 'gsa' ), 'text' => __( 'Are you planning a visit to Capitol Hill to advocate for science? We asked Giovanna Collu, former Co-Chair of the Early Career Scientist Policy Subcommittee, to discuss the lessons she learned representing GSA at a Hill Day …', 'gsa' ), 'link' => __( 'Read More »', 'gsa' ), 'image' => 'https://picsum.photos/740/458/?random', 'category' => __( 'Blog Post', 'gsa' ), 'author' => __( 'Marisa Wexler', 'gsa' ), 'date' => __( 'February 4, 2019', 'gsa' ), 'class' => 'blog-card', ) ); ?>
Improved Genome Sequence of Wild Emmer Wheat Zavitan with the Aid of Optical Maps
Wild emmer (Triticum turgidum ssp. dicoccoides) is the progenitor of all modern cultivated tetraploid wheat. Its genome is large (> 10 Gb) and contains over 80% repeated sequences. The successful whole-genome-shotgun assembly of the wild emmer (accession Zavitan) genome sequence (WEW_v1.0) was an important milestone for wheat genomics. In an effort to improve this assembly, an optical map of accession Zavitan was constructed using Bionano Direct Label and Stain (DLS) technology. The map spanned 10.4 Gb. This map and …
Blog Card - No Image
Description:
Display a blog card with no image.
Usage:
<?php wds_gsa_display_card( array( 'title' => __( 'Improved Genome Sequence of Wild Emmer Wheat Zavitan with the Aid of Optical Maps', 'gsa' ), 'text' => __( 'Wild emmer (Triticum turgidum ssp. dicoccoides) is the progenitor of all modern cultivated tetraploid wheat. Its genome is large (> 10 Gb) and contains over 80% repeated sequences. The successful whole-genome-shotgun assembly of the wild emmer (accession Zavitan) genome sequence (WEW_v1.0) was an important milestone for wheat genomics. In an effort to improve this assembly, an optical map of accession Zavitan was constructed using Bionano Direct Label and Stain (DLS) technology. The map spanned 10.4 Gb. This map and …', 'gsa' ), 'link' => __( 'Read More »', 'gsa' ), 'category' => __( 'G3: Genome Report', 'gsa' ), 'author' => __( 'Tingting Zhu, Le Wang, et. al. ', 'gsa' ), 'date' => __( 'March 1, 2019', 'gsa' ), 'class' => 'no-image', ) ); ?>
Event Card
Description:
Display an event card
Usage:
<?php wds_gsa_display_card( array( 'title' => __( '22nd International C. elegans Conference', 'gsa' ), 'button' => __( 'Learn More', 'gsa' ), 'category' => __( 'Pacific Grove, CA', 'gsa' ), 'date' => __( 'March 12–17, 2019', 'gsa' ), 'class' => 'event-card', ) ); ?>