Versale Seiten­über­schrift (H1)

Subheadline als Artikel­überschrift (H2) csc-capital-h2

Das ist eine Seitenüberschrift (H1)

Fließtext im Artikel-Grid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nisi ac mi commodo consectetur. Nunc pellentesque, dolor nec semper mollis, diam est iaculis purus, non accumsan sem lectus dapibus diam. Vestibulum cursus convallis libero id aliquam. Donec neque eros, vehicula vitae consequat sed, eleifend eget arcu. Nullam vel dapibus turpis, quis venenatis nisi.

Das ist eine Artikelüberschrift (H2)

In eu hendrerit sapien. Ut viverra velit sed sagittis ullamcorper. Vivamus eu luctus nisi. Phasellus nec sollicitudin velit.

Und das ist eine Zwischenüberschrift (H3)

In eu hendrerit sapien. Ut viverra velit sed sagittis ullamcorper. Vivamus eu luctus nisi. Phasellus nec sollicitudin velit.

Dies hier ist eine Zwischenüberschrift (H4)

In eu hendrerit sapien. Ut viverra velit sed sagittis ullamcorper. Vivamus eu luctus nisi. Phasellus nec sollicitudin velit.

Alle Headlines können auch als Capital-Headlines (über den Blockstil) eingesetzt werden:

Artikelüberschrift (H2) csc-capital-h2

Artikelüberschrift (H3) csc-capital-H3

Artikelüberschrift (H4) csc-captial-H4

Übersicht der Link-Styles

Sed ante tellus, iaculis quis elit non, vestibulum faucibus neque. Donec ac libero ac tellus scelerisque finibus sit amet ac augue. Cras sed est id turpis sagittis faucibus. Link intern Vestibulum id finibus neque, in condimentum ante. Phasellus vel interdum massa, tincidunt facilisis odio. Link extern Etiam finibus imperdiet auctor. Link E-Mail Sed pharetra ante id sapien dapibus faucibus. Link Download Duis volutpat arcu in finibus vehicula. Cras porta nulla pulvinar, feugiat urna dignissim, faucibus eros. Pellentesque nunc diam, tincidunt ut turpis nec, tincidunt posuere sem.

Tel: +49 431-90 60 70

Fax: +49 431-90 60 7-77

Links als Buttons

Links können auch als Buttons dargestellt werden:

Link intern

Link extern

Link download

Link E-Mail

Aufzählung csc-list-bullets

  • In id diam a sapien lobortis elementum eget eu mi.
  • Proin suscipit enim sit amet tellus mattis, nec vehicula est rutrum. Aliquam erat volutpat.
  • Pellentesque id enim ultrices turpis tincidunt vehicula sit amet nec dui. In rutrum porttitor mauris et rutrum. Phasellus ultrices vitae eros ac euismod.
  • Donec euismod nibh a odio molestie faucibus.

Aufzählung csc-list-check

  • In id diam a sapien lobortis elementum eget eu mi.
  • Proin suscipit enim sit amet tellus mattis, nec vehicula est rutrum. Aliquam erat volutpat.
  • Pellentesque id enim ultrices turpis tincidunt vehicula sit amet nec dui. In rutrum porttitor mauris et rutrum. Phasellus ultrices vitae eros ac euismod.
  • Donec euismod nibh a odio molestie faucibus.

Aufzählung sortiert

  1. In id diam a sapien lobortis elementum eget eu mi.
  2. Proin suscipit enim sit amet tellus mattis, nec vehicula est rutrum. Aliquam erat volutpat.
  3. Pellentesque id enim ultrices turpis tincidunt vehicula sit amet nec dui. In rutrum porttitor mauris et rutrum. Phasellus ultrices vitae eros ac euismod.
  4. Donec euismod nibh a odio molestie faucibus.
  5. on id diam a sapien lobortis elementum eget eu mi.
  6. Proin suscipit enim sit amet tellus mattis, nec vehicula est rutrum. Aliquam erat volutpat.
  7. Pellentesque id enim ultrices turpis tincidunt vehicula sit amet nec dui. In rutrum porttitor mauris et rutrum. Phasellus ultrices vitae eros ac euismod.
  8. Donec euismod nibh a odio molestie faucibus.
  9. In id diam a sapien lobortis elementum eget eu mi.
  10. Proin suscipit enim sit amet tellus mattis, nec vehicula est rutrum. Aliquam erat volutpat.
  11. Pellentesque id enim ultrices turpis tincidunt vehicula sit amet nec dui. In rutrum porttitor mauris et rutrum. Phasellus ultrices vitae eros ac euismod.
  12. Donec euismod nibh a odio molestie faucibus.

Tabelle

Beispieltabelle
Spalte 1Spalte 2Spalte 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aliquam eu lacus venenatis, interdum elit non1,00 EUR
Morbi elementum tempus erat eu faucibus.Mauris vitae tristique metus.2,20 EUR
Cras rhoncus commodo orci, tincidunt sodales neque tempus a. Donec vehicula justo id purus dapibus ultricies.3,50 EUR

Übrigens kann man Text auch klein schreiben, z.B. für Fußnoten. Das geht über den Blockstil csc-small.

Dark Theme

Sämtliche Styling-Elemente eines Raster-Elements können auch im "dark theme"  dargestellt werden:

Fließtext im Artikel-Grid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nisi ac mi commodo consectetur. Nunc pellentesque, dolor nec semper mollis, diam est iaculis purus, non accumsan sem lectus dapibus diam. Vestibulum cursus convallis libero id aliquam. Donec neque eros, vehicula vitae consequat sed, eleifend eget arcu. Nullam vel dapibus turpis, quis venenatis nisi.

Das ist eine Seitenüberschrift (H1)

Das ist eine Artikelüberschrift (H2)

In eu hendrerit sapien. Ut viverra velit sed sagittis ullamcorper. Vivamus eu luctus nisi. Phasellus nec sollicitudin velit.

Und das ist eine Zwischenüberschrift (H3)

In eu hendrerit sapien. Ut viverra velit sed sagittis ullamcorper. Vivamus eu luctus nisi. Phasellus nec sollicitudin velit.

Dies hier ist eine Zwischenüberschrift (H4)

In eu hendrerit sapien. Ut viverra velit sed sagittis ullamcorper. Vivamus eu luctus nisi. Phasellus nec sollicitudin velit.

Alle Headlines können auch als Capital-Headlines (über den Blockstil) eingesetzt werden:

Artikelüberschrift (H2) csc-capital-h2

Artikelüberschrift (H3) csc-capital-H3

Artikelüberschrift (H4) csc-captial-H4

Übersicht der Link-Styles

Sed ante tellus, iaculis quis elit non, vestibulum faucibus neque. Donec ac libero ac tellus scelerisque finibus sit amet ac augue. Cras sed est id turpis sagittis faucibus. Link intern Vestibulum id finibus neque, in condimentum ante. Phasellus vel interdum massa, tincidunt facilisis odio. Link extern Etiam finibus imperdiet auctor. Link E-Mail Sed pharetra ante id sapien dapibus faucibus. Link Download Duis volutpat arcu in finibus vehicula. Cras porta nulla pulvinar, feugiat urna dignissim, faucibus eros. Pellentesque nunc diam, tincidunt ut turpis nec, tincidunt posuere sem.

Tel: +49 431-90 60 70

Fax: +49 431-90 60 7-77

Links als Buttons

Links können auch als Buttons dargestellt werden:

Link intern

Link extern

Link download

Link E-Mail

Aufzählung csc-list-bullets

  • In id diam a sapien lobortis elementum eget eu mi.
  • Proin suscipit enim sit amet tellus mattis, nec vehicula est rutrum. Aliquam erat volutpat.
  • Pellentesque id enim ultrices turpis tincidunt vehicula sit amet nec dui. In rutrum porttitor mauris et rutrum. Phasellus ultrices vitae eros ac euismod.
  • Donec euismod nibh a odio molestie faucibus.

Aufzählung csc-list-check

  • In id diam a sapien lobortis elementum eget eu mi.
  • Proin suscipit enim sit amet tellus mattis, nec vehicula est rutrum. Aliquam erat volutpat.
  • Pellentesque id enim ultrices turpis tincidunt vehicula sit amet nec dui. In rutrum porttitor mauris et rutrum. Phasellus ultrices vitae eros ac euismod.
  • Donec euismod nibh a odio molestie faucibus.

Aufzählung sortiert

  1. In id diam a sapien lobortis elementum eget eu mi.
  2. Proin suscipit enim sit amet tellus mattis, nec vehicula est rutrum. Aliquam erat volutpat.
  3. Pellentesque id enim ultrices turpis tincidunt vehicula sit amet nec dui. In rutrum porttitor mauris et rutrum. Phasellus ultrices vitae eros ac euismod.
  4. Donec euismod nibh a odio molestie faucibus.
  5. on id diam a sapien lobortis elementum eget eu mi.
  6. Proin suscipit enim sit amet tellus mattis, nec vehicula est rutrum. Aliquam erat volutpat.
  7. Pellentesque id enim ultrices turpis tincidunt vehicula sit amet nec dui. In rutrum porttitor mauris et rutrum. Phasellus ultrices vitae eros ac euismod.
  8. Donec euismod nibh a odio molestie faucibus.
  9. In id diam a sapien lobortis elementum eget eu mi.
  10. Proin suscipit enim sit amet tellus mattis, nec vehicula est rutrum. Aliquam erat volutpat.
  11. Pellentesque id enim ultrices turpis tincidunt vehicula sit amet nec dui. In rutrum porttitor mauris et rutrum. Phasellus ultrices vitae eros ac euismod.
  12. Donec euismod nibh a odio molestie faucibus.

Tabelle

Beispieltabelle
Spalte 1Spalte 2Spalte 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aliquam eu lacus venenatis, interdum elit non1,00 EUR
Morbi elementum tempus erat eu faucibus.Mauris vitae tristique metus.2,20 EUR
Cras rhoncus commodo orci, tincidunt sodales neque tempus a. Donec vehicula justo id purus dapibus ultricies.3,50 EUR

Auch im Dark Theme ist der Fußnotentext gestylt.

Hintergrundfarbe hellblau

Die Hintergrundfarbe eines Rasterelements kann hellblau sein, das Theme muss dann weiterhin das Dark Theme sein. Der Einsatz von hellblau soll - zumindest in der Saison 2016 möglichst NICHT vorkommen!

Hintergrundfarbe hellgrau

Auch die Hintergrundfarbe hellgrau ist möglich. Dann muss allerdings das Light Theme ausgewählt werden.

Generell ist auch darauf zu achten, bei Raster-Elementen Abstand vor und nach dem Element entsprechend den Bedürfnissen einzustellen.

Wichtig:

Immer in der Vorschau prüfen, wie sich die Einstellungen auf die Seite auswirken! Und zwar in allen Browserbreiten!

Raster

In diesem Kapitel werden alle verfügbaren Rasterelemente vorgestellt.

Seiten­ele­mente

Hier werden die verschiedenen Elemente zur Gestaltung von Seiten erklärt.

Teaser

Teaser schaffen Verbindungen zwischen Inhalten. Welche Möglichkeiten es gibt, wird hier erläutert.