Beispiel

Komponentenübersicht

Die Beispiele unten zeigen bewusst nur einen kleinen, sofort anpassbaren Ausschnitt typischer Bausteine auf Basis von BeerCSS.

So lassen sich Buttons, Cards, Tabs, Bildmodule und Status-Elemente schnell in Kundenprojekte übernehmen.

Common Buttons

Chips & Icons

Aktuell sind im Sprite 31 Icons vorhanden. Die Liste unten wird direkt aus sprite.svg erzeugt und bleibt dadurch vollständig.

Cards

Card-Beispiel mit Bild
Card Title

Card Text mit Bild, kurzer Erklärung und einer klaren Aktion.

Colors

Hier sind die gängigen BeerCSS-Farbklassen vollständig gelistet, ergänzt um die Projekt-Erweiterung warning.

Primary

primary Primary
primary-border Primary
primary-text Primary
primary-container Primary

Secondary

secondary Secondary
secondary-border Secondary
secondary-text Secondary
secondary-container Secondary

Tertiary

tertiary Tertiary
tertiary-border Tertiary
tertiary-text Tertiary
tertiary-container Tertiary

Error

error Error
error-border Error
error-text Error
error-container Error

Warning

warning Warning
warning-border Warning
warning-text Warning
warning-container Warning

Other

inverse-primary Other
inverse-primary-border Other
inverse-primary-text Other

Neutral

surface-dim Neutral
surface-bright Neutral
surface-variant Neutral
inverse-surface Neutral
surface Neutral
background Neutral
surface-container-lowest Neutral
surface-container-low Neutral
surface-container Neutral
surface-container-high Neutral
surface-container-highest Neutral

Containers & Grids

Container A

s12 m6 l4 für mobile-first Layouts.

Container B

Gut für Features, USP oder Schritte.

Container C

Auf Desktop 3-spaltig, auf Tablet 2-spaltig.

Lists & Expansions

  • Listenpunkt

    Mit Icon, kurzem Text und Zusatzinfo.

    Live
  • Expansion / FAQ

    BeerCSS nutzt hier das native <details> und ist damit ideal für FAQ, Akkordeons oder Hilfetexte.

Tabs

Overview Details Tables
Tab Overview

Kurzüberblick für Intro, Status oder Kerninfos.

Images

Beispielbild für eine Inhaltsseite
Normales Bild-Modul für Header, Zwischenbühne oder Content-Block.

Dialogs

Für beliebige Overlay-Inhalte ist <dialog> in BeerCSS die allgemeinere Lösung als eine reine Bild-Lightbox.

Kurz gesagt: Dialogs für HTML, iframe, Video, Formulare und gemischte Inhalte – PhotoSwipe für klassische Bildgalerien mit Zoom.

Slider

Aktuelle Auswahl: aus.

Der Slider ist in config.json über FEATURES.SLIDER deaktiviert.

Lightbox

Aktuelle Auswahl: aus.

Die Lightbox ist in config.json über FEATURES.LIGHTBOX deaktiviert.

Tables

Baustein Einsatz Status
Common Buttons / Cards / Chips direkt in BeerCSS bereit
Dialogs für HTML, iframe, Video, Bild + Text bereit
Suche optional per FEATURES.SEARCH in der config.json deaktiviert
Slider optional per FEATURES.SLIDER in der config.json deaktiviert
Lightbox optional per FEATURES.LIGHTBOX in der config.json deaktiviert
Theme Startwert FEATURES.THEMES in der config.json deaktiviert
Dialog-Beispielbild
Allgemeiner Overlay-Container

Ein BeerCSS-Dialog kann Text, Bilder, HTML-Blöcke, Listen, Formulare, Video-Elemente oder eingebettete Inhalte aufnehmen.

  • Bild / Bild + Text
  • beliebiges HTML
  • Video / Embed / iframe