Die Natur
mit anderen
Augen sehen

Produkte

Nase dicht? Druckkopfschmerz? Sinupret® extract schafft hier seit Jahren sicher Abhilfe.

mehr >

Produkte

Nase dicht? Druckkopfschmerz? Sinupret® extract schafft hier seit Jahren sicher Abhilfe.

mehr >

Produkte

Nase dicht? Druckkopfschmerz? Sinupret® extract schafft hier seit Jahren sicher Abhilfe.

mehr >

Raster
Hinweis: .container muss nicht immer vorhanden sein.
.col
.col-md-6
.col-md-6
.col-md-4
.col-md-4
.col-md-4
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-9
Typografie

Überschrift 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

Überschrift 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Überschrift 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

fett, kursiv, ein Anker im Text

Ja ja. Lad's einfach runter.

  • Erste Ebene
  • Erste Ebene
  • Erste Ebene
    • Zweite Ebene
    • Zweite Ebene
    • Zweite Ebene
    • Zweite Ebene
  • Erste Ebene
  • Erste Ebene
  1. Erste Ebene
  2. Erste Ebene
  3. Erste Ebene
    1. Zweite Ebene
    2. Zweite Ebene
    3. Zweite Ebene
    4. Zweite Ebene
  4. Erste Ebene
  5. Erste Ebene
Produkt-Bereiche
Gynäkologie .theme-gynaecology
Leber .theme-liver
Atemwege .theme-respiratory
Schlaf .theme-sleep
Harnwege .theme-urinary
Tabellen
table
thead
tr
td Produkt
td Packungsgröße
td PZN
tbody
tr
td Canephron® Uno Dragees
td 30 überzogene Tabletten
td 13655004
...
Produkt Packungsgröße PZN
Canephron® Uno Dragees 30 überzogene Tabletten 13655004
Canephron® Uno Dragees 60 überzogene Tabletten 13655010
Canephron® Uno Dragees 90 überzogene Tabletten 13655027
Canephron® N Dragees 30 überzogene Tabletten 13655004

Gynäkologie

Produkt Packungsgröße PZN
Canephron® Uno Dragees 30 überzogene Tabletten 13655004
Canephron® Uno Dragees 60 überzogene Tabletten 13655010
Canephron® Uno Dragees 90 überzogene Tabletten 13655027
Canephron® N Dragees 30 überzogene Tabletten 13655004

Leber

Produkt Packungsgröße PZN
Canephron® Uno Dragees 30 überzogene Tabletten 13655004
Canephron® Uno Dragees 60 überzogene Tabletten 13655010
Canephron® Uno Dragees 90 überzogene Tabletten 13655027
Canephron® N Dragees 30 überzogene Tabletten 13655004

Atemwege

Produkt Packungsgröße PZN
Canephron® Uno Dragees 30 überzogene Tabletten 13655004
Canephron® Uno Dragees 60 überzogene Tabletten 13655010
Canephron® Uno Dragees 90 überzogene Tabletten 13655027
Canephron® N Dragees 30 überzogene Tabletten 13655004

Schlaf

Produkt Packungsgröße PZN
Canephron® Uno Dragees 30 überzogene Tabletten 13655004
Canephron® Uno Dragees 60 überzogene Tabletten 13655010
Canephron® Uno Dragees 90 überzogene Tabletten 13655027
Canephron® N Dragees 30 überzogene Tabletten 13655004

Harnwege

Produkt Packungsgröße PZN
Canephron® Uno Dragees 30 überzogene Tabletten 13655004
Canephron® Uno Dragees 60 überzogene Tabletten 13655010
Canephron® Uno Dragees 90 überzogene Tabletten 13655027
Canephron® N Dragees 30 überzogene Tabletten 13655004
Teaser
Hinweis: In der Vorlage haben die Teaser auf der Startseite einen kleineren Schriftgrad als auf den Inhaltsseiten. Wie setzen wir das um?
.teaser
.image-wrap
a(href="URL")
img(src="URL" alt="TEXT")
.text-wrap
h2 Hallo Welt
p Hallo Welt
a(href="URL") mehr >

Wie putzt man seine Nase richtig?

Wie putzt man richtig seine Nase? Beide Löcher gleichzeitig zuhalten? Oder hält man eine Seite zu und befreit sie nacheinander von störendem Schleim? Oder sollte man gar die Nase hochziehen und gar nicht putzen?

mehr >

Demo: Teaser mit den verschiedenen Themen

.teaser.theme-THEMA
.image-wrap
a(href="URL")
img(src="URL" alt="TEXT")
.text-wrap
h2 Hallo Welt
p Hallo Welt
a(href="URL") mehr >

Canephron

Lorem ipsum dolor sit amet.

mehr >

Canephron

Lorem ipsum dolor sit amet.

mehr >

Canephron

Lorem ipsum dolor sit amet.äsfjgä sdjfgä äodfjg äaisjfg öoiadhr

mehr >

Canephron

Lorem ipsum dolor sit amet.

mehr >

Canephron

Lorem ipsum dolor sit amet.

mehr >
Linkbox unter Fließtext
Die Breite passt sich dem verfügbaren Platz an. Die Elemente sollten vermutlich in Spalten liegen - Beispiel unten. Hinweis: Hier sollte es die Möglichkeit geben weiche Umbrüche zu verwenden.
a.article-teaser(href="URL")
.image-wrap
img(src="URL" alt="TEXT")
.label Daten und Fakten

Demo: Links in Spalten

Eisprung-Rechner
form(id="ovulation-calculator" method="" action="")
.ovulation-calculator
.input.day
label(for="day-of-menstruation") Tag
select.dropsy(id="day-of-menstruation" name="day-of-menstruation")
option(value="1") 1
option(value="2") 2
...
.input.month
...
.input.year
...
.input.length
...
.action-wrap
a.btn-ovulation(href="#") Jetzt Eisprung berechnen! #[small Hier klicken]
Eisprung-Rechner: Tabelle
.ovulation-table
.table-head
.week-day
.label Montag
.label-abbr Mo
...
.table-body
//- Tage vom vergangenen Monat
.day.old
.label 31.
//- Tage vom kommenden Monat
.day.new
.label 1.
//- Tage Menstruation
.day.menstruation
.label 17.
.image-wrap
img(src="typo3conf/ext/site/Resources/Public/img/icon-menstruation.svg" alt="Symbol Menstruation")
//- Tage Fruchtbar
.day.fertile
.label 20.
.image-wrap
img(src="typo3conf/ext/site/Resources/Public/img/icon-fertile.svg" alt="Symbol Fruchtbar")
//- Tage Sehr fruchtbar
.day.very-fertile
.label 21.
.image-wrap
img(src="typo3conf/ext/site/Resources/Public/img/icon-very-fertile.svg" alt="Symbol Sehr fruchtbar")
//- Tage Eisprung
.day.ovulation
.label 22.
.image-wrap
img(src="typo3conf/ext/site/Resources/Public/img/icon-ovulation.svg" alt="Symbol Eisprung")
Montag
Mo
Dienstag
Di
Mittwoch
Mi
Donnerstag
Do
Freitag
Fr
Samstag
Sa
Sonntag
So
31.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Symbol Menstruation
13.
Symbol Menstruation
14.
Symbol Menstruation
15.
Symbol Menstruation
16.
Symbol Menstruation
17.
Symbol Menstruation
18.
19.
20.
21.
22.
Symbol Fruchtbar
23.
Symbol Sehr fruchtbar
24.
Symbol Eisprung
25.
Symbol Sehr fruchtbar
26.
Symbol Fruchtbar
27.
28.
29.
30.
31.
1.
2.
3.
1. Tag der letzten Periode

19.06.2018

Möglicher Geburtstermin

01.07. - 05.07.2019

Menstruation
Fruchtbar
Sehr fruchtbar
Eisprung
Schaltflächen
Anker
Herunterladebare Dateien
Die Farbthemen werden über die entsprechende Klassen im Div.page gesteuert.
.downloads
a.download-item(href="URL")
.item-name Gebrauchsinformationen
.item-description Canephron® N, Canephron® Tropfen, Canephron® Uno (in Deutsch)
.item-info PDF 190 KB #[span.item-arrow >]
a.download-item(href="URL")
.item-name Fachinformation
.item-description Canephron® N, Canephron® Tropfen, Canephron® Uno (in Deutsch)
.item-info PDF 15490 KB #[span.item-arrow >]
...

Standard

Formular-Elemente
Verwandte Beiträge
.related-articles
.title Verwandte Beiträge
.link-list
a(href="URL") Sinupret® eXtract
a(href="URL") Krankheitsbilder bei Nasennebenhöhlenentzündung
...
Heilpflanzen
a.herb(href="URL")
.image-wrap
img(src="URL" alt="TEXT")
.herb-name Ackerschachtelhalm
Schieber
Produkt-Teaser
Produktkategorie
Harnwege
Darreichungsformen
Tabletten, Tropfen
Inhaltsstoffe
Rosmarin, Tausendgüldenkraut, Liebstöckel
Zur Produktseite Canephron®
Akkordeons
.accordion
.accordion-item
button.accordion-item-header(data-target="ID1")
.label Lorem ipsum
.icon.icon-chevron-sharp-down
.accordion-item-body(id="ID1")
.accordion-item-content
p Lorem ipsum
...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Wie geht es dir?

Mir geht es gut.

Wie geht es dir?

Mir geht es gut.

Brotkrümel
.breadcrumbs
a(href="#") Seite
a(href="#") Seite
span Aktuelle Seite
Downloads

Kleines Bild mit kurzer Beschreibung

Prof. Dr. Michael A. Popp am Eingang des Unternehmens

Kleines Bild mit langer Beschreibung

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Normales Bild mit Beschreibung

Prof. Dr. Michael A. Popp am Eingang des Unternehmens

Normales Bild

Schwebende Textbox
DSGVO Hinweis
.video-wrap
.video-preview
img(src="#" alt="")
button.gdpr
.gdpr-text
.video
iframe(data-src="#" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen")
Titel
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.