Styleguide

Grid

1
11
2
10
6
6
4
4
4
3
3
6
?
?

Farben

Eisblau $brandgreen: #60C0C4;
Hellblau $lightbrandgreen: #B8DAE1;
Dunkelgrau $darkgrey: #3f464a;
$lightgrey: lighten( $darkgrey, 70% );
Dunkelblau $darkblue: #11507b;
Mittelblau $blue: #007b9d;

Headlines

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Copy-Text

Text in einem Standard Absatz.

Links

Ein Standard Link im Copytext

Link Footer

Content nur mit Markup

Testcontent

Inhalte müssen so gestylt werden, dass sie auch ohne Verweise auf Klassen funktionieren.

Siehste mal

Inhalte müssen so gestylt werden, dass sie auch ohne Verweise auf Klassen funktionieren.

  • Listen
  • auch

Bildmarken Liste

  • Eine Listenzeile
  • Eine weitere Listenzeile

Text und Bild

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.

Text und Bild rechts

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.

Full Image

Image Subline

&-img {
width: 100%;
height: 25vw;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
&.top {
background-position-y: top;
}
@media #{$mediaquery-large} {
height: 22.2rem;
}
}
Die Bildgröße ist abhängig von Browsergröße. Es wird bei Skalierung in die Mitte des Bildes "gezoomt".
Typische snowden Bildgröße für eine gute Auflösung ist 2252px x 680 px
Maximale Größe in absoluten Zahlen ist Breite max. 998.4 px; Höhe max: 355,2 px

Teaser Image zweifach

Teaser Image dreifach

Teaser Blog dreifach

So oder so, es kommt der Text aus dem Content Management System Mehr erfahren

So oder so, es kommt der Text aus dem Content Management System Mehr erfahren

So oder so, es kommt der Text aus dem Content Management System Mehr erfahren

Teaser Download

Teaser Shop

Produktdetailansicht

Artikelnummer: 4711

Farben:

  • weiß

Größen: S, M, L

Formular

Formlegende
4177

Pipe Navigation

Footer

Social Leiste

Breadcrumb

Teaser 50-50

So funktioniert Ihr snowden sports Design

  • Wählen Sie Ihre Sportart in unserem 3D-Designer-Toolkit aus und klicken Sie dann auf den Start-Button.
  • Nun können Sie auf das Trikot- und Shorts-Symbol zugreifen und in der rechten Leiste Ihren jeweiligen Design-Favoriten auswählen.
  • Anschließend können Sie selektieren zwischen Kragenform und den Farben für Trikot und Shorts.
  • Dann können Sie Ihr/e eigenes/n Logo/s hinzufügen und hierbei die Logo-Größe bei Bedarf anpassen.
  • Unsere Darstellungsoptionen ermöglichen eine bewegliche 3D-Ansicht Ihres Designs vor weißem, dunklen oder Sportarena-Hintergrund.
  • Nun können Sie über den Button „Angebot anfordern“ eine Kostenübersicht für Ihr Projekt erhalten.

Während des gesamten Prozessen stehen wir für Sie als Ansprechpartner zur Verfügung, zögern Sie nicht, uns zu kontaktieren!