Globals
Colors
Fonts
$font-sans: "Open Sans", 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
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.
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 flegfleg_s_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-3597 desc-facebook-icon-3597" role="img"> <title id="title-facebook-icon-3597"> Facebook Icon </title> <desc id="desc-facebook-icon-3597"> 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://kompetenz-trauma-kinderschutz.de/"> <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">
HTML Output:
<input type="text">
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>
