La fabrique de théâtre

La fabrique de théâtre

options de contraste:

Style Guide

Elements

Buttons


<button class="sl-button"> […] </button>


<button class="sl-button sl-button--filled"> […] </button>


<button class="sl-button sl-button--rounded"> […] </button>


<button class="sl-button sl-button--circled"> […] </button>


<button class="sl-button sl-button--bg-translucent"> […] </button>

grouped buttons:


<div class="sl-buttons-group">
	<button class="sl-button"> […] </button>
	<button class="sl-button sl-button--filled"> […] </button>
<div>

Button text content:


<button class="sl-button sl-button--lowercase"> […] </button>
<button class="sl-button sl-button--uppercase"> […] </button>

Button + icon:


<button class="sl-button">
	Button <span class="h-6 w-6"> {% include './assets/icons/plus.svg' %} </span>
</button>

Images

Shapes

Images in squares + half squares responsive:


<div class="sl-shape--square">
	<div>
		<picture>
			<img src="{{ theme.path }}/assets/img/ […] .jpeg" alt=" […] " class="sl-img-fit--cover"/>
		</picture>
	</div>
</div>

Images in circles:


<div class="sl-shape--circle">
	<div>
		<picture>
			<img src="{{ theme.path }}/assets/img/ […] .jpeg" alt=" […] " class="sl-img-fit--cover"/>
		</picture>
	</div>
</div>

Images in 16/9:


<div class="sl-shape--screen">
	<div>
		<picture>
			<img src="{{ theme.path }}/assets/img/ […] .jpeg" alt=" […] " class="sl-img-fit--cover"/>
		</picture>
	</div>
</div>

Custom format (banner):


<div class="sl-shape--banner">
	<div>
		<picture>
			<img src="{{ theme.path }}/assets/img/ […] .jpeg" alt=" […] " class="sl-img-fit--cover"/>
		</picture>
	</div>
</div>

Layout

Grid

classic grid: all the pictures have the same height


<div class="sl-grid">
	<div class="sl-col1">
		<div>
			<picture>
				<img src="{{ theme.path }}/assets/news/ […] .jpg" alt=" […] "/>
			</picture>
		</div>
	</div>
	<div class="sl-col2">
		<div>
			<picture>
				<img src="{{ theme.path }}/assets/news/ […] .jpg" alt=" […] "/>
			</picture>
		</div>
	</div>
</div>

Masonry grid

masonry grid: pictures height is respected


<div class="sl-grid sl-masonry">
	<div class="sl-col1">
		<div>
			<picture>
				<img src="{{ theme.path }}/assets/news/ […] .jpg" alt=" […] "/>
			</picture>
		</div>
	</div>
	<div class="sl-col2">
		<div>
			<picture>
				<img src="{{ theme.path }}/assets/news/ […] .jpg" alt=" […] "/>
			</picture>
		</div>
	</div>
</div>

Components

Accordion

accordion - simple

layout.titre
accordion.title

accordion.content


<div class="sl-accordion sl-accordion--simple mt-8">
    <div x-data="{ open: false }">
        <div class="group" x-on:click="open = ! open">
            <h4 class="group-hover:text-primary" :class="open ? 'text-primary' : ''"> […] </h4>
            <i class="sl-icon--plus transition duration-500 group-hover:text-primary" :class="open ? 'text-primary rotate-45' : ''"></i>
        </div>
        <div x-show="open" class="pb-4 sl-customizable-content"> […] </div>
    </div>
</div>

accordion - multiple

layout.titre
accordion.titre_accordion
accordion.contenu
accordion.titre_accordion
accordion.contenu
accordion.titre_accordion
accordion.contenu

<div class="sl-accordion sl-accordion--multiple mt-8">

    <h5> […] </h5>

    <div x-data="{ open: false }">
        <div class="group "x-on:click="open = ! open">
            <h6 class="group-hover:text-primary" :class="open ? 'text-primary dark:text-primary' : ''"> […] </h6>
            <i class="sl-icon--plus transition duration-500 group-hover:text-primary" :class="open ? 'text-primary rotate-45' : ''"></i>
        </div>
        <div x-show="open" class="pb-4 sl-customizable-content"> […] </div>
    </div>

    <div x-data="{ open: true }">
        <div class="group "x-on:click="open = ! open">
            <h6 class="group-hover:text-primary" :class="open ? 'text-primary dark:text-primary' : ''"> […] </h6>
            <i class="sl-icon--plus transition duration-500 group-hover:text-primary" :class="open ? 'text-primary rotate-45' : ''"></i>
        </div>
        <div x-show="open" class="pb-4 sl-customizable-content"> […] </div>
    </div>

    <div x-data="{ open: false }">
        <div class="group "x-on:click="open = ! open">
            <h6 class="group-hover:text-primary" :class="open ? 'text-primary dark:text-primary' : ''"> […] </h6>
            <i class="sl-icon--plus transition duration-500 group-hover:text-primary" :class="open ? 'text-primary rotate-45' : ''"></i>
        </div>
        <div x-show="open" class="pb-4 sl-customizable-content"> […] </div>
    </div>
</div>

Slider

slide.legende © slide.copyright

Card

discipline.name
 – 
type.name

title

subtitle

author

card - default

27.10 02.11

sa 18.10 - 20h30

localisation.title

localisation.city
discipline.name
 – 
type.name

title

subtitle

author

card - dates

discipline.name
 – 
type.name

title

subtitle

author

card - booking
discipline.name
 – 
type.name

title

subtitle

author

card - video
discipline.name
 – 
type.name

title

subtitle

author

card - audio

festival.name
discipline.name
 – 
type.name

title

subtitle

author

card - festival
discipline.name
 – 
type.name

title

subtitle

author

card - no thumbnail

title

card - image as background - text centered

title

card - image as background - text at the bottom

card - default


<div class="sl-card group">
    <a href="" class="sl-prevent-link-behaviour sl-card--thumbnail sl-no-thumbnail">
        <picture>
            <img src="" alt="" class="sl-img-fit--cover"/>
        </picture>
    </a>
    <a href="" class="sl-prevent-link-behaviour sl-card--content">
        <div class="flex"><h5 class="uppercase">{{ discipline.name }}</h5> – <h5>{{ type.name }}</h5></div>
        <h4>title</h4>
        <p>subtitle</p>
        <h5>author</h5>
    </a>
</div>

card - booking


<div class="sl-card group">
    <a href="" class="sl-prevent-link-behaviour sl-card--thumbnail sl-no-thumbnail">
        <div class="relative">
            <picture>
                <img src="" alt="" class="sl-img-fit--cover"/>
            </picture>
            <button class="absolute inset-0 m-auto z-10"><i class="fa-solid fa-play"></i></button>
        </div>
    </a>
    <div class="flex justify-between items-center">
        <div class="flex"><h5 class="uppercase">discipline.name</h5> – <h5>type.name</h5></div>

        <a href="">
            <i class="fa-light fa-ticket booking text-2xl"></i>
        </a>
    </div>
    <a href="" class="sl-prevent-link-behaviour sl-card--content">
        <h4>title</h4>
        <p>subtitle</p>
        <h5>author</h5>
    </a>
</div>

card - video


<div class="sl-card group">
    <a href="" class="sl-prevent-link-behaviour sl-card--thumbnail sl-no-thumbnail">
        <div class="relative">
            <picture>
                <img src="" alt="" class="sl-img-fit--cover"/>
            </picture>
            <button class="absolute inset-0 m-auto z-10"><i class="fa-solid fa-play"></i></button>
        </div>
    </a>
    <a href="" class="sl-prevent-link-behaviour sl-card--content">
        <div class="flex"><h5 class="uppercase">{{ discipline.name }}</h5> – <h5>{{ type.name }}</h5></div>
        <h4>title</h4>
        <p>subtitle</p>
        <h5>author</h5>
    </a>
</div>

card - audio


<div class="sl-card group">
    <a href="" class="sl-prevent-link-behaviour sl-card--thumbnail sl-no-thumbnail">
        <div class="relative">
            <picture>
                <img src="" alt="" class="sl-img-fit--cover"/>
            </picture>
            <button class="absolute inset-0 m-auto z-10"><i class="fa-solid fa-microphone"></i></button>
        </div>
    </a>
    <a href="" class="sl-prevent-link-behaviour sl-card--content">
        <div class="flex"><h5 class="uppercase">{{ discipline.name }}</h5> – <h5>{{ type.name }}</h5></div>
        <h4>title</h4>
        <p>subtitle</p>
        <h5>author</h5>
    </a>
</div>

card - festival


<div class="sl-card group">
    <a href="" class="sl-prevent-link-behaviour sl-card--thumbnail sl-no-thumbnail">
        <div class="relative">
            <picture>
                <img src="" alt="" class="sl-img-fit--cover"/>
            </picture>
            <div class="absolute top-0 bottom-0 right-0 w-[36px] mix-blend-multiply" style="background:background:{{ festival.color }}"></div>
            <p class="absolute top-3 right-0.5 sl-festival-rl rotate-180">{{ festival.name }}</p>
        </div>
    </a>
    <a href="" class="sl-prevent-link-behaviour sl-card--content">
        <div class="flex"><h5 class="uppercase">{{ discipline.name }}</h5> – <h5>{{ type.name }}</h5></div>
        <h4 style="--custom_color: {{ function('getFestivalsTempsForts',item.ID)|first.color }}>title</h4>
        <p>subtitle</p>
        <h5>author</h5>
    </a>
</div>

card - no thumbnail


<div class="sl-card group">
    <a href="" class="sl-prevent-link-behaviour sl-card--thumbnail sl-no-thumbnail">
        <div class="relative">
            <picture>
                <img src="" alt="" class="sl-img-fit--cover"/>
            </picture>
        </div>
    </a>
    <a href="" class="sl-prevent-link-behaviour sl-card--content">
        <div class="flex"><h5 class="uppercase">discipline.name</h5> – <h5>type.name</h5></div>
        <h4>title</h4>
        <p>subtitle</p>
        <h5>author</h5>
    </a>
</div>

card - image as background - text centered


<!--
<div class="sl-card group">
    <a href="" class="relative sl-card--thumbnail">
        <picture>
            <img src=" […] " alt="" class="sl-img-fit--cover"/>
        </picture>
        <div class="absolute top-0 left-0 w-full h-full text-center flex flex-col justify-center items-center">
            <i class=" […] "></i>
            <h4> […] </h4>
        </div>
    </a>
</div>

card - image as background - text at the bottom


<div class="sl-card group">
    <a href="" class="relative sl-card--thumbnail">
        <picture>
            <img src=" […] " alt="" class="sl-img-fit--cover"/>
        </picture>
        <div class="absolute bottom-4 left-4 w-full flex items-baseline">
            <i class=" […] "></i>
            <h4> […] </h4>
        </div>
    </a>
</div>

Gallery

layout.title

slide.legende 1© slide.copyright

slide.legende 2© slide.copyright

slide.legende 3© slide.copyright

slide.legende 4© slide.copyright

Date Picker

Filters

Sidebar

Outside the container

Image Hero

Banner under slideshow (all slideshow)

Titre de la photo© Albert Malevich

<div class="sl-container--full-width flex justify-between items-center w-full sl-bg-translucent py-3">
	<h5 class="sl-figcaption">Titre de la photo© Albert Malevich</span></h5>
	<i class="fa-light fa-compress-wide text-2xl mr-2">
								</div>

Marquee

marquee - simple

Informations importantes & recommAndation covid-19


<div class="relative w-full overflow-hidden">
    <div class="sl-marquee overflow-hidden w-full relative flex">
        <div class="flex">
            <i class="sl-arrow-right-icon mr-8"></i>
            <p class="sl-marquee--txt">Informations importantes & recommAndation covid-19</p>
        </div>
    </div>
</div>

marquee - multiple