Skip to content
Modules Documentation
Accordion
EXAMPLE
Accordion Title 1
Accordion Title 2
Accordion Title 3
USAGE (WITHOUT ESCAPES)
render_module(
'accordion',
[
'class' => [ 'anchor-1' ], 'items' => [ 'Array', 'Array', 'Array' ],
]
);
MARKUP
<div class="bacnet-module bacnet-module-accordion anchor-1">
<div class="accordion-item accordion-level-1"
id="item-accordion-item-0"
>
<button id="button-accordion-item-0" class="bacnet-element bacnet-element-button accordion-title single" aria-controls="accordion-content-0" title="Accordion Title 1">
Accordion Title 1 </button>
<section class="bacnet-element bacnet-element-content accordion-content hidden" id="accordion-content-0" aria-hidden="true">Accordion item content.</section>
</div>
<div class="accordion-item accordion-level-1"
id="item-accordion-item-1"
>
<button id="button-accordion-item-1" class="bacnet-element bacnet-element-button accordion-title single" aria-controls="accordion-content-1" title="Accordion Title 2">
Accordion Title 2 </button>
<section class="bacnet-element bacnet-element-content accordion-content hidden" id="accordion-content-1" aria-hidden="true">Accordion item content.</section>
</div>
<div class="accordion-item accordion-level-1"
id="item-accordion-item-2"
>
<button id="button-accordion-item-2" class="bacnet-element bacnet-element-button accordion-title single" aria-controls="accordion-content-2" title="Accordion Title 3">
Accordion Title 3 </button>
<section class="bacnet-element bacnet-element-content accordion-content hidden" id="accordion-content-2" aria-hidden="true">Accordion item content.</section>
</div>
</div>
Badges
USAGE (WITHOUT ESCAPES)
render_module(
'badges',
[
'badges' => [ 'Array', 'Array', 'Array', 'Array', 'Array', 'Array', 'Array', 'Array', 'Array', 'Array', 'Array' ],
]
);
MARKUP
<div class="bacnet-module bacnet-module-badges">
<a href="#" class="bacnet-element bacnet-element-badge primary">
Primary </a>
<a href="#" class="bacnet-element bacnet-element-badge secondary">
Secondary </a>
<a href="#" class="bacnet-element bacnet-element-badge success">
Success </a>
<a href="#" class="bacnet-element bacnet-element-badge danger">
Danger </a>
<a href="#" class="bacnet-element bacnet-element-badge warning">
Warning </a>
<a href="#" class="bacnet-element bacnet-element-badge info">
Info </a>
<a href="#" class="bacnet-element bacnet-element-badge light">
Light </a>
<a href="#" class="bacnet-element bacnet-element-badge dark">
Dark </a>
<a href="#" class="bacnet-element bacnet-element-badge primary pill">
Pill Primary </a>
<a href="#" class="bacnet-element bacnet-element-badge secondary pill">
Pill Secondary </a>
<a href="#" class="bacnet-element bacnet-element-badge success pill">
Pill Success </a>
</div>
Call To Action
USAGE (WITHOUT ESCAPES)
render_module(
'call-to-action',
[
'class' => [ 'cta-1' ], 'attachment_id' => 5, 'eyebrow' => 'Eyebrow Text', 'heading_args' => [ 'Heading Text' ], 'button' => [ 'Learn More', '#' ],
]
);
MARKUP
<div class="bacnet-module bacnet-module-cta cta-1">
<span class="bacnet-element bacnet-element-eyebrow">Eyebrow Text</span>
<h2 class="bacnet-element bacnet-element-heading">Heading Text</h2>
<a href="#" class="bacnet-element bacnet-element-button" title="Learn More">
Learn More </a>
</div>
Card
EXAMPLE
Eyebrow Text
Heading Text
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Learn More
USAGE (WITHOUT ESCAPES)
render_module(
'card',
[
'class' => [ 'card-1' ], 'attachment_id' => 9, 'eyebrow' => 'Eyebrow Text', 'heading' => 'Heading Text', 'content' => 'Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'button' => [ 'Learn More', '#' ],
]
);
MARKUP
<div class="bacnet-module bacnet-module-card card-1">
<span class="bacnet-element bacnet-element-eyebrow">Eyebrow Text</span>
<h2 class="bacnet-element bacnet-element-heading h3">Heading Text</h2>
<section class="bacnet-element bacnet-element-content">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
<a href="#" class="bacnet-element bacnet-element-button" title="Learn More">
Learn More </a>
</div>
Carousel
EXAMPLE
Carousel
chevron-left
Carousel prev Button
Eyebrow Text 1
Heading Text
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Eyebrow Text 2
Heading Text
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Eyebrow Text 3
Heading Text
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
chevron-left
Carousel next Button
Carousel dots
USAGE (WITHOUT ESCAPES)
render_module(
'carousel',
[
'class' => [ 'carousel-1' ], 'heros' => [ 'Array', 'Array', 'Array' ],
]
);
MARKUP
<div
class="bacnet-module bacnet-module-carousel carousel-1" x-data="{
swiper: null,
focusableWhenVisible: {
'x-intersect:enter'() {
this.$el.removeAttribute('tabindex')
},
'x-intersect:leave'() {
this.$el.setAttribute('tabindex', '-1')
},
}
}"
x-init="swiper = new Swiper($refs.slider, {
loop: false,
slidesPerView: 1,
autoplay: {
delay: 4000,
},
allowTouchMove: true,
speed: 500,
pagination: {
el: '.carousel-dots',
clickable: true,
},
breakpoints: {
850: {
allowTouchMove: false,
}
},
a11y: {
slideRole: 'listitem',
}
})">
<span id="carousel-content-label" class="sr-only" hidden>Carousel</span>
<div
x-on:keydown.right="swiper.slideNext()"
x-on:keydown.left="swiper.slidePrev()"
tabindex="-1"
>
<button class="bacnet-element bacnet-element-button carousel-button icon icon-after" aria-aria-labelledby="prev-button-label" aria-role="button" @click="swiper.slidePrev()">
<svg height="50px" width="50px" class="icon chevron-left" aria-hidden="true" role="img">
<title id="title-chevron-left-56893">
chevron-left </title>
<use xlink:href="#chevron-left"></use>
</svg>
</button>
<span id="prev-button-label" class="sr-only" hidden>Carousel prev Button</span>
<div
x-ref="slider"
tabindex="-1"
class="swiper-container"
>
<div
class="swiper-wrapper carousels"
tabindex="-1"
role="list"
aria-labelledby="carousel-content-label"
>
<div class="slide swiper-slide" role="listitem">
<div class="bacnet-module bacnet-module-hero cta-1">
<div class="background">
<img class="bacnet-element bacnet-element-image" src="https://bacnetglobal.org/wp-content/themes/bacnet/build/images/block-previews/carousel-bg.jpg" loading="eager" alt="Heading Text"/>
</div>
<div class="container">
<div class="hero-content">
<span class="bacnet-element bacnet-element-eyebrow">Eyebrow Text 1</span>
<h1 class="bacnet-element bacnet-element-heading">Heading Text</h1>
<section class="bacnet-element bacnet-element-content">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
</div>
</div>
</div>
</div>
<div class="slide swiper-slide" role="listitem">
<div class="bacnet-module bacnet-module-hero cta-1">
<div class="background">
<img class="bacnet-element bacnet-element-image" src="https://bacnetglobal.org/wp-content/themes/bacnet/build/images/block-previews/carousel-bg.jpg" loading="eager" alt="Heading Text"/>
</div>
<div class="container">
<div class="hero-content">
<span class="bacnet-element bacnet-element-eyebrow">Eyebrow Text 2</span>
<h1 class="bacnet-element bacnet-element-heading">Heading Text</h1>
<section class="bacnet-element bacnet-element-content">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
</div>
</div>
</div>
</div>
<div class="slide swiper-slide" role="listitem">
<div class="bacnet-module bacnet-module-hero cta-1">
<div class="background">
<img class="bacnet-element bacnet-element-image" src="https://bacnetglobal.org/wp-content/themes/bacnet/build/images/block-previews/carousel-bg.jpg" loading="eager" alt="Heading Text"/>
</div>
<div class="container">
<div class="hero-content">
<span class="bacnet-element bacnet-element-eyebrow">Eyebrow Text 3</span>
<h1 class="bacnet-element bacnet-element-heading">Heading Text</h1>
<section class="bacnet-element bacnet-element-content">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="bacnet-element bacnet-element-button carousel-button carousel-button-next icon icon-after" aria-aria-labelledby="next-button-label" aria-role="button" @click="swiper.slideNext()">
<svg height="50px" width="50px" color="ffffff" class="icon chevron-left" aria-hidden="true" role="img">
<title id="title-chevron-left-53921">
chevron-left </title>
<use xlink:href="#chevron-left"></use>
</svg>
</button>
<span id="next-button-label" class="sr-only" hidden>Carousel next Button</span> </div>
<span id="carousel-dots" class="sr-only" hidden>Carousel dots</span>
<div tabindex="-1" role="button" aria-labelledby="carousel-dots" class="carousel-dots"></div>
</div>
Hero
EXAMPLE
Eyebrow Text
Heading Text
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Learn More
USAGE (WITHOUT ESCAPES)
render_module(
'hero',
[
'class' => [ 'hero-1' ], 'attachment_id' => 5, 'src' => 'https://bacnetglobal.org/wp-content/themes/bacnet/build/images/block-previews/carousel-bg.jpg', 'overlay' => 1, 'eyebrow' => 'Eyebrow Text', 'heading' => 'Heading Text', 'content' => 'Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'button' => [ 'Learn More', '#' ],
]
);
MARKUP
<div class="bacnet-module bacnet-module-hero hero-1">
<div class="background">
<div class="overlay soild-background" data-bg-color="1"></div>
</div>
<div class="container">
<div class="hero-content">
<span class="bacnet-element bacnet-element-eyebrow">Eyebrow Text</span>
<h1 class="bacnet-element bacnet-element-heading">Heading Text</h1>
<section class="bacnet-element bacnet-element-content">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
<a href="#" class="bacnet-element bacnet-element-button" title="Learn More">
Learn More </a>
</div>
</div>
</div>
Figure
EXAMPLE
Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
USAGE (WITHOUT ESCAPES)
render_module(
'figure',
[
'class' => [ 'image-module-1' ], 'image_class' => [ 'aspectratio-3-1' ], 'attachment_id' => 9, 'show_caption' => 1, 'caption' => 'Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. ',
]
);
MARKUP
<figure class="bacnet-module bacnet-module-figure image-module-1 has-caption">
<figcaption>Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. </figcaption>
</figure>
Meta
USAGE (WITHOUT ESCAPES)
render_module(
'meta',
[
'display_author' => , 'display_taxonomy' => 1, 'taxonomy_args' => [ 'category', '1' ],
]
);
MARKUP
<div class="bacnet-module bacnet-module-meta entry-meta">
<span class="posted-on">
Posted on <time class="entry-date published" datetime="2022-03-29T14:37:41-04:00">March 29, 2022</time>
</span>
<ul class="post-taxonomies">
<li class="taxonomy-item"> <a href="https://bacnetglobal.org/category/uncategorized/" class="bacnet-element bacnet-element-anchor">Uncategorized</a>
</li> </ul>
</div>
Notification
EXAMPLE
This is a notification banner
hamburger
USAGE (WITHOUT ESCAPES)
render_module(
'notification',
[
'class' => [ '' ], 'text_args' => [ 'This is a notification banner', '6' ], 'icon' => [ '#00b', 'hamburger', '3px', '32px', '32px' ], 'dismissible' => , 'type' => [ '', 'top' ],
]
);
MARKUP
<aside class="bacnet-module bacnet-module-notification " role="alert" aria-labelledby="notification-title" id="notification-banner">
<h6 class="bacnet-element bacnet-element-heading" id="notification-title">This is a notification banner</h6>
<span class="bacnet-element bacnet-element-icon">
<svg height="32px" width="32px" color="#00b" stroke-width="3px" class="icon hamburger" aria-hidden="true" role="img">
<title id="title-hamburger-80544">
hamburger </title>
<use xlink:href="#hamburger"></use>
</svg>
</span>
</aside>
Search
USAGE (WITHOUT ESCAPES)
render_module(
'search',
[
]
);
MARKUP
<form class="bacnet-module bacnet-module-form" method="get" action="https://bacnetglobal.org/">
<input id="search-field-506291203" name="s" placeholder="Type a keyword" class="bacnet-element bacnet-element-input search-field" type="text"/>
<button class="bacnet-element bacnet-element-button bacnet-module-search-button" type="submit" title="Search">
Search </button>
</form>
Tabs
EXAMPLE
Tab Title 1
Tab Title 2
Tab Title 3
Tab 1 item content.
Tab 2 item content.
Tab 3 item content.
USAGE (WITHOUT ESCAPES)
render_module(
'tabs',
[
'class' => [ 'tabs-1' ], 'items' => [ 'Array', 'Array', 'Array' ],
]
);
MARKUP
<div class="bacnet-module bacnet-module-tabs tabs-1" x-data="{ tab: window.location.hash ? window.location.hash.substring(1) : 'tab-0' }">
<nav role="tablist">
<button id="tab-item-0" class="bacnet-element bacnet-element-button tab-title" aria-controls="tab-content-0" :class="{ 'active': tab === 'tab-0' }" @click.prevent="tab = 'tab-0'; window.location.hash = 'tab-0'" role="tab" title="Tab Title 1">
Tab Title 1 </button>
<button id="tab-item-1" class="bacnet-element bacnet-element-button tab-title" aria-controls="tab-content-1" :class="{ 'active': tab === 'tab-1' }" @click.prevent="tab = 'tab-1'; window.location.hash = 'tab-1'" role="tab" title="Tab Title 2">
Tab Title 2 </button>
<button id="tab-item-2" class="bacnet-element bacnet-element-button tab-title" aria-controls="tab-content-2" :class="{ 'active': tab === 'tab-2' }" @click.prevent="tab = 'tab-2'; window.location.hash = 'tab-2'" role="tab" title="Tab Title 3">
Tab Title 3 </button>
</nav>
<div class="tabs-content">
<div x-show="tab === 'tab-0'" id="tab-content-0" role="tabpanel" aria-labelledby="tab-item-0">Tab 1 item content.</div>
<div x-show="tab === 'tab-1'" id="tab-content-1" role="tabpanel" aria-labelledby="tab-item-1">Tab 2 item content.</div>
<div x-show="tab === 'tab-2'" id="tab-content-2" role="tabpanel" aria-labelledby="tab-item-2">Tab 3 item content.</div>
</div>
</div>
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 mail-square minus pause pin play plus search-green search topic-icon x youtube-square