Skip to main content

Trenner und Verbinder

Hier findest du Designelemente wie Linien oder Pfeile, die als Trennung oder Verbindung zwischen sonstigen Bausteine positioniert werden.

Linie

<div class="container">
	...
	<hr>
	...
</div>

Linie in .container

<hr>

Linie über die gesamte Breite

Linie mit Pfeil

<hr class="hr-arrow-down">

Linie mit Pfeil nach unten

<hr class="hr-arrow-up">

Linie mit Pfeil nach oben

Durch Ändern der Border-Color, z.B. durch .border-primary, ändert sich die Farbe der Linie einschließlich Pfeil. Da die Linie keine weiteren Flächen enthält, kann sie auch auf farbigem Untergrund oder auf Bildern genutzt werden. 

<hr class="hr-arrow-down border-primary">
<hr class="hr-arrow-down border-dark">
<hr class="hr-arrow-down border-success">
<hr class="hr-arrow-down border-warning">
<hr class="hr-arrow-down border-danger">

Farbige Linie mit Pfeil nach unten

<div class="bg-primary py-4">
	<hr class="hr-arrow-down border-white">
</div>

Farbige Box enthält Linie mit Pfeil nach oben

Lorem ipsum

Dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus. 

<div class="card border-0 bg-cover bg-c text-white text-shadow-dark text-center" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-008-1140x380.jpg">
								
	<div class="card-body">
		<h3 class="text-white display-3 mb-0">Lorem ipsum</h3>
	</div>
	
	<hr class="hr-arrow-down border-white my-0">
	
	<div class="card-body pb-3 lead">
		<p>
			 Dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.
		</p>
	</div>
	
</div>

Card mit LazyLoad-Hintergrundbild und weißer Linie mit Pfeil

Pfeil

Der Pfeil tritt in der Regel im Zusammenspiel mit einem weiteren Element (z.B. ein Bild) auf, in das er hinein oder heraus zeigt. Der Pfeil selber besteht aus einem <div class="arrow-down">, das sich gemeinsam mit dem zu überlagenden Element (z.B. Bild) in einem relative positioniertem Parent befindet, z.B. ein <div class="position-relative">...</div>.

Minimales Setup

<div class="position-relative">
	<div class="arrow-down"></div>
	...
</div>

Minimal Setup Pfeil nach innen

Colorbox mit Pfeil nach innen / außen

Lorem ipsum 
<div class="position-relative bg-info">
					
<div class="arrow-down"></div>

<div class="display-4 text-center text-white p-4">
	Lorem ipsum
</div>

</div>

Colorbox mit Pfeil nach innen

Lorem ipsum 
<div class="position-relative bg-info rounded">
							
<div class="arrow-up arrow-right border-info"></div>

<div class="display-4 text-center text-white p-4">
	Lorem ipsum
</div>

</div>

Colorbox als speech bubble

Lorem ipsum 
<div class="position-relative bg-info">
					
<div class="arrow-down"></div>

<div class="display-4 text-center text-white p-4">
	Lorem ipsum
</div>
					
<div class="arrow-down border-info"></div>

</div>

Colorbox mit Pfeil nach innen und nach außen, wobei der Pfeil nach außen der Hintergrundfarbe der Colorbox entspricht

Farben

Der Pfeil ist standardmäßig weiß und kann durch Klassen .border-primary, .border-info, .border-dark etc. angepaßt werden.

Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
<div class="position-relative">
<div class="arrow-down border-primary"></div>
<div class="text-center p-3">Lorem</div>
</div>
<div class="position-relative">
<div class="arrow-down border-light"></div>
<div class="text-center p-3">Lorem</div>
</div>
<div class="position-relative">
<div class="arrow-down border-dark"></div>
<div class="text-center p-3">Lorem</div>
</div>
<div class="position-relative">
<div class="arrow-down border-success"></div>
<div class="text-center p-3">Lorem</div>
</div>
<div class="position-relative">
<div class="arrow-down border-warning"></div>
<div class="text-center p-3">Lorem</div>
</div>
<div class="position-relative">
<div class="arrow-down border-danger"></div>
<div class="text-center p-3">Lorem</div>
</div>

Pfeile in verschiedenen Farben

Bilder mit Pfeil

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
<div class="position-relative mb-3">

<div class="arrow-down"></div>
				
<figure>
	
	<script>document.write('<img class="img-fluid" src="" width="1140" height="380" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-001-1140x380.jpg" alt="Beispiel Bild">');</script>
	<noscript><img class="img-fluid" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-001-1140x380.jpg" alt="Beispiel Bild"></noscript>
	
	<figcaption class="text-muted font-italic small mt-1">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
	</figcaption>
	
</figure>

</div>

Lazyload-Bild mit Pfeil nach innen

<div class="position-relative mb-3">
						
<figure>
	
	<script>document.write('<img class="img-fluid" src="" width="1140" height="380" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-003-1140x380.jpg" alt="Beispiel Bild">');</script>
	<noscript><img class="img-fluid" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-003-1140x380.jpg" alt="Beispiel Bild"></noscript>
	
</figure>

<div class="arrow-inverse-down"></div>

</div>

Lazyload-Bild mit Pfeil nach außen – das Bild wird am unteren Rand um die Länge des Pfeils verkleinert

Banner mit Pfeil nach außen auf nachfolgender Colorbox

Lorem

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Code