Stargala

Advertorial Template - Komponenten-Showcase

Alle verfügbaren Article-Komponenten mit Beispielen für Advertorials und Artikel

Komponenten Showcase

Entwickler

5. Dezember 2025 · 30 Min. Lesezeit

Dies ist eine Übersicht aller verfügbaren Article-Komponenten mit Beispielen. Ideal als Referenz beim Erstellen neuer Advertorials.


AuthorBox

Autor-Info mit Avatar, Name, Rolle und Datum.

Juliane Höchst

Redakteurin | Gesundheitsjournalistin

02.12.2025, 13:05 Uhr

<AuthorBox
  name="Juliane Höchst"
  role="Redakteurin | Gesundheitsjournalistin"
  date={new Date("2025-12-02T13:05:00")}
  showTime={true}
/>

SummaryBox

Zusammenfassung mit Bullet-Points und optionalem CTA.

Zusammenfassung

  • Darmmikrobiom beeinflusst das biologische Alter
  • 53 Bakterienstämme unterstützen die Darmgesundheit
  • Klinische Studien belegen die Wirksamkeit
  • Natürliche Inhaltsstoffe ohne Nebenwirkungen
Zum Testsieger
<SummaryBox
  title="Zusammenfassung"
  items={["Punkt 1", "Punkt 2"]}
  ctaText="Zum Testsieger"
  ctaHref="#testsieger"
  // Optional: Custom Colors
  bgColor="#f0fdf4"
  borderColor="#22c55e"
  bulletColor="#22c55e"
/>

InfoBox

Info-Box mit Icon und verschiedenen Varianten.

Wussten Sie schon?

Das Darmmikrobiom enthält mehr als 100 Billionen Bakterien und beeinflusst maßgeblich unsere Gesundheit.

Studie

Eine aktuelle Studie der Harvard Medical School zeigt, dass probiotische Bakterien das Immunsystem stärken können.

Wichtiger Hinweis

Konsultieren Sie vor der Einnahme von Nahrungsergänzungsmitteln Ihren Arzt.

<InfoBox
  icon="lightbulb" // lightbulb, beaker, microscope, info, warning, check
  title="Wussten Sie schon?"
  variant="default" // default, highlight, study
  // Optional: Custom Colors
  bgColor="#fef3c7"
  iconColor="#f59e0b"
  iconBgColor="#fef9c3"
>
  <p>Inhalt hier...</p>
</InfoBox>

HighlightBox

Farbige Info-Boxen mit linkem Rand für verschiedene Kontexte.

Information

Dies ist eine Info-Box für allgemeine Hinweise.

Erfolg

Dies ist eine Erfolgs-Box für positive Nachrichten.

Warnung

Dies ist eine Warnungs-Box für wichtige Hinweise.

Achtung

Dies ist eine Danger-Box für kritische Warnungen.

Neutral

Dies ist eine neutrale Box für sachliche Informationen.

<HighlightBox
  variant="warning" // info, success, warning, danger, neutral
  title="Wichtiger Hinweis"
  icon="heroicons:exclamation-triangle" // optional
>
  Inhalt hier...
</HighlightBox>

VerticalBorderQuote

Zitat mit vertikalem Rand links.

Wichtig: Die Darmgesundheit ist der Schlüssel zu einem langen und gesunden Leben.

Achten Sie auf eine ausgewogene Ernährung und ausreichend Bewegung.

Custom-Farben für spezielle Hervorhebungen.

<VerticalBorderQuote
  variant="primary" // primary, gray, warning
  // oder Custom Colors:
  borderColor="#22c55e"
  bgColor="#f0fdf4"
  textColor="#166534"
>
  <p>Zitat-Text hier...</p>
</VerticalBorderQuote>

QuoteBox

Hervorgehobene Zitate von Experten oder Kunden.

"Dieses Produkt hat mein Leben verändert! Ich fühle mich so viel energiegeladener."

Dr. Maria Schmidt

Ernährungsexpertin

"Ein Durchbruch in der Darmgesundheitsforschung."

Prof. Dr. Hans Müller

Mikrobiologe

<QuoteBox
  quote="Das Zitat hier..."
  author="Dr. Maria Schmidt"
  role="Ernährungsexpertin"
  avatar="/images/experts/maria.jpg" // optional
  variant="featured" // simple, featured
/>

NumberedList

Nummerierte Liste mit runden Badges.

  1. 1
    Schritt 1 Nehmen Sie täglich eine Kapsel mit Wasser ein.
  2. 2
    Schritt 2 Achten Sie auf eine ausgewogene Ernährung mit viel Ballaststoffen.
  3. 3
    Schritt 3 Bewegen Sie sich regelmäßig, um die Darmaktivität anzuregen.
<NumberedList
  items={[
    { title: "Schritt 1", content: "Beschreibung..." },
    { title: "Schritt 2", content: "<strong>HTML</strong> erlaubt" }
  ]}
  startNumber={1} // optional
/>

CheckList

Liste mit grünen Häkchen für Produktfeatures.

Laborgeprüfte MGO-Werte ab 400+ aufwärts
Zertifizierter Herkunftsnachweis aus Neuseeland
Abfüllung in dunklem Glas statt Plastikbehältern
100% natürliche Inhaltsstoffe
<CheckList
  items={["Feature 1", "Feature 2", "Feature 3"]}
  icon="heroicons:check" // optional
/>

IconFeatureList

Feature-Liste mit Icons in runden Containern.

Vorteile eines gesunden Darmmikrobioms

  • Stärkeres Immunsystem
  • Bessere Verdauung
  • Mehr Energie im Alltag
  • Gesündere Haut
<IconFeatureList
  title="Vorteile"
  features={[
    { title: "Feature 1", icon: "M9 12l2 2 4-4..." }, // SVG path
    { title: "Feature 2", iconSrc: "/icons/custom.svg" } // oder Bild
  ]}
  columns={2} // 1 oder 2
  // Optional: Custom Colors
  bgColor="#fef3c7"
  iconColor="#f59e0b"
/>

ProsConsList

Vor- und Nachteile nebeneinander.

Vorteile

  • 53 verschiedene Bakterienstämme
  • Klinisch getestet und wirksam
  • Einfache Einnahme
  • Keine Nebenwirkungen bekannt

Nachteile

  • Nur online erhältlich
  • Höherer Preis als Konkurrenz
<ProsConsList
  pros={["Pro 1", "Pro 2"]}
  cons={["Con 1", "Con 2"]}
  prosTitle="Vorteile" // optional
  consTitle="Nachteile" // optional
  layout="horizontal" // horizontal, vertical
/>

ComparisonGrid

Vergleichstabelle Vorher/Nachher.

Ohne Probiotika
Mit Probiotika
Energie
Niedrig
Hoch
Verdauung
Problematisch
Optimal
Immunsystem
Geschwächt
Gestärkt
Hautbild
Unrein
Strahlend
<ComparisonGrid
  beforeTitle="Ohne Produkt"
  afterTitle="Mit Produkt"
  rows={[
    { label: "Energie", before: "Niedrig", after: "Hoch" },
    { label: "Schlaf", before: "Unruhig", after: "Erholsam" }
  ]}
/>

CostList

Preisliste mit optionalem Highlight.

Monatliche Kosten

  • 1 Monatspackung 49,90 €
  • 3 Monatspackungen 119,90 €
  • 6 Monatspackungen 199,90 €
<CostList
  title="Monatliche Kosten"
  items={[
    { label: "Basis", value: "29,90 €" },
    { label: "Premium", value: "49,90 €", highlight: true }
  ]}
  highlight={true}
  icon="heroicons:currency-euro" // optional
/>

TestWinnerBanner

Card-Style Banner für den Testsieger mit Produktbild und Fortschrittsbalken.

Kijimea K53 Advance Produkt
Testsieger

Kijimea K53 Advance

95/100
Jetzt online kaufen
<TestWinnerBanner
  title="Testsieger"
  productName="Kijimea K53 Advance"
  score={95}
  image={{
    src: "/images/product.jpg",
    alt: "Produktbild"
  }}
  ctaText="Jetzt kaufen"
  ctaHref="https://example.com"
/>

RatingBar

Horizontaler Bewertungsbalken mit Farbkodierung.

Wirksamkeit 92/100
Verträglichkeit 88/100
Preis-Leistung 75/100
Geschmack 45/100
<RatingBar
  label="Wirksamkeit"
  score={92}
  maxScore={100} // optional
  showScore={true} // optional
/>

RatingCircle

Kreisförmige Gesamtbewertung.

Klein
95 /100
Mittel
88 /100
Groß
72 /100
<RatingCircle
  score={95}
  maxScore={100} // optional
  size="md" // sm, md, lg
  label="Gesamtwertung"
/>

ScoreBar

Bewertungsbalken mit Card-Style für Produktvergleiche.

Spezifische Qualitätsmerkmale 9/10
Preis-/Leistungsverhältnis 8/10
<ScoreBar
  label="Qualität"
  score={9}
  maxScore={10}
  color="#6cd78f" // optional
/>

ScoreCardList

Container für mehrere ScoreBars.

Spezifische Qualitätsmerkmale 10/10
Preis-/Leistungsverhältnis 9/10
Bisherige Kundenerfahrung 9/10
Anwendung & Alltagstauglichkeit 10/10
<ScoreCardList
  items={[
    { label: "Qualität", score: 10 },
    { label: "Preis", score: 9 }
  ]}
  maxScore={10}
  color="#6cd78f"
/>

PlacementBadge

Platzierungs-Badge für Rankings.

Platz 1
Platz 2
Platz 3
<PlacementBadge place={1} />

CustomerReview

Kundenbewertung mit Sternen und Verified-Badge.

Maria K.

Seit ich dieses Produkt nehme, fühle ich mich so viel besser! Meine Verdauung hat sich komplett normalisiert.

Thomas M.

Sehr gutes Produkt. Nur der Preis könnte etwas niedriger sein.

<CustomerReview
  author="Maria K."
  rating={5}
  maxRating={5}
  content="Bewertungstext..."
  isVerified={true}
/>

CTAButton

Call-to-Action Buttons in verschiedenen Varianten.

<CTAButton
  href="https://example.com"
  variant="primary" // primary, secondary, success
  size="lg" // sm, md, lg
  fullWidth={false}
  icon="heroicons:shopping-cart" // optional
  iconPosition="right" // left, right
  newTab={true}
  // oder Custom Colors:
  bgColor="#FF5733"
  textColor="#FFFFFF"
  hoverBgColor="#CC4629"
>
  Button Text
</CTAButton>

UrgencyBanner

Dringlichkeits-Banner mit Countdown oder Lagerbestand.

Angebot endet in:
00 Tage
:
00 Std
:
00 Min
:
00 Sek
Nur noch 7 Stück verfügbar!
Limitiertes Angebot - nur heute 30% Rabatt!
// Countdown
<UrgencyBanner
  text="Angebot endet in:"
  variant="countdown"
  endDate={new Date("2024-12-31")}
/>

// Stock
<UrgencyBanner
  text="Nur noch"
  variant="stock"
  stockCount={7}
/>

// Custom
<UrgencyBanner
  text="Limitiertes Angebot!"
  variant="custom"
/>

AccordionFAQ

FAQ-Bereich mit aufklappbaren Fragen (Alpine.js).

Häufige Fragen

Die meisten Anwender berichten von ersten Verbesserungen innerhalb von 2-4 Wochen regelmäßiger Einnahme.
Das Produkt ist gut verträglich. In seltenen Fällen kann es anfangs zu leichten Verdauungsbeschwerden kommen, die sich nach kurzer Zeit legen.
Bitte konsultieren Sie Ihren Arzt, bevor Sie Nahrungsergänzungsmittel zusammen mit verschreibungspflichtigen Medikamenten einnehmen.
<AccordionFAQ
  title="Häufige Fragen"
  items={[
    { question: "Frage 1?", answer: "Antwort 1" },
    { question: "Frage 2?", answer: "<strong>HTML</strong> erlaubt" }
  ]}
/>

FazitBox

Fazit-Box am Ende eines Artikels.

Unser Fazit

Nach unserem umfassenden Test können wir Kijimea K53 Advance als klaren Testsieger empfehlen. Die Kombination aus 53 Bakterienstämmen, klinisch belegter Wirksamkeit und hervorragender Verträglichkeit macht es zur ersten Wahl für alle, die ihre Darmgesundheit verbessern möchten.

<FazitBox title="Unser Fazit" id="fazit">
  <p>Fazit-Text mit **Formatierung**...</p>
</FazitBox>

ImageWithCaption

Bild mit optionaler Beschriftung.

Forschungslabor
Modernste Forschung für Ihre Darmgesundheit
<ImageWithCaption
  src="/images/product.jpg"
  alt="Beschreibung"
  caption="Bildunterschrift"
  rounded={true}
  shadow={true}
  aspectRatio="16:9" // 16:9, 4:3, 1:1, auto
/>

HorizontalDivider

Einfache horizontale Trennlinie.

Text oberhalb

Text dazwischen

Text unterhalb

<HorizontalDivider
  spacing="md" // sm, md, lg
  variant="light" // light, dark
/>

CollapsibleSources

Aufklappbarer Quellenbereich (Alpine.js).

  1. Sender, R., et al. (2016). “Revised Estimates for the Number of Human and Bacteria Cells in the Body.” PLoS Biology.
  2. Turnbaugh, P.J., et al. (2007). “The Human Microbiome Project.” Nature.
  3. Clemente, J.C., et al. (2012). “The Impact of the Gut Microbiota on Human Health.” Cell.
<CollapsibleSources title="Wissenschaftliche Quellen">
  1. Quelle 1...
  2. Quelle 2...
</CollapsibleSources>

Disclaimers

Verschiedene rechtliche Hinweise.

DisclaimerAffiliate

DisclaimerMedical

DisclaimerResults

DisclaimerFictional

DisclaimerLegal

DisclaimerNonMedical

Umfassender Non-Medical Disclaimer für Advertorials mit wissenschaftlichen Quellen.

<DisclaimerAffiliate />
<DisclaimerMedical />
<DisclaimerResults />
<DisclaimerFictional />
<DisclaimerLegal companyName="Firmenname GmbH" />
<DisclaimerNonMedical />

ProductTestCard

Komplette Produkt-Test-Karte mit allen Bewertungen.

Beispielprodukt Premium

Testsieger
Beispielprodukt
Gesamtwertung
95/100
Qualität
96/100
Preis-Leistung
80/100
Verträglichkeit
100/100

Vorteile

  • Hochwertige Inhaltsstoffe
  • Klinisch getestet
  • Einfache Einnahme

Nachteile

  • Nur online erhältlich
  • Höherer Preis
Beispielprodukt

Unser klarer Testsieger mit hervorragenden Ergebnissen in allen Kategorien.

Jetzt kaufen
<ProductTestCard
  rank={1}
  name="Produktname"
  image={{ src: "/img.jpg", alt: "..." }}
  overallScore={95}
  ratings={[
    { label: "Qualität", score: 96 },
    { label: "Preis", score: 80 }
  ]}
  pros={["Pro 1", "Pro 2"]}
  cons={["Con 1"]}
  fazit="Fazit-Text..."
  reviews={[
    { author: "Name", rating: 5, content: "...", isVerified: true }
  ]}
  ctaText="Kaufen"
  ctaHref="https://..."
  isWinner={true}
/>

InfoBanner

Info-Box mit Rahmen für Hinweise oder Deals.

Nur für kurze Zeit: Leser-Deal

Aktuell erhältst du 15% Rabatt auf deine erste Bestellung mit dem Code LESER15.

Wichtiger Hinweis

Dieses Angebot gilt nur für Neukunden und ist zeitlich begrenzt.

Info

Alle Produkte werden innerhalb von 2-3 Werktagen versandt.

<InfoBanner
  title="Leser-Deal"
  variant="deal" // info, warning, deal
  icon="heroicons:gift" // optional
>
  Inhalt hier...
</InfoBanner>

ProductShowcase

Zwei-Spalten Produkt-CTA Box für prominente Produktpräsentation.

Premium Produkt

Premium Produkt

  • Laborgeprüft
  • 100% natürlich
  • Made in Germany

Nur solange der Vorrat reicht

<ProductShowcase
  image="/images/product.png"
  imageAlt="Produktname"
  title="Produktname"
  features={["Feature 1", "Feature 2", "Feature 3"]}
  ctaText="Jetzt bestellen"
  ctaUrl="https://..."
  note="Hinweis"
/>

ProductRankingCard

Vollständige Produktkarte für Rankings mit Scores, Pros/Cons und CTA.

Premium Produkt Plus
Platz 1

Platz 1: Premium Produkt Plus

Qualität 10/10
Preis-Leistung 9/10
Verträglichkeit 10/10

Unser Testsieger überzeugt auf ganzer Linie mit hochwertigen Inhaltsstoffen und nachgewiesener Wirksamkeit.

Preis 49,90€

Was uns gefällt:

  • Hochwertige Inhaltsstoffe
  • Laborgeprüft
  • Schneller Versand

Das könnte besser sein:

Nur online erhältlich

<ProductRankingCard
  place={1}
  title="Produktname"
  image="/images/product.png"
  imageAlt="Produktbild"
  scores={[
    { label: "Qualität", score: 10 },
    { label: "Preis", score: 9 }
  ]}
  description="Beschreibung..."
  price="49,90€"
  pricePerKg="99,80€/kg" // optional
  pros={["Pro 1", "Pro 2"]}
  cons="Nachteil"
  summary="Zusammenfassung" // optional
  ctaText="Zum Angebot"
  ctaUrl="https://..."
  isWinner={true}
/>

Native-Ads Article Components v1.2.1