Advertorial Template - Komponenten-Showcase

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.

<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.

<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.

<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.

<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.

<CheckList
  items={["Feature 1", "Feature 2", "Feature 3"]}
  icon="heroicons:check" // optional
/>

---

IconFeatureList

Feature-Liste mit Icons in runden Containern.

<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.

<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.

<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.

<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.

<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.

<RatingBar
  label="Wirksamkeit"
  score={92}
  maxScore={100} // optional
  showScore={true} // optional
/>

---

RatingCircle

Kreisförmige Gesamtbewertung.

<RatingCircle
  score={95}
  maxScore={100} // optional
  size="md" // sm, md, lg
  label="Gesamtwertung"
/>

---

ScoreBar

Bewertungsbalken mit Card-Style für Produktvergleiche.

<ScoreBar
  label="Qualität"
  score={9}
  maxScore={10}
  color="#6cd78f" // optional
/>

---

ScoreCardList

Container für mehrere ScoreBars.

<ScoreCardList
  items={[
    { label: "Qualität", score: 10 },
    { label: "Preis", score: 9 }
  ]}
  maxScore={10}
  color="#6cd78f"
/>

---

PlacementBadge

Platzierungs-Badge für Rankings.

<PlacementBadge place={1} />

---

CustomerReview

Kundenbewertung mit Sternen und Verified-Badge.

<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.

// 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).

<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.

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

---

ImageWithCaption

Bild mit optionaler Beschriftung.

<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).

<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.

<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.

<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.

<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.

<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