timeline-basic | @ak2lab/engine Sandbox

概要

縦ラインのタイムラインで、利用の流れやステップ、会社沿革などを表現するセクションです。

YAML パラメータ

パラメータ	説明
`heading`	セクション英語ラベル（省略でヘッダー非表示）
`subheading`	セクション日本語見出し
`extraClass`	追加CSSクラス
`style`	CSS変数の上書き
`items[]`	ステップデータ配列
`items[].label`	ラベル（例: "STEP 01"、"2020"）
`items[].title`	タイトル
`items[].desc`	説明文（HTML可）

CSS 調整変数

変数名	用途	デフォルト
`--timeline-basic-padding`	セクション余白	`5rem 0`
`--timeline-basic-bg`	背景色	`white`
`--timeline-basic-title-size`	見出しサイズ	`1.8rem`
`--timeline-basic-label-color`	ラベル色	`#00C6FF`
`--timeline-basic-line-color`	ライン色	`#e2e8f0`
`--timeline-basic-dot-color`	ドット色	`#00C6FF`

使用例

sections:
  - template: timeline-basic
    heading: "HOW IT WORKS"
    subheading: "ご利用の流れ"
    items:
      - label: "STEP 01"
        title: "お問い合わせ"
        desc: "フォームまたはメールでご連絡ください。"
      - label: "STEP 02"
        title: "ヒアリング"
        desc: "ご要望をお伺いし、最適なプランをご提案します。"
      - label: "STEP 03"
        title: "制作・納品"
        desc: "デザイン・実装を行い、テスト後に納品します。"

← レシピ一覧 | ↑ 目次