Haustier CSS-Vorlagen

Saubere Haustier-CSS-Templates für Tierprofile und Service-Karten

Fotos auf der Website eines Tierheims haben selten das gleiche Format. Das Hochformat einer schlafenden Katze landet neben der Querformat-Aufnahme eines Hundes im Garten, und die Karten weisen am Ende unterschiedliche Höhen auf. Ein Haustier-CSS-Template ist ein vorgefertigtes Design, dessen Styling dies bereits berücksichtigt. In einer guten Vorlage sind die Bildseitenverhältnisse fixiert und die Buttons richten sich am unteren Rand jeder Reihe aus, sodass Sie sich ganz auf Farben und Texte konzentrieren können.

Karten basierend auf Fotos oder Preisen

Haustier-Designs in dieser Kategorie kombinieren üblicherweise einige Kartentypen mit jeweils eigenen Styling-Anforderungen:

1. Tierprofil-Karten, bei denen das Foto im Mittelpunkt steht und ein kleiner Badge die Farbe wechselt, sobald ein Tier reserviert ist.
2. Tierarzt-Service-Karten, die textbasiert sind und einheitliche Höhen beibehalten, damit Behandlungen leicht zu vergleichen sind.
3. Pflegepaket-Karten, bei denen der Preis die größte Textzeile bildet und die enthaltenen Leistungen darunter kleiner aufgeführt sind.

Eine einheitliche Schriftgrößenskala und eine gemeinsame Button-Klasse sorgen dafür, dass eine Fotokarte für einen geretteten Welpen und eine Preiskarte für das Krallenschneiden optisch zusammenpassen. Ein Hund, der nächste Woche hinzugefügt wird, fügt sich ohne zusätzlichen Aufwand in denselben Kartenstil ein. Die Dokumentation zum Raster-Element von Nicepage erklärt, wie Spalten, Zeilen und Abstandseigenschaften Inhalte innerhalb eines Blocks organisieren und lange Reihen von Adoptionskarten gleichmäßig anordnen.

Scrollen durch Tierheim-Listen auf Mobilgeräten

Die responsiven Modi von Nicepage zeigen eine Vorschau des Designs an jedem Haltepunkt, und bei einer Tierheim-Übersicht verdienen drei Details besondere Aufmerksamkeit:

1. Lange Namen und Rasseangaben, die sauber umbrechen sollten, ohne den Adoptions-Button aus der Reihe zu schieben.
2. Fotos im Hochformat, bei denen das Gesicht des Tieres im Bild bleiben muss, wenn sich die Karte verschmälert.
3. Status-Badges wie „Reserviert“ oder „Adoptiert“, die auf einen Blick lesbar bleiben sollten.

Auf einem Smartphone auf weniger Spalten zu reduzieren, ist normal. Auch die Abstände sollten kleiner werden, damit die Auflistung weiterhin als ordentliches Raster lesbar bleibt, während Nutzer an Dutzenden von Hunden vorbeiscrollen.

Wo Akzentfarben ihren Platz finden

Farbe entfaltet ihre größte Wirkung auf Buttons. Eine dezente Farbpalette auf den Karten lässt Raum für einen markanten Akzent auf dem Button „Adoptieren“ oder „Termin vereinbaren“. In Nicepage können Sie dieses Farbschema einmal für das gesamte Projekt festlegen. Für eine einzelne Ausnahme, etwa einen Feiertags-Badge bei einem bestimmten Pflegeangebot, wendet benutzerdefiniertes CSS eine Regel gezielt nur auf dieses Element an.

Stellen Sie sich beim Durchstöbern der Kategorie Ihre eigenen Inhalte in den Demo-Karten vor. Wenn Ihre zur Adoption stehenden Tiere, kostenpflichtigen Dienstleistungen oder Pflegefotos hineinpassen, ohne das Layout umbauen zu müssen, beschränkt sich der Rest auf kleine Anpassungen.