Style Guide

This page shows different components and styles you can use in your content. You can copy the code snippet for a component and paste it into the markdown editor to use it.

Basic Product Card

Use this component to feature a product. It includes an image, title, rating, description, and a call-to-action button. Replace the image, text, and link as needed.

Forever pillow van Lilia Sleep

4,8 ★ ★ ★

Zeg vaarwel tegen onrustige nachten en vervelende nekklachten. Ervaar zelf het verschil met het innovatieve ontwerp van het Forever Pillow van Lilia Sleep.

Bekijk de aanbieding

To use it, copy and paste this code into the markdown editor:

<div class="product-card">
  <div class="product-card__image">
    <img src="../images/your-image-name.jpg" alt="Description of your image">
  </div>
  <div class="product-card__content">
    <h2 class="product-card__title">Your Product Title</h2>
    <div class="product-card__rating">
      <span class="product-card__rating-value">4,8</span>
      <span class="product-card__stars">
        <span class="product-card__star is-full"></span>
        <span class="product-card__star is-full"></span>
        <span class="product-card__star is-full"></span>
        <span class="product-card__star is-full"></span>
        <span class="product-card__star is-full"></span>
      </span>
    </div>
    <p class="product-card__desc">
      Your product description here.
    </p>
    <a href="" class="product-card__cta">Jetzt zum Angebot</a>
  </div>
</div>

Extended Product Card with Badge and Lists

Use this extended version for detailed product reviews. It includes a badge, website link, and pros/cons lists.

Testsieger

Forever pillow van Lilia Sleep

mysheepi.com

4,8 ★ ★ ★

Zeg vaarwel tegen onrustige nachten en vervelende nekklachten. Ervaar zelf het verschil met het innovatieve ontwerp van het Forever Pillow van Lilia Sleep.

Was besonders gut ist:

höhenverstellbar & individuell befüllbar
Ergonomisches Design
Hochwertige Materialien

Könnte verbessert werden:

Für alle Schlafpositionen geeignet, aber besonders für Seitenschläfer
Preis könnte günstiger sein
Eingewöhnungszeit erforderlich

Bekijk de aanbieding

To use it, copy and paste this code into the markdown editor:

With `.product-card__bottom` section

Testsieger

Forever pillow van Lilia Sleep

mysheepi.com

4,8 ★ ★ ★

Zeg vaarwel tegen onrustige nachten en vervelende nekklachten. Ervaar zelf het verschil met het innovatieve ontwerp van het Forever Pillow van Lilia Sleep.

Was besonders gut ist:

höhenverstellbar & individuell befüllbar
Ergonomisches Design
Hochwertige Materialien

Könnte verbessert werden:

Für alle Schlafpositionen geeignet, aber besonders für Seitenschläfer
Preis könnte günstiger sein
Eingewöhnungszeit erforderlich

Bekijk de aanbieding

Nach monatelangen Tests verschiedenster ergonomischer Kissen steht für uns fest: Das mySheepi HOME-Kissen ist unser glasklarer Favorit.

Item 1
Item 2
Item 3

Paragraph text

h3 title

To use it, copy and paste this code into the markdown editor:

<div class="product-card is-extended">
  <div class="product-card__image">
    <img src="../images/your-image-name.jpg" alt="Description of your image">
  </div>
  <div class="product-card__badge">
    <span class="product-card__badge-value">Testsieger</span>
  </div>
  <div class="product-card__content">
    <h2 class="product-card__title">Your Product Title</h2>
    <a href="https://www.example.com" class="product-card__link">website.com</a>
    <div class="product-card__rating">
      <span class="product-card__rating-value">4,8</span>
      <span class="product-card__stars">
        <span class="product-card__star is-full"></span>
        <span class="product-card__star is-full"></span>
        <span class="product-card__star is-full"></span>
        <span class="product-card__star is-full"></span>
        <span class="product-card__star is-full"></span>
      </span>
    </div>
    <p class="product-card__desc">
      Your product description here.
    </p>
    <div class="product-card__list">
        <h3>Was besonders gut ist:</h3>
        <ul class="feature-list is-positive">
            <li>Feature 1</li>
            <li>Feature 2</li>
            <li>Feature 3</li>
        </ul>
    </div>
    <div class="product-card__list">
        <h3>Könnte verbessert werden:</h3>
        <ul class="feature-list is-negative">
            <li>Improvement 1</li>
            <li>Improvement 2</li>
            <li>Improvement 3</li>
        </ul>
    </div>
    <a href="" class="product-card__cta">Jetzt zum Angebot</a>
  </div>
  <div class="product-card__bottom">
    <p>
      Nach monatelangen Tests verschiedenster ergonomischer Kissen steht für uns fest: Das mySheepi HOME-Kissen ist unser glasklarer <strong>Favorit</strong>.
    </p>
    <img src="../images/productpage.png" alt="alt text">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <p>
      Paragraph text
    </p>
    <h3>h3 title</h3>
    <div class="video-embed">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>
  </div>
</div>

Product Rating

Use this component to display product ratings with stars and specifications. Perfect for product reviews and detailed evaluations.

Schlafkomfort:

Verarbeitung:

Kundenservice:

Geeignete Schlafpositionen: Seitlich, auf dem Rücken, auf dem Bauch

Für unruhige Schläfer geeignet?: Ja

Individuell befüllbar: Ja

Nach monatelangen Tests verschiedenster ergonomischer Kissen steht für uns fest: Das Forever Pillow ist unser Favorit.

To use it, copy and paste this code into the markdown editor:

<div class="product-rating">
  <div class="product-rating__row">
    <span class="product-rating__label">Schlafkomfort:</span>
    <span class="product-card__stars">
      <span class="product-card__star is-full"></span>
      <span class="product-card__star is-full"></span>
      <span class="product-card__star is-full"></span>
      <span class="product-card__star is-full"></span>
    </span>
  </div>
  <div class="product-rating__row">
    <span class="product-rating__label">Verarbeitung:</span>
    <span class="product-card__stars">
      <span class="product-card__star is-full"></span>
      <span class="product-card__star is-full"></span>
      <span class="product-card__star is-full"></span>
      <span class="product-card__star is-full"></span>
    </span>
  </div>
  <div class="product-rating__row">
    <span class="product-rating__label">Kundenservice:</span>
    <span class="product-card__stars">
      <span class="product-card__star is-full"></span>
      <span class="product-card__star is-full"></span>
      <span class="product-card__star is-full"></span>
      <span class="product-card__star is-full"></span>
    </span>
  </div>
  <div class="product-rating__row">
    <span class="product-rating__label">Geeignete Schlafpositionen:</span>
    <span class="product-rating__value">Seitlich, auf dem Rücken, auf dem Bauch</span>
  </div>
  <div class="product-rating__row">
    <span class="product-rating__label">Für unruhige Schläfer geeignet?:</span>
    <span class="product-rating__value">Ja</span>
  </div>
  <div class="product-rating__row">
    <span class="product-rating__label">Individuell befüllbar:</span>
    <span class="product-rating__value">Ja</span>
  </div>
</div>

Your conclusion text here.

```

Overlay Caption Video

Use this component to display a video with a text overlay. Replace the video source and text as needed.

Stechende Schmerzen können den
Alltag beeinträchtigen

To use it, copy and paste this code into the markdown editor:

<div class="overlay-caption">
  <video autoplay loop muted playsinline width="324" height="324">
    <source src="/videos/mysheepi-loop-video-3.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
  <div class="overlay-caption__text">
    Stechende Schmerzen können den <br>
    Alltag beeinträchtigen
  </div>
</div>

Quote Component

Use this component to display a quote with an associated image. Perfect for testimonials or expert quotes.

"Das richtige Kissen kann einen erheblichen Unterschied für die Schlafqualität machen."

Dr. Michael Hartman
Schlafmediziner & Physiotherapeut

To use it, copy and paste this code into the markdown editor:

<div class="quote">
  <div class="quote__image">
    <img src="../images/your-expert-image.jpg" alt="Expert Name">
  </div>
  <div class="quote__content">
    <h2>"Your quote text here."</h2>
    <p><strong>Expert Name</strong><br>
    Expert Title & Credentials</p>
  </div>
</div>

Image with Description

Use this component to display an image with a descriptive caption. This is useful for providing context or additional information about an image.

To use it, copy and paste this code into the markdown editor:

<figure class="image-description">
  <img src="../images/your-image.png" alt="Describe your image">
  <figcaption>Your image description here.</figcaption>
</figure>

Image and Text

Use this component to display an image alongside descriptive text. This is useful for visual explanations, test demonstrations, or highlighting features with supporting visuals.

* Was ist der Kettlebell-Test?

Eine Kettlebell ist ein großes gusseisernes und kugelförmiges Gewicht mit einem einzigen Griff. Für unsere Vergleiche verwenden wir eine 5 kg-Kettlebell. Da der menschliche Kopf etwa 5 kg wiegt, können wir mit diesem Test simulieren, wie stark der Kopf eines Menschen in ein Kissen einsinkt und ob es guten oder schlechten Halt bietet.

To use it, copy and paste this code into the markdown editor:

<div class="image-and-text">
  <h3 class="image-and-text__title">* Was ist der Kettlebell-Test?</h3>
  <div class="image-and-text__content">
    <img src="../images/mySheepi-Drucktest.jpeg" alt="Describe your image">
    <div class="image-and-text__text">
      Eine Kettlebell ist ein großes gusseisernes und kugelförmiges Gewicht mit einem einzigen Griff. Für unsere Vergleiche verwenden wir eine 5 kg-Kettlebell. Da der menschliche Kopf etwa 5 kg wiegt, können wir mit diesem Test simulieren, wie stark der Kopf eines Menschen in ein Kissen einsinkt und ob es guten oder schlechten Halt bietet.
    </div>
  </div>
</div>

Feature Lists

Use these lists to show positive and negative features with checkmarks or X marks.

Positive Features

höhenverstellbar & individuell befüllbar
Ergonomisches Design
Hochwertige Materialien
90 Tage Testphase

Areas for Improvement

Höherer Preis als Standardkissen
Eingewöhnungszeit erforderlich
Nur online verfügbar

To use them, copy and paste this code into the markdown editor:

<!-- Positive Features -->
<ul class="feature-list is-positive">
  <li>Feature 1</li>
  <li>Feature 2</li>
  <li>Feature 3</li>
</ul>

<!-- Negative Features -->
<ul class="feature-list is-negative">
  <li>Improvement 1</li>
  <li>Improvement 2</li>
  <li>Improvement 3</li>
</ul>

Icon Text Component

Use this component to display content with an avatar/icon and accompanying text. Perfect for author information or credentials.

Geschreven door Marike
Senior Editor | Slaapexpert

To use it, copy and paste this code into the markdown editor:

<div class="icon-text">
  <img src="../images/your-avatar.jpg" alt="Your Name" class="icon-text__avatar">
  <span class="icon-text__title">
    Your Title<br>Your Description
  </span>
</div>

Button Component

Use this component for call-to-action buttons with consistent styling.

Jetzt bestellen

To use it, copy and paste this code into the markdown editor:

<a href="" class="button">Your Button Text</a>

Responsive Images

Use these attributes to hide images on specific screen sizes.

Desktop only:

Mobile only:

To use them, add the title attribute:

<!-- Hide on mobile -->
<img src="../images/your-image.jpg" alt="Description" title="hide_mobile">

<!-- Hide on desktop -->
<img src="../images/your-image.jpg" alt="Description" title="hide_desktop">

Typography - Headings

Heading 1 - Main Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Small Heading

Use standard markdown syntax for headings:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

Text Formatting

This is regular text with bold text and italic text.

You can also use links within your content.

Use standard markdown syntax:

**bold text** or __bold text__
*italic text* or _italic text_
[link text](https://example.com)

Dynamic Content Variables

Use these variables in your markdown content for dynamic values:

- Link to the product page (defined in front matter)

Style Guide - Page title

- Publication date

These variables are automatically replaced with actual values when the page is built.

Available CSS Classes

.product-card - Basic product card container
.product-card.is-extended - Extended product card with additional features
.feature-list.is-positive - List with green checkmarks
.feature-list.is-negative - List with red X marks
.overlay-caption - Video with text overlay
.quote - Quote component with image
.icon-text - Icon/avatar with text
.button - Styled button

This style guide is automatically updated based on the available components in the system.

Style Guide

Components

Basic Product Card

Forever pillow van Lilia Sleep

Extended Product Card with Badge and Lists

Forever pillow van Lilia Sleep

Was besonders gut ist:

Könnte verbessert werden:

With .product-card__bottom section

Forever pillow van Lilia Sleep

Was besonders gut ist:

Könnte verbessert werden:

h3 title

Product Rating

Overlay Caption Video

Quote Component

"Das richtige Kissen kann einen erheblichen Unterschied für die Schlafqualität machen."

Image with Description

Image and Text

* Was ist der Kettlebell-Test?

Feature Lists

Positive Features

Areas for Improvement

Icon Text Component

Button Component

Responsive Images

Typography - Headings

Heading 1 - Main Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Small Heading

Text Formatting

Dynamic Content Variables

Available CSS Classes

With `.product-card__bottom` section