Component – Atyl – Modes d'accueil

Accordions

Accordion style 1

Cu luptatum gloriatur per vis harum

Lorem ipsum dolor sit amet, ad eos aperiri voluptatum. Ut nisl disputando has, sit causae dolorum ei, vim choro corpora ei. Vel nobis putent praesent ne, conceptam eloquentiam te vix.

Natum fierent sensibus ex eos inimicus

Prodesset maiestatis at eos, rebum offendit ad usu. Pri aeque viris referrentur an, vel soleat mucius scribentur te, eu saepe convenire his.

At his illud facilisi conclusionemque

Ut nisl disputando has, sit causae dolorum ei, vim choro corpora ei. Vel nobis putent praesent ne, conceptam eloquentiam te vix. Prodesset maiestatis at eos, rebum offendit ad usu.

Menandri argumentum ad qui

Vel nobis putent praesent ne, conceptam eloquentiam te vix. Prodesset maiestatis at eos, rebum offendit ad usu. Pri aeque viris referrentur an, vel soleat mucius scribentur te.

Per an aeterno neglegentur his

Has tation tractatos appellantur ad, apeirian philosophia est ei. Vis cu solum euismod partiendo. Id labitur commune perfecto pro, in mel solum nostrud. Eum iusto omittam appareat te.

<div class="accordion style1 clearfix" id="accordion1">
	<div class="accordion-group">
		<div class="accordion-heading">										
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
				<i class="icon-chevron-sign-down"></i> Cu luptatum gloriatur per vis harum
			</a>
		</div>
		<div id="collapse1" class="accordion-body collapse">
			<div class="accordion-inner">
				[...]
			</div>
		</div>
	</div>
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
				<i class="icon-chevron-sign-down"></i> Natum fierent sensibus ex eos inimicus
			</a>
		</div>
		<div id="collapse2" class="accordion-body collapse">
			<div class="accordion-inner">
				[...]													
			</div>
		</div>
	</div>
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
				<i class="icon-chevron-sign-down"></i> At his illud facilisi conclusionemque
			</a>
		</div>
		<div id="collapse3" class="accordion-body collapse">
			<div class="accordion-inner">
				[...]												
			</div>
		</div>
	</div>	
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse4">
				<i class="icon-chevron-sign-down"></i> Menandri argumentum ad qui
			</a>
		</div>
		<div id="collapse4" class="accordion-body collapse">
			<div class="accordion-inner">
				[...]												
			</div>
		</div>
	</div>	
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse5">
				<i class="icon-chevron-sign-down"></i> Per an aeterno neglegentur his
			</a>
		</div>
		<div id="collapse5" class="accordion-body collapse">
			<div class="accordion-inner">
				[...]											
			</div>
		</div>
	</div>								
</div>

Accordion style 2

Cu luptatum gloriatur per vis harum

Lorem ipsum dolor sit amet, ad eos aperiri voluptatum. Ut nisl disputando has, sit causae dolorum ei, vim choro corpora ei. Vel nobis putent praesent ne, conceptam eloquentiam te vix.

Natum fierent sensibus ex eos inimicus

Prodesset maiestatis at eos, rebum offendit ad usu. Pri aeque viris referrentur an, vel soleat mucius scribentur te, eu saepe convenire his.

At his illud facilisi conclusionemque

Ut nisl disputando has, sit causae dolorum ei, vim choro corpora ei. Vel nobis putent praesent ne, conceptam eloquentiam te vix. Prodesset maiestatis at eos, rebum offendit ad usu.

Menandri argumentum ad qui

Vel nobis putent praesent ne, conceptam eloquentiam te vix. Prodesset maiestatis at eos, rebum offendit ad usu. Pri aeque viris referrentur an, vel soleat mucius scribentur te.

Per an aeterno neglegentur his

Has tation tractatos appellantur ad, apeirian philosophia est ei. Vis cu solum euismod partiendo. Id labitur commune perfecto pro, in mel solum nostrud. Eum iusto omittam appareat te.

<div class="accordion style2 clearfix" id="accordion2">
	<div class="accordion-group">
		<div class="accordion-heading">										
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
				<i class="icon-chevron-sign-down"></i> Cu luptatum gloriatur per vis harum
			</a>
		</div>
		<div id="collapse1" class="accordion-body collapse">
			<div class="accordion-inner">
				[...]
			</div>
		</div>
	</div>
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
				<i class="icon-chevron-sign-down"></i> Natum fierent sensibus ex eos inimicus
			</a>
		</div>
		<div id="collapse2" class="accordion-body collapse">
			<div class="accordion-inner">
				[...]													
			</div>
		</div>
	</div>
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
				<i class="icon-chevron-sign-down"></i> At his illud facilisi conclusionemque
			</a>
		</div>
		<div id="collapse3" class="accordion-body collapse">
			<div class="accordion-inner">
				[...]												
			</div>
		</div>
	</div>	
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse4">
				<i class="icon-chevron-sign-down"></i> Menandri argumentum ad qui
			</a>
		</div>
		<div id="collapse4" class="accordion-body collapse">
			<div class="accordion-inner">
				[...]												
			</div>
		</div>
	</div>	
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse5">
				<i class="icon-chevron-sign-down"></i> Per an aeterno neglegentur his
			</a>
		</div>
		<div id="collapse5" class="accordion-body collapse">
			<div class="accordion-inner">
				[...]											
			</div>
		</div>
	</div>								
</div>

Tabs

Tab style 1

Eu atqui liber recusabo his

Vide debet no vix. Eu atqui liber recusabo his, ut fugit minimum has, ut sed temporibus complectitur. Usu te populo nonumes, no est eirmod explicari. In blandit voluptua urbanitas vim, vix eu summo nihil convenire. Eu vis veri fierent noluisse, vis an euismod sententiae, cibo oratio ei sed. Nostro probatus tacimates vis in his habeo.

Inermis instructior vim in

Inermis instructior vim in, vel et clita praesent, nam legere postea in. Te inimicus consequat nam. Mei summo diceret vituperatoribus ex, ut torquatos pro. Ne qui admodum aliquando, viderer instructior in eos pericula appellantur referrentur vix. Inermis instructior vim in, vel et clita praesent, nam legere postea in. Te inimicus consequat nam. Mei summo diceret vituperatoribus ex, ut torquatos pro. Ne qui admodum aliquando.

Omnium dolores oporteat no usu

Omnium dolores oporteat no usu. Id dicta ubique sit, labore iriure voluptua mei ut. Pro ei probatus comprehensam conclusionemque, ea labore utroque comprehensam nec. Eu purto posidonium sit, an vim nonumy indoctum. Duo salutandi interpretaris te, purto feugait at his. Et vix graeci suavitate expetendis. Nec alii mutat harum at, legimus evertitur at eum. Sumo antiopam moderatius vim ea, clita discere fuisset ex ius.

<div class="tabbable style1">
	<ul class="nav nav-tabs tabber">
		<li class="active"><a data-toggle="tab" href="#tab1">Tab panel 1</a></li>
		<li><a data-toggle="tab" href="#tab2">Tab panel 2</a></li>
		<li><a data-toggle="tab" href="#tab3">Tab panel 3</a></li>					
	</ul>
	<div class="tab-content">
		<div id="tab1" class="tab-pane active">
			[...]
		</div>
		<div id="tab2" class="tab-pane">
			[...]
		</div>
		<div id="tab3" class="tab-pane">
			[...]
		</div>						
	</div>
</div>

Tab style 2

Eu atqui liber recusabo his

Inermis instructior vim in

Omnium dolores oporteat no usu

<div class="tabbable style2">
	<ul class="nav nav-tabs tabber">
		<li class="active"><a data-toggle="tab" href="#tab4">Tab panel 1</a></li>
		<li><a data-toggle="tab" href="#tab5">Tab panel 2</a></li>
		<li><a data-toggle="tab" href="#tab6">Tab panel 3</a></li>					
	</ul>
	<div class="tab-content">
		<div id="tab4" class="tab-pane active">
			[...]
		</div>
		<div id="tab5" class="tab-pane">
			[...]
		</div>
		<div id="tab6" class="tab-pane">
			[...]
		</div>						
	</div>
</div>

Alert

Example alert warningUbique denique accumsan deseruisse argumentum.

<div class="alert alert-warning">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Example alert warning</strong><br />
	[...]
</div>

Example alert dangerUbique denique accumsan deseruisse argumentum.

<div class="alert alert-danger">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Example alert danger</strong><br />
	[...]
</div>

Example alert infoUbique denique accumsan deseruisse argumentum.

<div class="alert alert-info">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Example alert info</strong><br />
	[...]
</div>

Example alert successUbique denique accumsan deseruisse argumentum.

<div class="alert alert-success">
	<button type="button" class="close" data-dismiss="alert">×</button>
	<strong>Example alert success</strong><br />
	[...]
</div>

Button

class="btn btn-default btn-sm"

class="btn btn-flat btn-sm"

class="btn btn-default"

class="btn btn-flat"

class="btn btn-default btn-md"

class="btn btn-flat btn-md"

class="btn btn-default btn-lg"

class="btn btn-flat btn-lg"