Layout v1.0.0

Karte

Eine flexible Container-Komponente zum Gruppieren zusammengehöriger Inhalte. Unterstützt mehrere Varianten wie flach, schwebend und erhöht mit optionalen Kopf- und Fußzeilen.

Vorschau & Code

_card.html.erb

███
  ████ █████████ █████████

  ██████
    ███ ██████ █████████████████ ██ ██
      ████ ███████ ████
    ██ ███ ██

    ███ ██████ ██████████████████ ████████ ███████ ████████ ███ ██ ██
      █████████ ████ ████ █████ ███████

Get Access to View Code

card_component.rb

█ ██████████████████████ ████

█████ █████████████ █ ███████████████████
  ████████ █ ███████ █████ ████████████████
  ████████ █ ███████ ██ ██ ██████████

  ███████████ ███████
  ███████████ ███████

  ███ ███████████████████ ██████ ████████ ████ ████████████████

Get Access to View Code

card_component.html.erb

████ ██████████ ████████████ ████
  ██ ██ ███████ ██
    ████ ███████████████ ████████████████ █████ █████ ████ ████ ████ ████████████ ███████████████████████
      ███ ██████ ██
    ██████
  ██ ███ ██

  ███ ███████ ██

  ██ ██ ███████ ██

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`variant`	Symbol	`:flat`	Visual style: :flat, :hover, or :elevated
`padding`	Symbol	`:md`	Padding size: :none, :sm, :md, or :lg
`class`	String	`""`	Additional CSS classes to apply

Name	Typ	Standard	Beschreibung
`variant`	Symbol	`:flat`	Visual style: :flat, :hover, or :elevated
`padding`	Symbol	`:md`	Padding size: :none, :sm, :md, or :lg

Slots

Name	Beschreibung
`header`	Optional header content rendered at the top with a border
`footer`	Optional footer content rendered at the bottom with a background

Änderungsprotokoll v1.0.0

- Initial release with flat, hover, and elevated variants
- Optional header and footer slots
- Customizable padding options

Vollzugang erhalten

Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.

Jetzt Zugang erhalten