BACnet
render_module( 'accordion', [ 'class' => [ 'anchor-1' ], 'items' => [ 'Array', 'Array', 'Array' ], ] );
<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>
render_module( 'badges', [ 'badges' => [ 'Array', 'Array', 'Array', 'Array', 'Array', 'Array', 'Array', 'Array', 'Array', 'Array', 'Array' ], ] );
<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>
render_module( 'call-to-action', [ 'class' => [ 'cta-1' ], 'attachment_id' => 5, 'eyebrow' => 'Eyebrow Text', 'heading_args' => [ 'Heading Text' ], 'button' => [ 'Learn More', '#' ], ] );
<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>
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', '#' ], ] );
<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>
render_module( 'carousel', [ 'class' => [ 'carousel-1' ], 'heros' => [ 'Array', 'Array', 'Array' ], ] );
<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-35475"> 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-99078"> 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>
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', '#' ], ] );
<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>
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. ', ] );
<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>
render_module( 'meta', [ 'display_author' => , 'display_taxonomy' => 1, 'taxonomy_args' => [ 'category', '1' ], ] );
<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>
render_module( 'notification', [ 'class' => [ '' ], 'text_args' => [ 'This is a notification banner', '6' ], 'icon' => [ '#00b', 'hamburger', '3px', '32px', '32px' ], 'dismissible' => , 'type' => [ '', 'top' ], ] );
<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-223"> hamburger </title> <use xlink:href="#hamburger"></use> </svg> </span> </aside>
render_module( 'search', [ ] );
<form class="bacnet-module bacnet-module-form" method="get" action="https://bacnetglobal.org/"> <input id="search-field-362902410" 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>
render_module( 'tabs', [ 'class' => [ 'tabs-1' ], 'items' => [ 'Array', 'Array', 'Array' ], ] );
<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>
