コンテンツにスキップ
Lism CSS

Banner

バナーリンクを表示するためのLismの使用例を紹介します。

Examples

Section titled “Examples”
↓
Preview
<LinkBox layout={Frame} href='#banner-link' hov='fade' trs bdrs='20'>
  <img src='https://picsum.photos/seed/hogeee/1200/400' alt='' width='800' height='200' />
</LinkBox>
↓
Layerで画像に被せてコンテンツを表示

Banner

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

リサイズ可能 
<LinkBox layout={Frame} href='#banner-link' hov='fade' trs bdrs='20'>
  <Media isLayer src='https://picsum.photos/seed/hogeee/1200/400' alt='' width='960' height='640' loading='lazy' />
  <Flex jc='sb' ai='c' g='30' p='30' c='#fff' bgc='rgb(0 0 0 / 50%)' pos='r' minH='25cqw'>
    <Stack g='5' lh='s'>
      <Text fz='xl' fw='bold'>Banner</Text>
      <Dummy fz='s' lang='ja' length='s'/>
    </Stack>
    <Icon fz='2xl' viewBox="0 0 256 256" scale='1.2'>
      <path d="M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z"></path>
    </Icon>
  </Flex>
</LinkBox>