Skip to content
Elements Documentation
Anchor
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
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
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-79260 desc-play-79260" role="img">
<title id="title-play-79260">
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
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
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
Hamburger
hamburger icon
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-95454 desc-hamburger-95454" role="img">
<title id="title-hamburger-95454">
Hamburger </title>
hamburger icon
<use xlink:href="#hamburger"></use>
</svg>
</span>
Image
USAGE (WITHOUT ESCAPES)
render_element(
'image',
[
'class' => [ 'aspectratio-4-3' ], 'attachment_id' => 9, 'size' => 'medium_large', 'loading' => 'eager', 'alt' => 'Alt text',
]
);
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&cs=tinysrgb&dpr=2&h=750&w=1260" loading="eager" alt="Alt text"/>
Input
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
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
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
Option 1
Option 2
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
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>
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok
arrow-l-blue arrow-l-w arrow-l arrow-r arrow-white caret-down-hover caret-down chevron-down-w chevron-down chevron-left chevron-right circle-x close dot-w-act dot-w external facebook-square hamburger instagram-square linkedin-square list-polygon minus pause pin play plus search-green search topic-icon x youtube-square