stats-basic | @ak2lab/engine Sandbox

概要

数値データを大きく表示して実績や統計をアピールするセクションです。「導入実績 500 社」「満足度 98%」のようなインパクトのある数字を並べるのに最適です。

YAML パラメータ

パラメータ	説明
`heading`	セクション英語ラベル（省略でヘッダー非表示）
`subheading`	セクション日本語見出し
`extraClass`	追加CSSクラス
`style`	CSS変数の上書き
`items[]`	数字データ配列
`items[].num`	数値（例: "500"）
`items[].suffix`	単位・接尾辞（例: "社"、"%"、"万+"）
`items[].label`	ラベル（例: "導入実績"）

CSS 調整変数

変数名	用途	デフォルト
`--stats-basic-padding`	セクション余白	`5rem 0`
`--stats-basic-bg`	背景色	`#f8fafc`
`--stats-basic-title-size`	見出しサイズ	`1.8rem`
`--stats-basic-label-color`	ラベル色	`#00C6FF`
`--stats-basic-num-size`	数値サイズ	`3rem`
`--stats-basic-num-color`	数値色	`#1e293b`
`--stats-basic-gap`	グリッド間隔	`2rem`

使用例

sections:
  - template: stats-basic
    heading: "RESULTS"
    subheading: "数字で見る実績"
    items:
      - num: "500"
        suffix: "社+"
        label: "導入企業数"
      - num: "98"
        suffix: "%"
        label: "顧客満足度"
      - num: "24"
        suffix: "時間"
        label: "平均レスポンス"

← レシピ一覧 | ↑ 目次