Zum Inhalt springen
UI Kit
Accent

Bausteine für Blogartikel

Die Bausteine in einem Artikel. Inhaltsverzeichnisse, Zitate, Hinweiskästen, Weiterlesen und die Autorenbox.

5 Components · 20 Variants
Kategorie wechseln

Alles innerhalb eines langen Textes

Ein langer Artikel lebt von kleinen Bausteinen, die Orientierung geben, eine Pause setzen und zum Weiterlesen einladen. Die fünf Components hier stehen in oder neben einem Text, folgen seiner Breite und halten die Lesereihenfolge, ein Ratgeber bleibt so am Handy und im Screenreader klar.

Das Inhaltsverzeichnis gibt es als „Klebende Seitenleiste“ mit gleitender Markierung, als Inhaltskasten unter dem Titel, als Randkarte oder als Kapitelkarten mit Lesezeit, alle mit Scrollspy. Das herausgestellte Zitat setzt einen Satz groß, „Im Text“, „Mittig“, „Mit Textmarker“ samt Kopierknopf oder „Mit Porträt“. Der Hinweiskasten trägt Hinweise in vier Tönen, Information, Tipp, Achtung und Erledigt, als ruhige Fläche, Seitenlinie, zum Ausklappen oder groß mit Schritten. „Weiterlesen“ bietet Karten, eine nummerierte Liste, einen großen Tipp oder vor und zurück. Die Autorenbox zeigt, wer schreibt, als Karte am Ende, Leiste zum Folgen, klebende Seitenkarte oder Team.

Ab rund 1500 Wörtern lohnt ein Inhaltsverzeichnis, ein kurzer Beitrag liest sich am besten in einem Zug. Nimm ein Zitat pro Artikel und Hinweiskästen dort, wo Leser etwas Wichtiges sicher mitnehmen sollen. Schließ mit Autorenbox und Weiterlesen ab, genau dort entscheiden Menschen, ob sie auf der Seite bleiben.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

author-box

Autorenbox

Wer es geschrieben hat und warum die Person es weiß. Karte am Ende, Leiste mit Folgen-Knopf, klebende Karte oder das Team.

Props und Details · Autorenbox

Karte am EndeNeu in 1.2

Porträt, Kurzbiografie, Links und der Weg zu allen Artikeln, für das Ende eines Textes.

Leiste zum FolgenNeu in 1.2

Eine schmale Leiste mit Folgen-Knopf, der mitzählt, und einer Kurzbiografie zum Aufklappen.

Klebende SeitenkarteNeu in 1.2

Eine Karte neben dem Text mit Porträt, Qualifikationen und Kontakt, auf dem Telefon über dem Text.

TeamNeu in 1.2

Alle hinter einem Beitrag und was jede Person beigetragen hat, mit Zeile und gestapelten Porträts.

callout

Hinweiskasten

Hinweise im Text in vier Tönen, Information, Tipp, Achtung und Erledigt. Als ruhige Fläche, Seitenlinie, Ausklapper oder große Fläche.

Props und Details · Hinweiskasten

Ruhige FlächeNeu in 1.2

Eine getönte Fläche mit Icon, Titel, Text und Link, in der Farbe ihres Tons.

SeitenlinieNeu in 1.2

Eine ruhige Linie in der Farbe des Tons mit Kennzeichnung, für Texte mit mehreren Hinweisen.

Zum AusklappenNeu in 1.2

Ein Titel, der sich zu den Details öffnet, für Exkurse, die den Text sonst unterbrechen.

pull-quote

Herausgestelltes Zitat

Ein Satz aus dem Text, groß gesetzt. Neben den Absätzen, mittig, mit Textmarker oder neben einem Porträt.

Props und Details · Herausgestelltes Zitat

Im TextNeu in 1.2

Ragt auf breiten Bildschirmen neben den Absätzen in den Rand, auf dem Telefon steht es mit Linie dazwischen.

MittigNeu in 1.2

Allein und groß auf einem ruhigen Band, steigt Wort für Wort unter einem gezeichneten Anführungszeichen auf.

Mit TextmarkerNeu in 1.2

Ein Textmarker streicht beim Hereinscrollen über die Kernaussage, dazu ein Knopf, der das Zitat kopiert.

Mit PorträtNeu in 1.2

Die Person neben dem Zitat, mit Name, Rolle und Quelle.

related-content

Weiterlesen

Was man als Nächstes liest, ansieht oder lädt, mit Art und Dauer. Karten, nummerierte Liste, ein großer Tipp oder vor und zurück.

Props und Details · Weiterlesen

KartenNeu in 1.2

Drei Karten mit Bild, Art und Dauer, auf dem Telefon eine seitliche Reihe mit Knöpfen.

Nummerierte ListeNeu in 1.2

Eine kompakte Liste in zwei Spalten mit Art und Dauer, für das Ende eines Artikels.

Großer TippNeu in 1.2

Ein großer Tipp auf seinem Bild neben einer kurzen Liste mit kleinen Bildern.

Vor und zurückNeu in 1.2

Der vorherige und der nächste Beitrag als zwei große Links, darunter mehr zum Thema.

table-of-contents

Inhaltsverzeichnis

Inhaltsverzeichnisse mit Scrollspy für Ratgeber und Artikel. Eine klebende Leiste, ein Ausklappkasten, eine Randkarte und Kapitelkarten.

Props und Details · Inhaltsverzeichnis

Klebende SeitenleisteNeu in 1.2

Eine Leiste neben dem Text mit gleitender Marke und füllender Linie, auf dem Telefon eine Leiste zum Ausklappen.

InhaltskastenNeu in 1.2

Ein nummerierter Kasten unter dem Titel, der sich einklappt, Gelesenes markiert und den Weg zurück anbietet.

RandkarteNeu in 1.2

Ruhige Striche am Rand, die sich bei Zeiger oder Fokus zu Titeln öffnen, auf dem Telefon ein Knopf mit Fortschritt.

KapitelkartenNeu in 1.2

Kapitel als Karten mit Kurztext und Minuten, beim Scrollen als gelesen markiert, mit Link zum Weiterlesen.

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Artikel-Bausteine stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert