ページヘッダー一旦開発完了

見出しテキストサブタイトル

クラス名

bl_pageHeader

マークアップ例

<header class="bl_pageHeader">
	<img src="" alt="" class="bl_pageHeader_img" data-object-fit="cover">
	<div class="bl_pageHeader_inner">
		<h1 class="bl_pageHeader_ttl">見出しテキスト<small class="bl_pageHeader_ttl_sub">サブタイトル</small></h1>
	</div>
	<!-- /.bl_pageHeader_inner -->
</header>
<!-- /.bl_pageHeader -->

定義

機能
ページのメインビジュアルやH1見出しなどを含む。

あしらい・振る舞い
直下の子要素はつねに天地の真ん中になるように

特記事項
とくになし

変数とデフォルト値

--bl--page-header--min-height: min(100px, 6.25rem);
--bl--page-header--color: var(--global--color-white);
--bl--page-header--bgc: var(--global--color-keycolor);
--bl--page-header--image-overlay: #0005;
--bl--page-header--pad: var(--responsive--spacing-horizontal);

ファイルパス

Change Log

1. 開発開始：2022-09-16
2. 最終更新：2022-09-18