レシピ
logo-cloud-basic
ロゴクラウド。取引先・掲載実績。
概要
取引先や掲載メディアのロゴを並べて信頼性を訴求するセクションです。ロゴはグレースケールで表示され、ホバーでカラーになります。
YAML パラメータ
| パラメータ | 説明 |
|---|---|
heading |
セクション英語ラベル（省略でヘッダー非表示） |
subheading |
セクション日本語見出し |
extraClass |
追加CSSクラス |
style |
CSS変数の上書き |
items[] |
ロゴデータ配列 |
items[].src |
画像パス |
items[].alt |
alt テキスト |
items[].href |
リンク先（省略可） |
CSS 調整変数
| 変数名 | 用途 | デフォルト |
|---|---|---|
--logo-cloud-basic-padding |
セクション余白 | 4rem 0 |
--logo-cloud-basic-bg |
背景色 | white |
--logo-cloud-basic-title-size |
見出しサイズ | 1.8rem |
--logo-cloud-basic-label-color |
ラベル色 | #00C6FF |
--logo-cloud-basic-logo-height |
ロゴ高さ | 40px |
--logo-cloud-basic-gap |
ロゴ間隔 | 3rem |
--logo-cloud-basic-opacity |
ロゴ透過度 | 0.6 |
使用例
sections:
- template: logo-cloud-basic
heading: "TRUSTED BY"
subheading: "導入企業"
items:
- src: "/img/logos/company-a.svg"
alt: "Company A"
href: "https://example.com"
- src: "/img/logos/company-b.svg"
alt: "Company B"