testimonial-basic | @ak2lab/engine Sandbox

概要

お客様の声やレビューをカード形式で表示するセクションです。引用線付きのデザインで、信頼性を高めます。

YAML パラメータ

パラメータ	説明
`heading`	セクション英語ラベル（省略でヘッダー非表示）
`subheading`	セクション日本語見出し
`extraClass`	追加CSSクラス
`style`	CSS変数の上書き
`items[]`	レビューデータ配列
`items[].text`	レビュー本文（HTML可）
`items[].name`	名前
`items[].role`	肩書き・属性

CSS 調整変数

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

使用例

sections:
  - template: testimonial-basic
    heading: "TESTIMONIALS"
    subheading: "お客様の声"
    items:
      - text: "サイトの表示速度が劇的に改善しました。"
        name: "山田太郎"
        role: "株式会社サンプル 代表"
      - text: "デザインの自由度が高く、思い通りのサイトが作れます。"
        name: "佐藤花子"
        role: "フリーランスデザイナー"

← レシピ一覧 | ↑ 目次