Layout v1.0.0

Card

Um componente de contêiner flexível para agrupar conteúdo relacionado. Suporta múltiplas variantes incluindo estilos plano, com hover e elevado, com cabeçalhos e rodapés opcionais.

Pré-visualização e Código

_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

Opções

Nome	Tipo	Padrão	Descrição
`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

Nome	Tipo	Padrão	Descrição
`variant`	Symbol	`:flat`	Visual style: :flat, :hover, or :elevated
`padding`	Symbol	`:md`	Padding size: :none, :sm, :md, or :lg

Slots

Nome	Descrição
`header`	Optional header content rendered at the top with a border
`footer`	Optional footer content rendered at the bottom with a background

Changelog v1.0.0

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

Obter Acesso Completo

Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.

Obter Acesso Agora