コンテンツにスキップ

Banner

バナーリンクを表示するコンポーネントの作成例を紹介します。

Preview
<Banner href='#banner-link'>
<img src='https://fakeimg.pl/800x200/' alt='' width='800' height='200' />
</Banner>

Import

ソースコードを手動でコピー&ペーストしてご利用ください。

Examples

Layerで画像に被せてコンテンツを表示
<Banner href='#banner-link' ar='4/1' bdrs='4'>
<Media src='/img/img-3.jpg' alt='' width='960' height='640' loading='lazy' />
<Layer bgc='black' op='0.5' />
<Stack isLayer jc='c' g='5' px='40' c='white' lh='s'>
<Text fz='xl' fw='bold'>Banner</Text>
<Dummy fz='s' lang='ja' length='s'/>
</Stack>
</Banner>