pricing-basic | @ak2lab/engine Sandbox

概要

料金プランをカードで並べて比較できるセクションです。featured フラグで推奨プランを強調表示できます。

YAML パラメータ

パラメータ	説明
`heading`	セクション英語ラベル（省略でヘッダー非表示）
`subheading`	セクション日本語見出し
`extraClass`	追加CSSクラス
`style`	CSS変数の上書き
`items[]`	プランデータ配列
`items[].name`	プラン名
`items[].price`	価格（例: "9,800"）
`items[].unit`	単位（例: "円/月"）
`items[].features[]`	機能リスト（文字列配列）
`items[].linkUrl`	ボタンリンク先
`items[].linkText`	ボタンラベル（default: "申し込む"）
`items[].featured`	強調フラグ（true で枠線＋影を追加）

CSS 調整変数

変数名	用途	デフォルト
`--pricing-basic-padding`	セクション余白	`5rem 0`
`--pricing-basic-bg`	背景色	`#f8fafc`
`--pricing-basic-title-size`	見出しサイズ	`1.8rem`
`--pricing-basic-label-color`	ラベル色	`#00C6FF`
`--pricing-basic-card-bg`	カード背景色	`white`
`--pricing-basic-card-radius`	カード角丸	`16px`
`--pricing-basic-accent`	強調色	`#025DCC`
`--pricing-basic-gap`	グリッド間隔	`1.5rem`

使用例

sections:
  - template: pricing-basic
    heading: "PRICING"
    subheading: "料金プラン"
    items:
      - name: "スターター"
        price: "0"
        unit: "円/月"
        features:
          - "基本機能"
          - "メールサポート"
        linkUrl: "#"
        linkText: "無料で始める"
      - name: "プロ"
        price: "9,800"
        unit: "円/月"
        featured: true
        features:
          - "全機能利用可能"
          - "優先サポート"
          - "カスタムドメイン"
        linkUrl: "#"

← レシピ一覧 | ↑ 目次