Heading h1

<h1>heading H1</h1>

Heading h2

<h2>heading H2</h2>

Heading h3

<h3>heading H3</h3>

Heading h4

<h4>heading H4</h4>

Paragraph

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.

<p>Cum sociis natoque penatibus et magnis dis.</p>

Italic

<em>Cum sociis.</em>

Bold

<strong>Cum sociis.</strong>

Buttons

Button small

<a class="btn btn--small" href="#">Click me</a>

Button small current (current color category)

<a class="btn btn--small btn--current" href="#">Click me</a>

Button Ghost

<a class="btn btn--ghost" href="#">Click me</a>

Button Primary

<a class="btn btn-primary" href="#">Click me</a>

Button Current (color of current category)

<a class="btn btn--current" href="#">Click me</a>

Button Current (color of current category inversed)

<a class="btn btn--re-current" href="#">Click me</a>

Button colored (here workstation color)

Possible variants

<a class="btn bg-bren-workstation hover:bg-bren-workstation-dark" href="#">Click me</a>
<a class="btn bg-bren-office hover:bg-bren-office-dark" href="#">Click me</a>
<a class="btn bg-bren-gamer hover:bg-bren-gamer-dark" href="#">Click me</a>
<a class="btn bg-bren-special hover:bg-bren-special-dark" href="#">Click me</a>
<a class="btn bg-bren-server hover:bg-bren-server-dark" href="#">Click me</a>

Button colored ghost (here workstation color)

Possible variants

<a class="btn btn--ghost border-bren-workstation text-bren-workstation hover:border-bren-workstation hover:text-white hover:bg-bren-workstation" href="#">Click me</a>
<a class="btn btn--ghost border-bren-office text-bren-office hover:border-bren-office hover:text-white hover:bg-bren-office" href="#">Click me</a>
<a class="btn btn--ghost border-bren-gamer text-bren-gamer hover:border-bren-gamer hover:text-white hover:bg-bren-gamer" href="#">Click me</a>
<a class="btn btn--ghost border-bren-special text-bren-special hover:border-bren-special hover:text-white hover:bg-bren-special" href="#">Click me</a>
<a class="btn btn--ghost border-bren-server text-bren-server hover:border-bren-server hover:text-white hover:bg-bren-server" href="#">Click me</a>

Blockquote

Here is a blockquote

<blockquote>
<p>Here is a blockquote</p>
</blockquote>

Liste

  • Liste 1
  • Liste 2
  • Liste 3
<ul class="pl-8">
<li class="list-disc leading-relaxed mb-2">Liste 1</li>
<li class="list-disc leading-relaxed mb-2">Liste 2</li>
<li class="list-disc leading-relaxed">Liste 3</li>
<ul>
  1. Marker 1
  2. Marker 2
<ol>
<li>Marker 1</li>
<li>Marker 1</li>
<ol>

Link

Referenzen

<a href="/referenzen">Zu den Referenzen</a>

Colors

I'm blue

<p class="text-blue">I'm blue</p>

I'm red

<p class="text-red-500">I'm red</p>

I'm green

<p class="text-green-500">I'm green</p>

I'm violet

<p class="text-purple-900">I'm violet</p>

Text Color from categories

I'm office category

<p class="text-bren-office">I'm blue</p>

I'm gamer category

<p class="text-bren-gamer">I'm red</p>

I'm workstation category

<p class="text-bren-workstation">I'm green</p>

I'm server category

<p class="text-bren-server">I'm violet</p>

I'm special category

<p class="text-bren-infra">I'm gold</p>

Accordeon

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="w-full my-4">
    <div x-data="{show:false}" class="border border-gray-300 rounded mb-1 max-h-12 overflow-hidden transition-all ease-in-out duration-300" x-ref="dropdownContainer" x-bind:style="show ? 'max-height: ' + $refs.dropdownContainer.scrollHeight + 'px' : ''" style="">
            <div id="headingOne" class="text-blue">
                <button @click="show=!show" class="px-4 py-3 text-left text-blue hover:text-blue-hover focus:outline-none w-full" type="button">
                    Collapsible Group Item #1

                <svg class="h-5 w-5 stroke-current stroke-2 float-right transition duration-200 ease-in-out mis-auto" :class="{ 'transform scale-y-300': show === true }" aria-hidden="true" fill="none">
                    <use xlink:href="https://brentford2.local/static/version1613495475/frontend/Brentford/default/de_CH/images/icons.svg#icon-caret"></use>
                </svg>
                    </button>
            </div>
            <div class="px-4 py-3">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
        <div x-data="{show:false}" class="border border-gray-300 rounded mb-1 max-h-12 overflow-hidden transition-all ease-in-out duration-300" x-ref="dropdownContainer" x-bind:style="show ? 'max-height: ' + $refs.dropdownContainer.scrollHeight + 'px' : ''" style="">
            <div id="headingOne" class="text-blue">
                <button @click="show=!show" class="px-4 py-3 text-left text-blue hover:text-blue-hover focus:outline-none w-full" type="button">
                    Collapsible Group Item #2

                    <svg class="h-5 w-5 stroke-current stroke-2 float-right transition duration-200 ease-in-out mis-auto" :class="{ 'transform scale-y-300': show === true }" aria-hidden="true" fill="none">
                        <use xlink:href="https://brentford2.local/static/version1613495475/frontend/Brentford/default/de_CH/images/icons.svg#icon-caret"></use>
                    </svg>
                </button>
            </div>
            <div class="px-4 py-3">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
        <div x-data="{show:false}" class="border border-gray-300 rounded mb-1 max-h-12 overflow-hidden transition-all ease-in-out duration-300" x-ref="dropdownContainer" x-bind:style="show ? 'max-height: ' + $refs.dropdownContainer.scrollHeight + 'px' : ''" style="">
            <div id="headingOne" class="text-blue">
                <button @click="show=!show" class="px-4 py-3 text-left text-blue hover:text-blue-hover focus:outline-none w-full" type="button">
                    Collapsible Group Item #3

                    <svg class="h-5 w-5 stroke-current stroke-2 float-right transition duration-200 ease-in-out mis-auto" :class="{ 'transform scale-y-300': show === true }" aria-hidden="true" fill="none">
                        <use xlink:href="https://brentford2.local/static/version1613495475/frontend/Brentford/default/de_CH/images/icons.svg#icon-caret"></use>
                    </svg>
                </button>
            </div>
            <div class="px-4 py-3">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>    
</div>