BACnet

Modules Documentation

Accordion

EXAMPLE

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

EXAMPLE

Primary Secondary Success Danger Warning Info Light Dark Pill Primary Pill Secondary Pill Success

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

EXAMPLE

Eyebrow Text

Heading Text

Learn More

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

Heading Text
Eyebrow Text 1

Heading Text

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading Text
Eyebrow Text 2

Heading Text

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading Text
Eyebrow Text 3

Heading Text

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

EXAMPLE

Posted on

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

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

EXAMPLE

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 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="{ &#039;active&#039;: tab === &#039;tab-0&#039; }" @click.prevent="tab = &#039;tab-0&#039;; window.location.hash = &#039;tab-0&#039;" 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="{ &#039;active&#039;: tab === &#039;tab-1&#039; }" @click.prevent="tab = &#039;tab-1&#039;; window.location.hash = &#039;tab-1&#039;" 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="{ &#039;active&#039;: tab === &#039;tab-2&#039; }" @click.prevent="tab = &#039;tab-2&#039;; window.location.hash = &#039;tab-2&#039;" 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>
arrow-l-bluearrow-l-warrow-larrow-rarrow-whitecaret-down-hovercaret-downchevron-down-wchevron-downchevron-leftchevron-rightcircle-xclose-menuclosedot-w-actdot-wexternalfacebook-squarehamburgerinstagram-squarelinkedin-squarelist-polygonmail-squareminuspausepinplayplussearch-greensearchtopic-icontwitter-squarexyoutube-square