elemente.njk

---
title: Bits & Bäume - Elemente für die Website
description: Diese Seite ist ausschließlich für die Veranschaulichung der Design-Elemente der Website und sollte nicht veröffentlicht werden.
layout: layouts/_base.ejs
---

<!-- You can copy elements from this file to other pages. If you want an element as a separate section (sections have defined margins to the following elements), you have to copy the whole section. If you need them incorporated different, you can start copying them beginning with the following DIV tag. -->

<section class="max-w-3xl">
	<h1>Website-Schriftstile und Elemente</h1>

	<p class="highlight">Wie die Textstile für eure Website aussehen, also beispielsweise Überschriften, Fließtexte, Zitate (h1, h2, etc.), findet ihr auf dieser Seite. Hier werden auch wiederkehrende Gestaltungselemente abgebildet, wie Boxen oder CTAs. (Dies ist ein Lead-Text)</p>
</section>

<section class="max-w-3xl">
	<div class="box box-infos">
		<h2 class="h3">Dies ist ein Kasten mit Infos.</h2>
		<p>Es packte seine acht Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>
		<a href="#">
			<button class="btn-dark">Button dunkel</button>
		</a>
		<div class="box__icon">
			<img src="/assets/images/icon-box-infos.svg" widht="66" height="66">
		</div>
		<div class="box__pixel">
			<img src="/assets/images/pixel-box-infos.svg" widht="50" height="50">
		</div>
	</div>
	<div class="box box-infos">
		<h2 class="h3"></h2>
		
		<a href="#">
			<button class="btn-dark">Button dunkel</button>
		</a>
		<div class="box__icon">
			<img src="/assets/images/icon-box-infos.svg" widht="66" height="66">
		</div>
		<div class="box__pixel">
			<img src="/assets/images/pixel-box-infos.svg" widht="50" height="50">
		</div>
	</div>
	<div class="box box-cta">
		<h2 class="h3">Dies ist ein Handlungsaufruf</h2>
		<p>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>
		<a href="#">
			<button class="btn-dark">Button dunkel</button>
		</a>
		<div class="box__icon">
			<img src="/assets/images/icon-box-cta.svg" widht="66" height="66">
		</div>
		<div class="box__pixel">
			<img src="/assets/images/pixel-box-cta.svg" widht="40" height="50">
		</div>
	</div>
	<div class="box box-links">
		<h2 class="h3">Dies ist ein Kasten mit Links/Downloads</h2>
		<ul>
			<li><a href="#">Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</a></li>
			<li><a href="#">die Headline von Alphabetdorf</a></li>
			<li><a href="#">die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</a></li>
			<li><a href="#">Punkt 4</a></li>
		</ul>
		<a href="#">
			<button class="btn-dark">Button dunkel</button>
		</a>
		<div class="box__icon">
			<img src="/assets/images/icon-box-links.svg" widht="66" height="66">
		</div>
		<div class="box__pixel">
			<img src="/assets/images/pixel-box-links.svg" widht="50" height="50">
		</div>
	</div>

	<div class="box box-links">
		<h2 class="h3">Dies ist ein Kasten mit Links/Downloads</h2>
		<ul>
			<li><a href="">TEXT</a></li>
			<li><a href="">TEXT</a></li>
			<li><a href="">TEXT</a></li>
			<li><a href="">TEXT</a></li>
		</ul>
		<a href="#">
			<button class="btn-dark">Button dunkel</button>
		</a>
		<div class="box__icon">
			<img src="/assets/images/icon-box-links.svg" widht="66" height="66">
		</div>
		<div class="box__pixel">
			<img src="/assets/images/pixel-box-links.svg" widht="50" height="50">
		</div>
	</div>

	<!-- This box will only work in nunjucks files -->
	<div class="box box-img flex flex-wrap md:flex-nowrap gap-x-5">
		<div class="box__image w-full md:w-2/5">
			<img class="object-cover"
				src="{% thumbnail 'assets/images/gallery-example-3-cropped.jpg' %}"
				alt="Sprecher mit Mikrofon"
				sizes="(min-width: 780px) 280px, 93.04vw"
				data-img2picture-widths="280,400,670,800"
			>
		</div>
		<div class="text w-full md:w-3/5">
			<h2 class="h3">Dies ist ein Kasten mit Bild daneben.</h2>
			<p>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen.</p>
			<a href="#">
				<button class="btn-dark">Button dunkel</button>
			</a>
		</div>
		<div class="box__pixel">
			<img src="/assets/images/pixel-box-img.svg" widht="50" height="40">
		</div>
	</div>

</section>

<section class="max-w-3xl">
	<h2 class="h3">Buttons</h2>
		<!-- The class "mr-10" at the link of the first example buton is only necessary to have a distance to the second button. If you just use one Button you can use the link without that class like with the second button. -->
		<a class="mr-10" href="#"><button class="btn-dark">Button dunkel</button></a>
		<a href="#"><button class="btn-light">Button hell</button></a>
</section>

<!-- The following part is broader than the default width of the page content - if you copy it, you have to close the preceding section with </section> and start copying with the following section tag. Also open a normal <section class="max-w-3xl"> after this broader section to have the following content in the default width again. -->
<!-- If you should show more than three boxes in a row (not designed and styled for that) or add very long words in the headlines, possibility is high that the headlines getting to broad or to big. You can than add a class "hyphens" to add hyphenation or use a smaller size for the headlines like the classes "h4" or "text-lg". -->
<section class="tiles-section px-0 pt-24">
	<div class="wrapper relative bg-blue-light">
		<div class="tiles flex flex-wrap container max-w-7xl m-auto relative -top-24">
			<div class="w-full lg:w-1/3 flex flex-col">
				<div class="box box-infos mx-4 lg:mr-4 flex-1">
					<h2 class="h3">Dies ist ein Kasten mit Infos.</h2>
					<p>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück.</p>
					<a href="#">
						<button class="btn-dark">Button dunkel</button>
					</a>
				</div>
			</div>
			<div class="w-full lg:w-1/3 flex flex-col">
				<div class="box box-cta mx-4 lg:mx-2 flex-1">
					<h2 class="h3">Dies ist ein Handlungsaufruf</h2>
					<p>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück.</p>
					<a href="#">
						<button class="btn-dark">Button dunkel</button>
					</a>
				</div>
			</div>
			<div class="w-full lg:w-1/3 flex flex-col">
				<div class="box box-infos mx-4 lg:ml-4 flex-1">
					<h2 class="h3">Dies ist ein Kasten mit Infos.</h2>
					<p>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück.</p>
					<a href="#">
						<button class="btn-dark">Button dunkel</button>
					</a>
				</div>
			</div>
			<div class="w-full lg:w-1/2 flex flex-col">
				<div class="box box-infos mx-4 lg:mr-3 flex-1">
					<h2 class="h3">Dies ist ein Kasten mit Infos.</h2>
					<p>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück.</p>
					<a href="#">
						<button class="btn-dark">Button dunkel</button>
					</a>
				</div>
			</div>
			<div class="w-full lg:w-1/2 flex flex-col">
				<div class="box box-cta mx-4 lg:ml-3 flex-1">
					<h2 class="h3">Dies ist ein Handlungsaufruf</h2>
					<p>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück.</p>
					<a href="#">
						<button class="btn-dark">Button dunkel</button>
					</a>
				</div>
			</div>
		</div>
		<div class="area__pixel">
			<img src="/assets/images/pixel-blue-area.svg" widht="60" height="60">
		</div>
	</div>
</section>

<section class="max-w-3xl">
	<div>
		<h2 class="h3">Akkordeon</h2>
		<details class="acc__detail">
			<summary class="acc__summary">
				<span class="acc__question">Akkordeon / FAQ-Element</span>
				<div class="acc__icon"></div>
			</summary>
			<p class="acc__text">Unterwegs traf es eine Copy. Die Copy warnte Lorem Ipsum, da, wo sie herkäme, wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort „und“, und das Dummytextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>
		</details>
		<details class="acc__detail">
			<summary class="acc__summary">
				<span class="acc__question">Ein sehr langer Text, damit der auch auf breiten Bildschirmtexten schon mehrzeilig wird und damit auch diese Szenario angesehen werden kann.</span>
				<div class="acc__icon"></div>
			</summary>
			<p class="acc__text">Unterwegs traf es eine Copy. Die Copy warnte Lorem Ipsum, da, wo sie herkäme, wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort „und“, und das Dummytextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>
		</details>
</div>
</section>

<!-- The following section has an ID so that the images in the image single view can be linked back to it -->
<!-- This section will only work in nunjucks files -->
<section id="gallery" class="container">
	<h2 class="h3">Galerie</h2>
	<div class="gallery__thumbnails flex flex-wrap">
		{% for img in galleries.main %}
		<div class="gallery__thumb">
			{# <a href="{{ img.path }}" target="_blank"> #}
			<a href="/gallery/main/{{ img.path | basefilename }}">
				{% set imgPath = img.thumbPath | default(img.path) %}
				{% set altText = img.thumbAlt | default(img.alt) %}
				<div class="wrapper">
					<img class="object-cover"
						src="{% thumbnail imgPath %}"
						alt="{{ altText }}"
						sizes="(min-width: 1540px) 375px, 283px"
						data-img2picture-widths="283,375,566,750"
						>
					<div class="overlay">
						<div class="symbol">+</div>
					</div>
				</div>
			</a>
		</div>
		{% endfor %}
	</div>
</section>

<section class="max-w-3xl">
	<div>
		<h2 class="h3">Testimonial</h2>
		<div class="flex flex-wrap sm:flex-nowrap">
			<div class="testimonial__visual">
				<img class="testimonial__image" src="/assets/images/gallery-example-1-cropped.jpg" alt="Beispiel-Portrait" sizes="150px" data-img2picture-widths="150, 300">
				<img class="image_icon" src="/assets/images/pixel-testimonial-1.svg" widht="80" height="40">
			</div>
			<div>
				<p class="quote">„Eines Tages aber beschloss eine kleine Zeile Dummytext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Dummytextchen ließ sich nicht beirren.“</p>
				<p class="quote">Margarita Kourtparasidou, Programmiererin</p>
			</div>
		</div>
	</div>
</section>

<!-- The following part is broader than the default width of the page content - if you copy it, you have to close the preceding section with </section> and start copying with the following section tag. Also open a normal <section class="max-w-3xl"> after this broader section to have the following content in the default width again. -->
<section class="container max-w-5xl">
	<div>
		<h2 class="h3">Redner*innen</h2>
		<div class="flex flex-wrap justify-between">
			<div class="speaker__tile">
				<img class="speaker__img" src="/assets/images/gallery-example-1-cropped.jpg" alt="Beispiel-Portrait" sizes="180px" data-img2picture-widths="180, 360">
				<img class="image_icon" src="/assets/images/pixel-testimonial-2.svg" widht="60" height="50">
				<p class="speaker__name">Peter Pan</p>
				<p>Designerin</p>
			</div>
			<div class="speaker__tile">
				<img class="speaker__img" src="/assets/images/gallery-example-3-cropped-2.jpg" alt="Beispiel-Portrait" sizes="180px" data-img2picture-widths="180, 360">
				<img class="image_icon" src="/assets/images/pixel-testimonial-3.svg" widht="70" height="40">
				<p class="speaker__name">Mickey Mouse</p>
				<p>Programmiererin</p>
			</div>
			<div class="speaker__tile">
				<img class="speaker__img" src="/assets/images/gallery-example-1-cropped.jpg" alt="Beispiel-Portrait" sizes="180px" data-img2picture-widths="180, 360">
				<img class="image_icon" src="/assets/images/pixel-testimonial-5.svg" widht="70" height="40">
				<p class="speaker__name">Elsa Einhorn</p>
				<p>Programmierer</p>
			</div>
		</div>
	</div>
</section>

<!-- The following part is broader than the default width of the page content - if you copy it, you have to close the preceding section with </section> and start copying with the following section tag. Also open a normal <section class="max-w-3xl"> after this broader section to have the following content in the default width again. -->
<section class="container max-w-7xl">
	<h2 class="h3">Tickets</h2>
	<div class="flex flex-wrap justify-center">
		<div class="w-full lg:w-2/3 flex flex-col">
			<div class="box box-blue m-4 flex-1">
				<h2 class="h3">Unterstützer*innenticket</h2>
				<p>Du möchtest unsere Arbeit unterstützen und die Bewegung der Bits & Bäume weiter vorantreiben? Du hast das nötige Geld? Dann freuen wir uns, wenn du dich für das Unterstützer*innenticket entscheidest. Nimmt dieses Ticket auch, wenn du es von deiner Arbeitsstelle / Firma / Institution bezahlt bekommst. Du erhält eine Rechnung für deine Buchhaltungsabteilung.</p>
                <a href="https://events.fairetickets.de/gedlv/">
					<button class="btn-dark">Für 126 € kaufen</button>
				</a>
				<div class="box__pixel">
					<img src="/assets/images/pixel-box-ticket.svg" widht="60" height="40">
				</div>
			</div>
		</div>
		<div class="w-full lg:w-1/3 flex flex-col">
			<div class="box box-infos m-4 flex-1">
				<h2 class="h3">Standardticket</h2>
				<p>Deckt die Kosten für deine Verpflegung und gibt uns Spielraum nach oben, um beispielsweise Künstler*innen zu engagieren und entsprechend zu entlohnen.</p>
                <a href="https://events.fairetickets.de/gedlv/">
					<button class="btn-dark">Für 64 € kaufen</button>
				</a>
			</div>
		</div>
		<div class="w-full lg:w-1/3 flex flex-col">
			<div class="box box-infos m-4 flex-1">
				<h2 class="h3">Suffizienzticket</h2>
				<p>Deckt die Kosten für deine Verpflegung (Mittag- und Abendessen), inkl. Heißgetränken und Wasser ab. Für uns entstehen so keine zusätzlichen Kosten.</p>
                <a href="https://events.fairetickets.de/gedlv/">
					<button class="btn-dark">Für 32 € kaufen</button>
				</a>
			</div>
		</div>
		<div class="w-full lg:w-1/3 flex flex-col">
			<div class="box box-infos m-4 flex-1">
				<h2 class="h3">Soli-Ticket</h2>
				<p>Du hast aktuell nicht die finanziellen Mittel, an der Bits & Bäume teilzunehmen? Dieses Ticket soll dir einen Besuch ermöglichen. Alle die Lust haben, dabei zu sein, sollten die Chance dazu bekommen.</p>
                <a href="https://events.fairetickets.de/gedlv/">
					<button class="btn-dark">Für 10 € kaufen</button>
				</a>
			</div>
		</div>
	</div>
</section>

<section class="max-w-3xl">
	<h2 class="h3">Regionale Zweige</h2>
	<div class="box box-cta">
		<h3><a href="#">Bits & Bäume Dresden</a></h3>
		<p>war der erste Stammtisch! :) Gegründet von der Fakultät Informatik der TU Dresden nach zwei eigenen Bits&Bäume-Veranstaltungen am 23. Mai und 20. Juni 2019. Trifft sich an der Uni Dresden.</p>
	</div>
</section>

<section class="max-w-3xl">
	<h2 class="h3">Träger*innen</h2>
	<div class="box box-orga">
		<div class="image">
			<img src="/assets/images/logo-brot-fuer-die-welt.svg" alt="Logo von Brot für die Welt">
		</div>
		<div class="text">
			<h3>Brot für die Welt</h3>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		</div>
	</div>
</section>

<!-- The following part is broader than the default width of the page content - if you copy it, you have to close the preceding section with </section> and start copying with the following section tag. Also open a normal <section class="max-w-3xl"> after this broader section to have the following content in the default width again. -->
<section>
	<div class="container max-w-7xl mx-auto">
		<h2 class="h3">Termine / Forum</h2>
	</div>
	<div class="-mx-2 sm:-mx-6 flex flex-wrap">
		<div class="w-full lg:w-3/5 bg-blue-light">
			<div class="max-w-3xl lg:float-right px-4 sm:px-12 lg:pl-5">
				<h2>Wie viele Bits braucht die Energiewende?</h2>
				<p>Die Energiewende soll den Übergang zu einem Energiesystem gestalten, das von fluktuierenden erneuerbaren Energien geprägt sein wird. Dies erfordert den Einsatz von Informations- und Kommunikationstechnologie, um einen Ausgleich von Angebot und Nachfrage zu gewährleisten. Doch zu den verschiedenen Aspekten der Digitalisierung des Energiesystems gibt es eine Vielzahl an Diskursen: An welchen Stellen sind digitale Lösungen sinnvoll und notwendig? Brauchen wir intelligente Netze, intelligente Verbrauchssteuerungen und intelligente Erzeuger? Kann die Digitalisierung unser Energiesystem effizienter und dezentraler machen? Wird es dadurch resilienter oder verwundbarer? Und: Wie kann das digitale Energiesystem gerecht gestaltet werden? Auf dem 5. Forum Bits & Bäume wollen wir diskutieren, wie die politischen Rahmenbedingungen diesen Fragen unter der Prämisse des Klimaschutzes begegnen können</p>
				<a href="#">
					<button class="btn-dark">Anmeldung und Infos</button>
				</a>
			</div>
		</div>
		<div class="w-full lg:w-2/5 bg-green-light">
			<div class="max-w-2xl pt-12 px-4 sm:px-12">
				<span class="h3">20. November 2022</span>
				<p class="mb-14">16:00 - 18:00 Uhr</p>
				<span class="h4">Ort:</span>
				<p class="mb-14">Einstein Center Digital Future<br />
				Wilhelmstraße 67, 10117 Berlin</p>
				<span class="h4">In Zusammenarbeit mit:</span>
				<img class="-ml-3 mt-2 mb-12" src="/assets/images/logo-brot-fuer-die-welt.svg" alt="Logo von Brot für die Welt">
			</div>
		</div>
	</div>
</section>

<section class="container">
	<hr>
</section>

<section class="fonts max-w-3xl">
	<h2 class="h3">Schriftstile</h2>
	<h1>Überschrift 1 (h1): Diese Überschrift ist die Hauptüberschrift – es gibt sie auf jeder Seite nur einmal und sie steht über dem Text</h1>
	<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien, leben die Dummytexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p>
	<p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Textlink Textlink hover Nicht einmal von der allmächtigen Interpunktion werden die Dummytexte beherrscht – ein geradezu unorthographisches Leben.</p>
	<p class="font-bold">So sieht ein Satz aus, wenn er fett ist.</p>
	<p class="font-bold">So sieht ein Satz aus, wenn er fett ist.</p>
	<p class="font-bold">So sieht ein Satz aus, wenn er fett ist.</p>
	<h2>Überschrift 2 (h2): Diese Überschrift gibt es auf jeder Seite mehrmals als Zwischenüberschrift</h2>
	<p>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>
	<h3>Überschrift 3 (h3): Diese Überschrift kann bei längeren Texten als Zwischenüberschrift dritter Ebene verwendet werden und ist der „Überschrift 2“ untergeordnet</h3>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volup.</p>
	<h4>Überschrift 4 (h4): Diese Überschrift kann bei langen Texten als Zwischenüberschrift vierter Ebene verwendet werden und ist der „Überschrift 3“ untergeordnet</h4>
	<p>Doch alles Gutzureden konnte es nicht überzeugen, und so dauerte es nicht lange, bis es an ein paar durchtriebene Werbetexter geriet. Zusammen betranken sie sich mit Longe und Parole, und Lorem Ipsum ließ sich anheuern und für ihre Projekte wieder und wieder verheizen. Und wenn es nicht umgeschrieben wurde, dann schuftet es noch heute für Sie.</p>
	<h3>Links</h3>
	<p>Lorem ipsum dolor sit amet, <a href="#">Linktext</a> sadipscing elitr, sed diam <a href="#">Linktext Hover</a> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volup.</p>
	<h3>Zitat / Hervorherbung</h3>
	<p class="quote">„Eines Tages aber beschloss eine kleine Zeile Dummytext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Dummytextchen ließ sich nicht beirren.“</p>
	<h3>Liste</h3>
	<p>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>
	<ul>
		<li>Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</li>
		<li>die Headline von Alphabetdorf</li>
		<li>die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</li>
		<li>Punkt 4</li>
	</ul>
	<p>Unterwegs traf es eine Copy. Die Copy warnte Lorem Ipsum, da, wo sie herkäme, wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort „und“, und das Dummytextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>
</section>