レイアウト v1.0.0

カード

関連するコンテンツをグループ化するための柔軟なコンテナコンポーネント。フラット、ホバー、エレベーテッドスタイルなど複数のバリアントに対応し、オプションでヘッダーとフッターを付けられます。

プレビュー & コード

_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

オプション

名前	型	デフォルト	説明
`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

名前	型	デフォルト	説明
`variant`	Symbol	`:flat`	Visual style: :flat, :hover, or :elevated
`padding`	Symbol	`:md`	Padding size: :none, :sm, :md, or :lg

スロット

名前	説明
`header`	Optional header content rendered at the top with a border
`footer`	Optional footer content rendered at the bottom with a background

変更履歴 v1.0.0

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

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得