Text

Hier findest du textbasierten Bausteine. – Die Textgrößen variieren übrigens abhängig von der Displaygröße.

Überschriften

Alle Überschriften werden grundsätzlich ohne CSS-Klassen genutzt. Im Einzelfall können Klassen wie .text-left oder .text-right zugefügt werden. Die Klasse .h-left richtet alle innerhalb des betroffenen Elements befindlichen Überschriften linksbündig aus.

Für jede Überschrift gibt es eine korrespondierende CSS-Klasse .h1 ... .h6, die das Aussehen der ensprechenden Überschrift überträgt.

h1 Überschrift

h2 Überschrift

h3 Überschrift

h4 Überschrift

h5 Überschrift

h6 Überschrift

<h1>h1 Überschrift</h1>
<h2>h2 Überschrift</h2>
<h3>h3 Überschrift</h3>
<h4>h4 Überschrift</h4>
<h5>h5 Überschrift</h5>
<h6>h6 Überschrift</h6>

Überschriften <h1> ... <h6>

Display (großer Text)

Für sehr große Schriften, z.B. in Bannern, können die Klassen .display-1 ... display-4 genutzt werden. Sie sind auch mit Überschriften h1 … h6 kombinierbar..

Display 1

Display 2

Display 3

Display 4

<div class="display-1">Display 1</div>
<div class="display-2">Display 2</div>
<div class="display-3">Display 3</div>
<div class="display-4">Display 4</div>

Große Textgrößen .display-1 ... .display-4

Textgröße relativ reduzieren (Font-Size-Klassen)

Eine relative Reduzierung zwischen 95 % und 50 % in 5 %-Schritten läßt sich mitteels fs-{ 0_95, 0_9, 0_85, 0_8, ... 0_5 }

Lorem ipsum

<div class="display-3">
	<div class="fs-0_95">Lorem ipsum</div>
	<div class="fs-0_9">Lorem ipsum</div>
	<div class="fs-0_85">Lorem ipsum</div>
	<div class="fs-0_8">Lorem ipsum</div>
	<div class="fs-0_75">Lorem ipsum</div>
	<div class="fs-0_7">Lorem ipsum</div>
	<div class="fs-0_65">Lorem ipsum</div>
	<div class="fs-0_6">Lorem ipsum</div>
	<div class="fs-0_55">Lorem ipsum</div>
	<div class="fs-0_5">Lorem ipsum</div>
</div>

Große Textgrößen .display-1 ... .display-4

Weitere besondere Textgrößen

Der Lead-Text (.lead) dient als größenmäßig hervorgehobene Einleitung in ein Thema, bspw. am Seitenanfang.

<p class="lead">
	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.
</p>

Textgröße .lead

Kleiner Text (wahlweise .small oder <small>) dient für Randnotizen und „Kleingedrucktes“.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

<p class="small">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>

Textgröße .small

Link

Text

Standard-Link

Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<p>
	Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. 
</p>

Code

No-underline Link

.link-no-underline

<a class="link-no-underline" href="#"><i class="fa fa-home fa-4x" aria-hidden="true"></i></a>

Code

Zitate

Text

Inline-Zitat

Text

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

<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	<q class="quote-unstyled text-primary font-italic"><i class="fa fa-quote-right text-primary sub" aria-hidden="true"></i> Cum sociis natoque penatibus et magnis&nbsp;<i class="fa fa-quote-left text-primary sup" aria-hidden="true"></i></q>
	dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu. Aenean commodo ligula eget dolor. Aenean massa.
</p>

Code

Block-Zitat (klein)

Text

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

{# SMALL CITATION #}
<div class="row">
	<div class="col-md-9 col-lg-6 mx-auto">
		<blockquote class="text-primary text-center font-italic">
			<i class="fa fa-quote-right text-primary sub" aria-hidden="true"></i>
			Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, 
			justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.&nbsp;<i class="fa fa-quote-left text-primary sup" aria-hidden="true"></i>
		</blockquote>
	</div>
</div>
{# /SMALL CITATION #}

Code

Block-Zitat (klein, langer Text)

Text

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. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede.

{# SMALL CITATION (LARGE TEXT LENGTH) #}
<div class="row">
	<div class="col-md-9 mx-auto">
		<blockquote class="text-primary text-center font-italic">
			<i class="fa fa-quote-right text-primary sub" aria-hidden="true"></i>
			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. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, 
			aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam 
			dictum felis eu pede.&nbsp;<i class="fa fa-quote-left text-primary sup" aria-hidden="true"></i>
		</blockquote>
	</div>
</div>
{# /SMALL CITATION (LARGE TEXT LENGTH) #}

Code

Block-Zitat (groß)

Das Zitat ist vollständig aus Bootstrap-Komponenten aufgebaut, ggf. erweitert um ein LazyLoad-Bild. Die Farben sind über die (optionalen) Klassen .text-info (Icons), .text-dark (Zitattext), .text-primary (Name) und .text-muted (Job-Titel) setzen die Farben fest, während die Größen durch .display-4 (Icons), .h3 (Zitattext) und .small (Job-Titel) definiert werden.

Um auch im IE 10 korrekt angezeigt zu werden, umfasst die Struktur einige Elemente (<div class="w-100"> als Kindelement von .col-{ ... }) die eigentlich verzichtbar gewesen wären, jedoch modernen Browsern nicht schaden.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Lorem Ipsum Dolor sit amet

{# BIG CITATION #}
<div class="text-center">
	
	<div class="row text-primary font-italic">
		<div class="col-sm-auto h1 text-info text-left pr-0 m-0">
			<div class="w-100">
				<i class="fa fa-quote-right" aria-hidden="true"></i>
			</div>
		</div>
		<div class="col-sm lead text-dark">
			<blockquote class="w-100 mb-0">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
				Cum sociis natoque penatibus et magnis dis parturient montes.
			</blockquote>
		</div>
		<div class="col-sm-auto h1 text-info text-right pl-0 m-0 d-flex align-items-sm-end">
			<div class="w-100">
				<i class="fa fa-quote-left" aria-hidden="true"></i>
			</div>
		</div>
	</div>
	
	<div class="lh-1 mt-2">
		<figure class="mb-1">
			<script>document.write('<img class="img-fluid rounded-circle img-thumbnail" src="" width="100" height="100" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-002-720x720-thumb.jpg" alt="TODO">');</script>
			<noscript><img class="img-fluid rounded-circle img-thumbnail" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-002-720x720-thumb.jpg" alt="TODO"></noscript>
		</figure>
		<span class="d-block text-primary text-uppercase font-weight-normal">Lorem Ipsum</span>
		<span class="small text-muted">Dolor sit amet</span>
	</div>
	
</div>
{# /BIG CITATION #}

Code

Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.

Lorem Ipsum Dolor sit amet

{# BIG CITATION #}
<div class="text-center">
	
	<div class="row text-primary font-italic">
		<div class="col-sm-auto h1 text-info text-left pr-0 m-0">
			<div class="w-100">
				<i class="fa fa-quote-right" aria-hidden="true"></i>
			</div>
		</div>
		<div class="col-sm lead text-dark">
			<blockquote class="w-100 mb-0">
				Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.
			</blockquote>
		</div>
		<div class="col-sm-auto h1 text-info text-right pl-0 m-0 d-flex align-items-sm-end">
			<div class="w-100">
				<i class="fa fa-quote-left" aria-hidden="true"></i>
			</div>
		</div>
	</div>
	
	<div class="lh-1 mt-2">
		<span class="d-block text-primary text-uppercase font-weight-normal">Lena Schaumann</span>
		<span class="small text-muted">Gründerin Lumizil GmbH</span>
	</div>
	
</div>
{# /BIG CITATION #}

Code

Block-Zitat-Banner

Text

Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.

Lorem Ipsum Dolor sit amet

{# CITATION FULLWIDTH BANNER #}
<div class="bg-light position-relative mt-3 mb-5">
				
	<div class="arrow-down"></div>
	
	<div class="container pt-4 pb-1">
		
		{# CITATION #}
		<div class="text-center mb-3">
				
			<div class="row text-primary font-italic">
				<div class="col-sm-auto h1 text-dark text-left pr-0 m-0">
					<div class="w-100">
						<i class="fa fa-quote-right" aria-hidden="true"></i>
					</div>
				</div>
				<div class="col-sm lead text-dark">
					<blockquote class="w-100 mb-0">
						Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.
					</blockquote>
				</div>
				<div class="col-sm-auto h1 text-dark text-right pl-0 m-0 d-flex align-items-sm-end">
					<div class="w-100">
						<i class="fa fa-quote-left" aria-hidden="true"></i>
					</div>
				</div>
			</div>
			
			<div class="lh-1 mt-2">
				<figure class="mb-1">
					<script>document.write('<img class="img-fluid rounded-circle img-thumbnail" src="" width="100" height="100" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-002-720x720-thumb.jpg" alt="TODO">');</script>
					<noscript><img class="img-fluid rounded-circle img-thumbnail" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-002-720x720-thumb.jpg" alt="TODO"></noscript>
				</figure>
				<span class="d-block text-primary text-uppercase font-weight-normal">Lorem Ipsum</span>
				<span class="small text-muted">Dolor sit amet</span>
			</div>
			
		</div>
		{# /CITATION #}
		
	</div>
	<!-- /.container -->
				
	<div class="arrow-down border-light"></div>
	
</div>
{# /CITATION FULLWIDTH BANNER #}

Code

Text boxes

Text .class

Lorem ipsum dolor

<div class="row">
	<div class="col-sm-8 col-md-6 col-lg-4">

		{# BORDERED TEXT BOX #}
		<div class="card w-100 rounded border-primary border-strong text-primary text-center p">
			<div class="card-body d-flex align-items-center px-2">
				<div class="w-100">
					<div class="display-3 text-primary mb-0">
						42
					</div>
					<div class="lead">
						Lorem ipsum dolor
					</div>
				</div>
			</div>
		</div>
		{# /BORDERED TEXT BOX #}
		
	</div>
</div>

Code

Lorem ipsum dolor

Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

<div class="row">
	<div class="col-sm-8 col-md-6 col-lg-4">

		{# COLORED TEXT BOX #}
		<div class="card rounded text-white bg-primary p">
			<div class="card-header text-center font-weight-normal">Lorem ipsum dolor</div>
			<div class="card-body py-2 px-3">
				<p class="card-text">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
			</div>
		</div>
		{# /COLORED TEXT BOX #}
		
	</div>
</div>

Code

Text Columns (grid)

Eine .row enthält .cols, welche mit beliebigen Textelementen gefüllt werden. In der Regel sollen die .cols bei schmalen Devices (z.B. xs, sm) umbrechen und erst ab einer ausreichenden Fensterbreite tatsächlich Spalten bilden (z.B. .col-md-6).

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.

Cum sociis natoque

Penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

<div class="row">
						
	<div class="col-md-6">
		<h3>Lorem Ipsum</h3>
		<p>
			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.
		</p>
	</div>
	
	<div class="col-md-6">
		<h3>Cum sociis natoque</h3>
		<p>
			Penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
		</p>
	</div>
	
</div>

Responsive Columns mit 100% Breite von xs bis sm und 50% Breite ab md aufwärts

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.

Cum sociis natoque

Donec quam felis, ultricies nec, pellentesque eu. Penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. Donec pede justo, fringilla vel.

In enim justo

Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante

<div class="row">
						
	<div class="col-md-4">
		<h3>Lorem Ipsum</h3>
		<p>
			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.
		</p>
	</div>
	
	<div class="col-md-4">
		<h3>Cum sociis natoque</h3>
		<p>
			Donec quam felis, ultricies nec, pellentesque eu. Penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. Donec pede justo, fringilla vel.
		</p>
	</div>
	
	<div class="col-md-4">
		<h3>In enim justo</h3>
		<p>
			Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante
		</p>
	</div>

</div>

Responsive Columns mit 100% Breite von xs bis sm und 33.3% Breite ab md aufwärts

Text Columns (no grid)

Mittels .columns-md-3 wird Fließtext ab Displaygröße md in 3 Spalten geteilt. Die Spalten sind dabei nicht als HTML-Elemente enthalten, sondern lediglich als CSS-Formatierung.

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. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar.

<div class="columns-md-2 columns-lg-3">
	<p>
		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. Nulla consequat massa quis enim. Donec pede justo, fringilla 
		vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer 
		tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 
		Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies 
		nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit 
		amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar. 
	</p>
</div>

CSS-Columns, ab Größe md 2-spaltig, ab Größe lg 3-spaltig

Details list

Bla blub .columns-md-3.

Lorem ipsum
- Aenean massa
- Nullam dictum felis eu pede mollis
- Curabitur ullamcorper
- Nam eget dui
- Cum sociis natoque
Lorem ipsum
- Phasellus viverra nulla
- Consequat vitae
- Aenean leo
- Maecenas tempus
- Cum sociis natoque
- Nam eget dui
- Luctus pulvinar
Lorem ipsum
- Curabitur ullamcorper
- Nam eget dui
- Cum sociis natoque
Lorem ipsum
- Curabitur ullamcorper
- Nam eget dui
- Cum sociis natoque
Lorem ipsum
- Aenean massa
- Nullam dictum felis eu pede mollis
- Curabitur ullamcorper
- Nam eget dui
- Cum sociis natoque

<ul class="list-unstyled columns-md-2 columns-lg-3 mb-0">

<li class="card d-inline-block w-100 mb-3">
	<div class="card-header py-1 px-2">
		<h3 class="text-left text-inherit font-weight-normal mb-0">Lorem ipsum</h3>
	</div>
	<div class="card-body p-1">
		<ul class="fa-ul">
			<li><i class="fa-li fa fa-check text-success"></i>Aenean massa</li>
			<li><i class="fa-li fa fa-check text-success"></i>Nullam dictum felis eu pede mollis</li>
			<li><i class="fa-li fa fa-check text-success"></i>Curabitur ullamcorper</li>
			<li><i class="fa-li fa fa-check text-success"></i>Nam eget dui</li>
			<li><i class="fa-li fa fa-check text-success"></i>Cum sociis natoque</li>
		</ul>
	</div>
</li>

<li class="card d-inline-block w-100 mb-3">
	<div class="card-header py-1 px-2">
		<h3 class="text-left text-inherit font-weight-normal mb-0">Lorem ipsum</h3>
	</div>
	<div class="card-body p-1">
		<ul class="fa-ul">
			<li><i class="fa-li fa fa-check text-success"></i>Phasellus viverra nulla</li>
			<li><i class="fa-li fa fa-check text-success"></i>Consequat vitae</li>
			<li><i class="fa-li fa fa-check text-success"></i>Aenean leo</li>
			<li><i class="fa-li fa fa-check text-success"></i>Maecenas tempus</li>
			<li><i class="fa-li fa fa-check text-success"></i>Cum sociis natoque</li>
			<li><i class="fa-li fa fa-check text-success"></i>Nam eget dui</li>
			<li><i class="fa-li fa fa-check text-success"></i>Luctus pulvinar</li>
		</ul>
	</div>
</li>

<li class="card d-inline-block w-100 mb-3">
	<div class="card-header py-1 px-2">
		<h3 class="text-left text-inherit font-weight-normal mb-0">Lorem ipsum</h3>
	</div>
	<div class="card-body p-1">
		<ul class="fa-ul">
			<li><i class="fa-li fa fa-check text-success"></i>Curabitur ullamcorper</li>
			<li><i class="fa-li fa fa-check text-success"></i>Nam eget dui</li>
			<li><i class="fa-li fa fa-check text-success"></i>Cum sociis natoque</li>
		</ul>
	</div>
</li>

<li class="card d-inline-block w-100 mb-3">
	<div class="card-header py-1 px-2">
		<h3 class="text-left text-inherit font-weight-normal mb-0">Lorem ipsum</h3>
	</div>
	<div class="card-body p-1">
		<ul class="fa-ul">
			<li><i class="fa-li fa fa-check text-success"></i>Curabitur ullamcorper</li>
			<li><i class="fa-li fa fa-check text-success"></i>Nam eget dui</li>
			<li><i class="fa-li fa fa-check text-success"></i>Cum sociis natoque</li>
		</ul>
	</div>
</li>

<li class="card d-inline-block w-100 mb-3">
	<div class="card-header py-1 px-2">
		<h3 class="text-left text-inherit font-weight-normal mb-0">Lorem ipsum</h3>
	</div>
	<div class="card-body p-1">
		<ul class="fa-ul">
			<li><i class="fa-li fa fa-check text-success"></i>Aenean massa</li>
			<li><i class="fa-li fa fa-check text-success"></i>Nullam dictum felis eu pede mollis</li>
			<li><i class="fa-li fa fa-check text-success"></i>Curabitur ullamcorper</li>
			<li><i class="fa-li fa fa-check text-success"></i>Nam eget dui</li>
			<li><i class="fa-li fa fa-check text-success"></i>Cum sociis natoque</li>
		</ul>
	</div>
</li>

</ul>

Code