Layout v1.0.0

Card

A flexible container component for grouping related content. Supports multiple variants including flat, hoverable, and elevated styles with optional headers and footers.

Preview & 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

Options

Name	Type	Default	Description
`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	Type	Default	Description
`variant`	Symbol	`:flat`	Visual style: :flat, :hover, or :elevated
`padding`	Symbol	`:md`	Padding size: :none, :sm, :md, or :lg

Slots

Name	Description
`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

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now