Globals

Colors

Blue
$color-blue
Light Yellow
$color-light-yellow
Black
$color-black
White
$color-white
Red
$color-red

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>

	
Facebook Icon Facebook social icon svg

Buttons

Button

Description:

Display a button.

Usage:

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

HTML Output:

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

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>