Elements Documentation

Anchor

EXAMPLE

USAGE (WITHOUT ESCAPES)


								render_element(

								   'anchor',

								   [

								    'class' => [ 'anchor-1' ],
    'text' => 'Demo Anchor',
    'href' => '#',
    'target' => '_blank',

								   ]

								);

MARKUP


									<a href="#" target="_blank" class="bacnet-element bacnet-element-anchor anchor-1">Demo Anchor</a>

Badge

EXAMPLE

Demo Button

USAGE (WITHOUT ESCAPES)


								render_element(

								   'badge',

								   [

								    'class' => [ 'button-1' ],
    'text' => 'Demo Button',
    'href' => '#',
    'target' => '_blank',
    'icon' => [ '' ],
    'icon_position' => 'after',

								   ]

								);

MARKUP


									<a href="#" target="_blank" class="bacnet-element bacnet-element-badge button-1">
		Demo Button			</a>

Button

EXAMPLE

Demo Button

USAGE (WITHOUT ESCAPES)


								render_element(

								   'button',

								   [

								    'class' => [ 'button-1' ],
    'title' => 'Demo Button',
    'href' => '#',
    'target' => '_blank',
    'icon' => [ '#333', 'play', 'Play', 'Play icon', '2', '12', '12' ],
    'icon_position' => 'after',

								   ]

								);

MARKUP


									<a href="#" target="_blank" class="bacnet-element bacnet-element-button button-1 icon icon-after" title="Demo Button">
		Demo Button
	<svg height="12" width="12" color="#333" stroke-width="2" class="icon play" aria-labelledby="title-play-45357 desc-play-45357" role="img">
		<title id="title-play-45357">
			Play		</title>

					
				Play icon			
		
					<use xlink:href="#play"></use>
		
	</svg>

		</a>

Content

EXAMPLE

Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

USAGE (WITHOUT ESCAPES)


								render_element(

								   'content',

								   [

								    'class' => [ 'content-1' ],
    'content' => 'Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.',

								   ]

								);

MARKUP


									<section class="bacnet-element bacnet-element-content content-1">Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</section>

Eyebrow

EXAMPLE

Eyebrow Text

USAGE (WITHOUT ESCAPES)


								render_element(

								   'eyebrow',

								   [

								    'class' => [ 'eyebrow-1' ],
    'text' => 'Eyebrow Text',

								   ]

								);

MARKUP


									<span class="bacnet-element bacnet-element-eyebrow eyebrow-1">Eyebrow Text</span>

Heading

EXAMPLE

Heading Text

USAGE (WITHOUT ESCAPES)


								render_element(

								   'heading',

								   [

								    'class' => [ 'heading-1' ],
    'text' => 'Heading Text',
    'level' => 1,

								   ]

								);

MARKUP


									<h1 class="bacnet-element bacnet-element-heading heading-1">Heading Text</h1>

Icon

EXAMPLE

USAGE (WITHOUT ESCAPES)


								render_element(

								   'icon',

								   [

								    'class' => [ '' ],
    'svg_args' => [ '#00f', 'hamburger', 'Hamburger', 'hamburger icon', '2', '64', '64' ],

								   ]

								);

MARKUP


								<span class="bacnet-element bacnet-element-icon">
	<svg height="64" width="64" color="#00f" stroke-width="2" class="icon hamburger" aria-labelledby="title-hamburger-25747 desc-hamburger-25747" role="img">
		<title id="title-hamburger-25747">
			Hamburger		</title>

					
				hamburger icon			
		
					<use xlink:href="#hamburger"></use>
		
	</svg>

	</span>

Image

EXAMPLE

USAGE (WITHOUT ESCAPES)


								render_element(

								   'image',

								   [

								    'class' => [ 'aspectratio-4-3' ],
    'attachment_id' => 9,
    'size' => 'medium_large',
    'loading' => 'eager',
    'alt' => 'Alt text',

								   ]

								);

MARKUP

Image

EXAMPLE

USAGE (WITHOUT ESCAPES)


								render_element(

								   'image',

								   [

								    'class' => [ 'aspectratio-2-1' ],
    'src' => 'https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    'loading' => 'eager',
    'alt' => 'Alt text',

								   ]

								);

MARKUP


									<img class="bacnet-element bacnet-element-image aspectratio-2-1" src="https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260" loading="eager" alt="Alt text"/>

Input

EXAMPLE

USAGE (WITHOUT ESCAPES)


								render_element(

								   'input',

								   [

								    'class' => [ 'input-1' ],
    'type' => 'text',
    'name' => 'input_1',
    'value' => 'Value',
    'placeholder' => 'Placeholder',
    'disabled' => 'disabled',
    'required' => 'required',

								   ]

								);

MARKUP


								<input id="input_1" name="input_1" placeholder="Placeholder" class="bacnet-element bacnet-element-input input-1" type="text" disabled="disabled" required="required" value="Value"/>

Label

EXAMPLE

Label 1

USAGE (WITHOUT ESCAPES)


								render_element(

								   'label',

								   [

								    'class' => [ 'label-1', 'label-2' ],
    'text' => 'Label 1',
    'for' => 'input_1',

								   ]

								);

MARKUP


									<label for="input_1" class="bacnet-element bacnet-element-label label-1 label-2">Label 1</label>

Logo

EXAMPLE

USAGE (WITHOUT ESCAPES)


								render_element(

								   'logo',

								   [

								    'logo_name' => 'alt_logo',
    'class' => [ 'alternate-logo' ],
    'loading' => 'lazy',
    'alt' => 'BACnet logo',

								   ]

								);

MARKUP


								
<span class="bacnet-element bacnet-element-logo alternate-logo">
	</span>

Select

EXAMPLE

USAGE (WITHOUT ESCAPES)


								render_element(

								   'select',

								   [

								    'class' => [ 'select-1' ],
    'name' => 'input_1',
    'value' => 'option_1',
    'disabled' => '',
    'required' => 'required',
    'options' => [ 'Array', 'Array', 'Array' ],

								   ]

								);

MARKUP


								<select id="input_1" name="input_1" class="bacnet-element bacnet-element-select select-1" required="required">
			<option value='' ></option>
			<option value='option_1' selected>Option 1</option>
			<option value='option_2' >Option 2</option>
	</select>

Textarea

EXAMPLE

Textarea Value

USAGE (WITHOUT ESCAPES)


								render_element(

								   'textarea',

								   [

								    'class' => [ 'textarea-1' ],
    'name' => 'textarea-1',
    'value' => 'Textarea Value',
    'placeholder' => 'Placeholder',
    'disabled' => 'disabled',
    'required' => 'required',
    'readonly' => 'readonly',

								   ]

								);

MARKUP


								<textarea id="textarea-1" name="textarea-1" placeholder="Placeholder" class="bacnet-element bacnet-element-textarea textarea-1" disabled="disabled" required="required" readonly="readonly">Textarea Value</textarea>