Banner

バナーリンク型コンテンツを作成できるコンポーネントです。

対応するHTML構造

<a class="c--banner l--frame is--linkbox" href="###">
	<div class="l--layer l--layer--media -z:-1">
		<img src="..." />
	</div>
	[<div class="l--layer l--layer--filter -z:-1">]
	...Content...
</a>

指定されたプロパティに合わせて、BoxやFrame、LinkBox を組み合わせます。

Blockクラス: .c--banner

Props

aspect: バナーを表示する縦横比率を指定できます。
- この指定がある場合、 <Banner> は <Frame> を使用したコンポーネントになります。指定がなければ <Box>ベースのコンポーネントです
href: バナーのリンク先を指定できます。
- この指定がある場合、Banner は <LinkBox> を使用します。
media: バナーの背景に表示するメディアを指定できます。
- この指定がある時、<MediaLayer>が使われます。
filter: バナーの背景にフィルターをかけることができます。(backdrop-filterと、背景色の指定が可能。+ 何種類かのテクスチャ？)
- この指定がある時、<FilterLayer>が使われます。

Import

import { Banner } from '@loos/lism-core';

DEMO

16:9のバナーリンク

<Banner href="#banner-link" aspect="16/9">
	<img src="/img/demo-img.jpeg" alt="" width={960} height={640} loading="lazy" />
</Banner>

Layerで画像に被せてコンテンツを表示

<Banner href="#banner-link" aspect="16/9"  radius="4">
	<Media src="/img/demo-img.jpeg" alt="" width={960} height={640} loading="lazy" />
	<FilterLayer bgc="black:40%" blur="2px" />
	<Layer inset='0' isFlow='s' p='box' c="white">
		<Text fz="2xl" fw="bold">Banner</Text>
		<DammyText />
	</Layer>
</Banner>

hover=get:zoom を使う時は、MediaLayerを使ってください。（そうしないとスクロールが発生してしまいます）

<Banner href="#banner-link" aspect="16/9" hover="pass" radius="4">
	<MediaLayer src="/img/demo-img.jpeg" alt="" width={960} height={640} loading="lazy" hover="get:zoom"/>
	<FilterLayer bgc="black:20%" blur="4px" hover="get:show"/>
	<Layer position="center" bgc="black:50%" radius="4" hover="get:show">
		<Text length="xs" p="box" c="white" className="is--hovTarget">View More</Text>
	</Layer>
</Banner>

aspect指定せず、画像比率そのままで

<Banner href="#banner-link" hover={["target:dark", "target:zoom"]} radius="4">
	<Media src="/img/demo-img.jpeg" alt="" width={960} height={640} loading="lazy" />
	<FilterLayer bgc="black:40%" blur="2px" />
	<Layer inset='0' isFlow='s' p='box' c="white">
		<Text fz="2xl" fw="bold">Banner</Text>
		<DammyText />
	</Layer>
</Banner>

aspect指定なし

画像ファイルそのままの比率で

<Banner href="#banner-link" hover={["target:zoom", "target:blur"]}>
	<MediaLayer src="/img/demo-img.jpeg" alt="" width={960} height={640} loading="lazy" />
	<Layer position="center" bgc="rgba(0,0,0,0.5)" radius="4">
		<DammyText length="xs" p="box" c="white" />
	</Layer>
</Banner>

Note Card