Bricks Elemente

Basic / Standard

Heading / Überschrift

I am a heading

<h3 id="brxe-mvmatv" class="brxe-heading">I am a heading</h3>

Basic Text / Standard Text

Here goes your text ... Select any part of your text to access the formatting toolbar.
<div id="brxe-himupm" class="brxe-text-basic">Here goes your text ... Select any part of your text to access the formatting toolbar.</div>

Rich Text / Formatierter Text

Here goes your text … Select any part of your text to access the formatting toolbar.

<div id="brxe-mthlsv" class="brxe-text">
  <p><strong>Here goes your text</strong> … Select any part of your text to <em>access the formatting</em> toolbar.</p>
</div>

Text Link / Text-Link

Text link
<a id="brxe-xkpcle" class="brxe-text-link">Text link</a>

Button

I am a button
<span id="brxe-vjqrkp" class="brxe-button bricks-button bricks-background-primary">I am a button</span>

Icon

<i id="brxe-auosrt" class="brxe-icon ti-star"></i>

Image / Bild

Seitwerk Logo
<img src="https://bricks.seitwerk.net/app/uploads/Seitwerk-Logo.svg" class="brxe-image css-filter size-full" alt="Seitwerk Logo" decoding="async" id="brxe-vfnbis" data-type="string">

Video

<div id="brxe-hfccab" data-script-id="hfccab" class="brxe-video">
  <iframe allowfullscreen="" allow="autoplay" class="" src="https://www.youtube.com/embed/5DGo0AYOJ7s?wmode=opaque&rel=0&enablejsapi=1"></iframe>
</div>

General

Divider / Trennline

<div id="brxe-tonqmr" class="brxe-divider horizontal">
  <div class="line"></div>
</div>

Icon Box

Icon box heading

.. followed by some bogus content. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div id="brxe-sxeoyt" class="brxe-icon-box">
  <div class="icon">
    <i class="ti-wordpress"></i>
  </div>
  <div class="content">
    <h4>Icon box heading</h4>
    <p>.. followed by some bogus content. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

Icon List

  • Twitter
  • Facebook
  • Instagram
<ul id="brxe-ayvdfd" class="brxe-social-icons">
  <li class="repeater-item no-link">
    <i class="fab fa-twitter"></i>
    <span>Twitter</span>
  </li>
  <li class="repeater-item no-link">
    <i class="fab fa-facebook-square"></i>
    <span>Facebook</span>
  </li>
  <li class="repeater-item no-link">
    <i class="fab fa-instagram"></i>
    <span>Instagram</span>
  </li>
</ul>

List

  • List item #1$10.00
  • List item #2$25.00
<ul id="brxe-jyirab" class="brxe-list">
  <li>
    <div class="content">
      <span class="title">List item #1</span>
      <span class="separator"></span>
      <span class="meta">$10.00</span>
    </div>
  </li>
  <li>
    <div class="content">
      <span class="title">List item #2</span>
      <span class="separator"></span>
      <span class="meta">$25.00</span>
    </div>
  </li>
</ul>

Accordion

<ul id="brxe-nxsfbp" data-script-id="nxsfbp" class="brxe-accordion">
  <li class="accordion-item listening">
    <div class="accordion-title-wrapper">
      <div class="accordion-title">
        <h5 class="title">Item</h5>
        <i class="icon expanded ion-ios-arrow-down"></i>
        <i class="icon ion-ios-arrow-forward"></i> 
      </div>
      <div class="accordion-subtitle">I am a so called subtitle.</div> 
    </div> 
    <div class="accordion-content-wrapper">
      <p>Content goes here ..</p> 
    </div> 
  </li>
  <li class="accordion-item listening">
    <div class="accordion-title-wrapper">
      <div class="accordion-title">
        <h5 class="title">Item 2</h5>
        <i class="icon expanded ion-ios-arrow-down"></i>
        <i class="icon ion-ios-arrow-forward"></i> 
      </div>
      <div class="accordion-subtitle">I am a so called subtitle.</div> 
    </div>
    <div class="accordion-content-wrapper">
      <p>Content goes here ..</p> 
    </div> 
  </li> 
</ul>

Accordion (Nestable)

Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.

Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.

<div id="brxe-appzrt" data-script-id="appzrt" class="brxe-accordion-nested">
  <div id="brxe-abyqnf" class="brxe-block listening">
    <div id="brxe-skxtzn" class="brxe-block accordion-title-wrapper">
      <h5 id="brxe-qcdqkh" class="brxe-heading">Accordion 1</h5>
      <i id="brxe-zpbhnv" class="brxe-icon ion-ios-arrow-forward"></i> 
    </div>
    <div id="brxe-nqkslz" class="brxe-block accordion-content-wrapper bricks-lazy-hidden">
      <div id="brxe-vjgtsb" class="brxe-text">
        <p>Lorem ipsum dolor ist amte (...)</p> 
      </div> 
    </div> 
  </div>
  <div id="brxe-goxwsq" class="brxe-block listening">
    <div id="brxe-taerit" class="brxe-block accordion-title-wrapper">
      <h5 id="brxe-hhgojc" class="brxe-heading">Accordion 2</h5>
      <i id="brxe-zsjxin" class="brxe-icon ion-ios-arrow-forward"></i> 
    </div>
    <div id="brxe-zdnvqh" class="brxe-block accordion-content-wrapper bricks-lazy-hidden">
      <div id="brxe-ibenqk" class="brxe-text">
        <p>Lorem ipsum dolor ist amte (...)</p> 
      </div> 
    </div> 
  </div> 
</div>

Tabs

<div id="brxe-dhemem" data-script-id="dhemem" class="brxe-tabs horizontal">
  <ul class="tab-menu">
    <li class="tab-title repeater-item brx-open">
      <span>Title 1</span> 
    </li>
    <li class="tab-title repeater-item">
      <span>Title 2</span> 
    </li> 
  </ul>
  <ul class="tab-content"> 
    <li class="tab-pane brx-open">
      <p>Content goes here .. (1)</p> 
    </li>
    <li class="tab-pane">
      <p>Content goes here .. (2)</p> 
    </li> 
  </ul> 
</div>

Tabs (Nestable)

Content goes here .. (1)

Content goes here .. (2)

<div id="brxe-ojumpk" data-script-id="ojumpk" class="brxe-tabs-nested">
  <div id="brxe-gfzevr" class="brxe-block tab-menu">
    <div id="brxe-tbgcxs" class="brxe-div tab-title brx-open">
      <div id="brxe-zzmnmu" class="brxe-text-basic">Title 1</div> 
    </div>
    <div id="brxe-gbdrub" class="brxe-div tab-title">
      <div id="brxe-kfvfjs" class="brxe-text-basic">Title 2</div> 
    </div> 
  </div>
  <div id="brxe-rxceuy" class="brxe-block tab-content">
    <div id="brxe-vkmpbm" class="brxe-block tab-pane brx-open">
      <div id="brxe-xkdhaw" class="brxe-text">
        <p>Content goes here .. (1)</p> 
      </div> 
    </div>
    <div id="brxe-jdbnxy" class="brxe-block tab-pane bricks-lazy-hidden">
      <div id="brxe-xetyef" class="brxe-text">
        <p>Content goes here .. (2)</p> 
      </div> 
    </div> 
  </div> 
</div>

Form

<form id="brxe-deqdov" data-script-id="deqdov" class="brxe-form" method="post" data-element-id="deqdov">
  <div class="form-group">
    <input id="form-field-939b8a" name="form-field-153b71" aria-label="Name" type="text" value="" placeholder="Your Name" spellcheck="false"> 
  </div>
  <div class="form-group">
    <input id="form-field-079a71" name="form-field-af132e" aria-label="Email" type="email" value="" placeholder="Your Email" required=""> 
  </div>
  <div class="form-group">
    <textarea id="form-field-bbb9ba" name="form-field-39e96e" aria-label="Message" placeholder="Your Message" spellcheck="false" required=""></textarea> 
  </div>
  <div class="form-group submit-button-wrapper">
    <button type="submit" class="bricks-button bricks-background-primary">
      <span class="text">Senden</span>
      <span class="loading">[...]</span> 
    </button> 
  </div> 
</form>

Map / Karte

Alert / Alarm

I am an alert.

<div id="brxe-hddeyk" class="brxe-alert alert info">
  <div class="content">
    <p>I am an alert.</p> 
  </div> 
</div>

Anim. Typing

We for you!
<div id="brxe-njkegf" data-script-id="njkegf" class="brxe-animated-typing" data-script-args="{"strings":["design","code","launch"],"typeSpeed":55,"backSpeed":30,"startDelay":500,"backDelay":500,"cursorChar":"|","loop":true,"shuffle":false}">
  <span class="prefix">We </span>
  <span class="typed">code</span>
  <span class="typed-cursor typed-cursor--blink" aria-hidden="true">|</span>
  <span class="suffix"> for you!</span> 
</div>

Countdown

<div id="brxe-arhkul" data-script-id="arhkul" class="brxe-countdown" data-bricks-countdown-options="{"date":"2024-01-01 12:00","fields":[{"format":"%D days","id":"juooes"},{"format":"%H hours","id":"yvdpml"},{"format":"%M minutes","id":"ujxfgi"},{"format":"%S seconds","id":"ueqqtz"}],"action":"countdown","actionText":"","timezone":"UTC+00:00"}" data-bricks-countdown-id="2">
  <div class="field">
    <span class="format">102 days</span> 
  </div>
  <div class="field">
    <span class="format">01 hours</span> 
  </div>
  <div class="field">
    <span class="format">09 minutes</span></div> 
  <div class="field">
    <span class="format">42 seconds</span> 
  </div> 
</div>

Counter

0
<div id="brxe-zpcxjt" data-script-id="zpcxjt" class="brxe-counter" data-bricks-counter-options="{"countFrom":"0","countTo":"1000","duration":1000,"thousands":""}">
  <span class="count">1000</span> 
</div>

Pricing Tables

  • BUSINESS
    Subtitle goes here
    $2990
    per month
    • Unlimited websites
    • 20GB web space
    • SSL certificate
    GET STARTED
<div id="brxe-jfzrsw" class="brxe-pricing-tables">
  <ul class="pricing-tables">
    <li class="pricing-table repeater-item tab-1 active">
      <div class="pricing-table-bg css-filter"></div>
      <div class="pricing-table-header">
        <div class="pricing-table-title">BUSINESS</div>
        <span class="pricing-table-subtitle">Subtitle goes here</span> 
      </div>
      <div class="pricing-table-pricing">
        <div class="pricing-table-price-wrapper">
          <span class="pricing-table-price-prefix">$</span>
          <span class="pricing-table-price">29</span>
          <span class="pricing-table-price-suffix">90</span> 
        </div>
        <span class="pricing-table-price-meta">per month</span> 
      </div>
      <ul class="pricing-table-features">
        <li class="pricing-table-feature">
          <i class="ion-ios-checkmark-circle-outline"></i>
          <span class="pricing-table-feature-title">Unlimited websites</span> 
        </li>
        <li class="pricing-table-feature">
          <i class="ion-ios-checkmark-circle-outline"></i>
          <span class="pricing-table-feature-title">20GB web space</span> 
        </li>
        <li class="pricing-table-feature">
          <i class="ion-ios-checkmark-circle-outline"></i>
          <span class="pricing-table-feature-title">SSL certificate</span> 
        </li> 
      </ul>
      <div class="pricing-table-footer">
        <div class="pricing-table-button-text">
          <a class="bricks-button bricks-background-primary">GET STARTED</a> 
        </div> 
      </div> 
    </li> 
  </ul> 
</div>

Progress Bar

<div id="brxe-ojdhmk" data-script-id="ojdhmk" class="brxe-progress-bar">
  <div class="bar-wrapper">
    <label>
      <span class="label">Web design</span>
      <span class="percentage">80%</span> 
    </label>
    <div class="bar">
      <span data-width="80%" style="width: 80%;"></span> 
    </div> 
  </div>
  <div class="bar-wrapper">
    <label>
      <span class="label">SEO</span>
      <span class="percentage">90%</span> 
    </label>
    <div class="bar">
      <span data-width="90%" style="width: 90%;"></span> 
    </div> 
  </div> 
</div>

Pie Chart

60%
<div id="brxe-hkjels" data-script-id="hkjels" class="brxe-pie-chart" data-percent="60" data-bar-color="#03a9f4" data-track-color="#f0f1f2" data-size="160" data-line-width="8" data-line-cap="square" data-scale-length="0">
  <span class="content">60%</span>
  <canvas height="160" width="160"></canvas> 
</div>

Team Members

  • Bianca Gosh

    CEO
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.

  • Linus Slim

    CFO
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.

  • Ilaria Cue

    CMO
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.

  • Brian Masset

    CTO
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
<ul id="brxe-jgnakj" class="brxe-team-members">
  <li class="member">
    <div class="image css-filter" style="background-image: url(https://source.unsplash.com/random/600x600?woman)"></div>
    <div class="content">
      <h4 class="title">Bianca Gosh</h4>
      <div class="subtitle">CEO</div>
      <div class="description">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.</div> 
    </div> 
  </li>
  <li class="member">
    <div class="image css-filter" style="background-image: url(https://source.unsplash.com/random/700x700?man)"></div>
    <div class="content">
      <h4 class="title">Linus Slim</h4>
      <div class="subtitle">CFO</div>
      <div class="description">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.</div></div> 
  </li>
  [...]
</ul>

Testimonials

Lorem ipsum dolor ist amte. Consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
KIM NATAMO
Developer
<div id="brxe-bvkqgk" data-script-id="bvkqgk" class="brxe-testimonials">
  <div class="bricks-swiper-container swiper-initialized swiper-horizontal swiper-pointer-events swiper-autoheight swiper-backface-hidden" data-script-args="{"slidesPerView":1,"slidesPerGroup":1,"autoHeight":true,"speed":300,"effect":"slide","spaceBetween":0,"initialSlide":0,"loop":true,"centeredSlides":false}">
    <div class="swiper-wrapper" id="swiper-wrapper-9a3f3a1d7bfe9233" aria-live="polite" style="transition-duration: 0ms; transform: translate3d(-530px, 0px, 0px); height: 152px;">
      <div class="repeater-item swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active swiper-slide-prev" data-swiper-slide-index="0" role="group" aria-label="1 / 1" style="width: 530px;">
        <div class="testimonial-content-wrapper">Lorem ipsum dolor ist amte. Consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
        <div class="testimonial-meta-wrapper image-position-left">
          <div class="image css-filter bricks-lazy-hidden" data-style="background-image: url(https://source.unsplash.com/random/600x600?face,man)"></div>
          <div class="testimonial-meta-data">
          <div class="testimonial-name">KIM NATAMO</div>
          <div class="testimonial-title">Developer</div> 
        </div> 
      </div> 
    </div> 
    <div class="repeater-item swiper-slide swiper-slide-active swiper-slide-duplicate-next swiper-slide-duplicate-prev" data-swiper-slide-index="0" role="group" aria-label="1 / 1" style="width: 530px;">[...]
    </div>
  </div>
  <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span> 
</div>

Code

<style>
h1.my-heading {
  color: crimson;
}
</style>

<h1 class='my-heading'>Just some custom HTML</h1>
<pre id="brxe-jrqcjk" data-script-id="jrqcjk" class="brxe-code">
  <style>
  h1.my-heading {
    color: crimson;
  }
  </style>

  <h1 class='my-heading'>Just some custom HTML</h1> 
</pre>

Template

Rooms with a view

Weite Aussichten über die Stadt
<div id="brxe-fijcls" class="brxe-template">
  <div id="brxe-ngetpw" class="brxe-block sw-element-hover-box">
    <div id="brxe-hlbuqm" class="brxe-block">
      <h3 id="brxe-cabdbf" class="brxe-heading">Rooms with a view</h3>
      <div id="brxe-dhobpk" class="brxe-text-basic">Weite Aussichten über die Stadt</div> 
    </div> 
  </div> 
</div>

Logo

<a id="brxe-cptdfm" class="brxe-logo" href="https://bricks.seitwerk.net">Bricks Templates</a>

Facebook Page

<div id="brxe-spmaub" data-script-id="spmaub" class="brxe-facebook-page">
  <div class="fb-page fb_iframe_widget" data-href="https://www.facebook.com/seitwerk" data-tabs="" data-hide-cover="false" data-show-facepile="false" data-hide-cta="false" data-small-header="false" fb-xfbml-state="rendered" fb-iframe-plugin-query="[...]">
    <span style="vertical-align: bottom; width: 340px; height: 130px;">
      <iframe name="f37d6590b8c2da8" width="1000px" height="1000px" data-testid="fb:page Facebook Social Plugin" title="fb:page Facebook Social Plugin" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" src="[...]" style="border: none; visibility: visible; width: 340px; height: 130px;" class=""></iframe> 
    </span> 
  </div> 
</div>

Breadcrumbs

<nav id="brxe-gqhfgv" class="brxe-breadcrumbs" aria-label="Breadcrumb">
  <a class="item" href="https://bricks.seitwerk.net">Startseite</a>
  <span class="separator">/</span>
  <span class="item" aria-current="page">Bricks Elemente</span> 
</nav>

Media

Image Gallery

<ul id="brxe-fmdjtm" data-script-id="fmdjtm" class="brxe-image-gallery bricks-layout-wrapper" data-layout="grid">
  <li class="bricks-layout-item" data-id="22">
    <div width="1024" height="1024" role="img" aria-label="Hotel Room 1" class="image bricks-lazy-load-isotope bricks-layout-inner bricks-ratio-square css-filter" style="background-image: url(https://bricks.seitwerk.net/app/uploads/hotel-room-1.webp)"></div> 
  </li>
  <li class="bricks-layout-item" data-id="241">
    <div width="1024" height="1024" role="img" aria-label="Portrait Of Person 4" class="image bricks-lazy-load-isotope bricks-layout-inner bricks-ratio-square css-filter" style="background-image: url(https://bricks.seitwerk.net/app/uploads/portrait-of-person-4.webp)"></div> 
  </li>
  [...]
</ul>

Audio

Carousel

<div id="brxe-jpsvsm" data-script-id="jpsvsm" class="brxe-carousel">
  <div class="bricks-swiper-container swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" data-script-args="{"slidesPerView":2,"slidesPerGroup":1,"speed":300,"autoHeight":false,"effect":"slide","spaceBetween":0,"initialSlide":0,"loop":true,"centeredSlides":false,"navigation":true}">
    <div class="swiper-wrapper" id="swiper-wrapper-110a96919999717c" aria-live="polite" style="transition-duration: 0ms; transform: translate3d(-864px, 0px, 0px);">
      <div class="repeater-item swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" role="group" aria-label="3 / 4" style="width: 432px;">
        <div class="image css-filter bricks-lazy-hidden" role="img" aria-label="Hotel Room 3" data-style="background-image: url("https://bricks.seitwerk.net/app/uploads/hotel-room-3.webp")"></div> 
      </div>
      <div [...]>
        <div [...]></div> 
      </div>  
  [...]
  <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>    </div> 
   <div class="swiper-button bricks-swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-110a96919999717c">     <i class="ion-ios-arrow-back"></i> 
  </div>
  <div class="swiper-button bricks-swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-110a96919999717c">     <i class="ion-ios-arrow-forward"></i> 
  </div> 
</div>

Slider

I am a slide

Content goes here ..

Click me

Just another slide

More content to come ..

Learn more 
<div class="bricks-swiper-container swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" data-script-args="{"slidesPerView":1,"slidesPerGroup":1,"speed":300,"effect":"slide","spaceBetween":0,"initialSlide":0,"loop":true,"centeredSlides":false,"navigation":true}">
  <div class="swiper-wrapper" id="swiper-wrapper-cc5199da279012d4" aria-live="polite" style="transition-duration: 0ms; transform: translate3d(-824px, 0px, 0px);">
    <div class="repeater-item swiper-slide swiper-slide-duplicate swiper-slide-prev swiper-slide-duplicate-next" data-swiper-slide-index="1" role="group" aria-label="2 / 2" style="width: 824px;">
      <div class="slider-content">
        <h3 class="title" id="just-another-slide">Just another slide</h3>
        <div class="content">
          <p>More content to come ..</p> 
        </div>
        <a class="bricks-button bricks-background-light">Learn more</a> 
      </div>
      <div class="image css-filter" style="background-color: #263238"></div>
    </div>
    <div>
      [...]
		</div> 
  </div>
  <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>

Slider (Nestable)

Slide 1

I am a button

Slide 2

I am a button

SVG

<svg class="brxe-svg" id="brxe-tszwsq" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" fill="none" stroke="#000"></circle>
  <path d="M50,2a48,48 0 1 1 0,96a24 24 0 1 1 0-48a24 24 0 1 0 0-48"></path>
  <circle cx="50" cy="26" r="6"></circle>
  <circle cx="50" cy="74" r="6" fill="#FFF"></circle> 
</svg>

E

Hide/Show HTML-Code