Blog-Artikel dienen der Auflistung aktueller Meldungen in einer Übersicht, vergleichbar mit den Rubrikenseiten von Online-Publikationen oder der Liste von Blogposts im Feed eines Blogs.
Als eigenständige, in sich gekapselte Elemente sind sie selbst nicht interaktiv, enthalten oftmals aber Links zu weiterführenden Inhalten – diese werden einzeln und zeilenweise unter dem Fließtext angeordnet. Sie können ein illustratives oder informatives Bild enthalten, müssen dies aber nicht zwingend.
Positionierung & responsives Verhalten
Ab dem Breakpoint XS (≥ 0px)
Das Bild eines Blog-Artikels nimmt 100% der Viewport-Breite ein.
Überschrift, Metadaten und Text werden im Grid platziert.
Smartphone - Breakpoint XS
Ab dem Breakpoint LG (≥ 992px)
Bild und Text werden nebeneinander angeordnet.
Alle Inhalte liegen innerhalb des Grids.
Artikel werden nicht abgeschnitten, sondern vollständig angezeigt.
Blog-Artikel am Breakpoint LG
Blog-Artikel müssen nicht zwingend ein zugeordnetes Bild haben.
Wenn das Bild entfällt, dann wird in der mehrspaltigen Ansicht der Platz freigehalten, der Text verbleibt in seiner Spalte.
Blog-Artikel im Grid mit und ohne dazugehöriges Bild
Design
Typografie
Über alle Breakpoints
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Element: Eingebettete Komponente: Link (Standard-Link mit Icon links, Primär)
Eigenschaften sind in der eingebetteten Komponente beschrieben. Sollten mehrere Links platziert werden, dann werden diese vertikal und mit einem Abstand von .5rem zueinander angeordnet.
Ab Breakpoint: LG (≥ 992px)
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Im folgenden Beispiel werden Vektorgrafiken verwendet (SVG). Falls Rastergrafiken eingesetzt werden, müssen diese mit Hilfe von <picture> (siehe Bilder) responsiv eingebunden werden.
Auf dieser Seite befindet sich die Komponente in einem Container innerhalb des Grids des Seitenlayouts. Dies verhindert die Darstellung des Bildes auf voller Device-Breite für Breakpoints von Medium abwärts. Die originäre Darstellung der Komponente wurde auf der Beispielseite „Aktuelle Meldungen“ umgesetzt.
News-Artikel Default
Neue Vorgaben für Typoblindtext ab 2034
Beispielthema
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser - The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden.
<articleclass="ds-article container-lg"> <divclass="article__container py-lg-10"> <divclass="article__image-container"> <imgclass="article__image"src="/assets/images/showcase/zielsetzung.svg"alt=""> </div> <divclass="pt-8 pb-11 p-lg-0 px-sm-9 container article__content "> <divclass="mb-6 d-flex flex-column gap-3"> <h4class="pt-0 mb-0">Neue Vorgaben für Typoblindtext ab 2034</h4> <pclass="form-text mb-0"> <timedatetime="2023-03-24 16:41:45+01:00">24.03.2023 </time> <spanclass="ds-icon-dot interpunct"aria-hidden="true"></span> Beispielthema </p> </div> <pclass="mb-0">Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser - The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden.</p> </div> </div> </article>
News-Artikel mit Links
Wissenswertes über Typoblindtext
Typoblindtext
Auch das ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser - The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden.
<articleclass="ds-article container-lg"> <divclass="article__container py-lg-10"> <divclass="article__image-container"> <imgclass="article__image"src="/assets/images/showcase/zielsetzung.svg"alt=""> </div> <divclass="pt-8 pb-11 p-lg-0 px-sm-9 container article__content "> <divclass="mb-6 d-flex flex-column gap-3"> <h4class="pt-0 mb-0">Wissenswertes über Typoblindtext</h4> <pclass="form-text mb-0"> <timedatetime="2025-01-16 08:22:07+01:00">16.01.2025 </time> <spanclass="ds-icon-dot interpunct"aria-hidden="true"></span> Typoblindtext </p> </div> <pclass="mb-0">Auch das ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser - The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden.</p> <divclass="content__link-container mt-6"> <ahref="/assets/files/testdatei.pdf"class="anchor"> <spanclass="ds-icon-download"aria-hidden="true"></span> <spanclass="anchor__text">PDF herunterladen</span></a> <ahref="http://bmf.bund.de/"class="anchor"hreflang="de"rel="external noopener noreferrer"target="_blank"> <spanclass="ds-icon-anchor"aria-hidden="true"></span> <spanclass="anchor__text">Mehr Informationen</span></a> </div> </div> </div> </article>
Barrierefreiheit
Relevante BITV-Anforderungen
Als Muster besitzen Blog-Artikel keine eigenen Anforderungen an die Barrierefreiheit, die über die Anforderungen der enthaltenen Elemente wie Überschriften, Textelemente, Links, Bilder, das responsive Design und den Kontrastmodus hinausgehen.
