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

Card

カード型コンテンツを出力する、<Card>コンポーネントの作成例を紹介します。
全体をリンク化することにも対応しています。

↓
Preview

Card Title

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

リサイズ可能 
<Card sideW='50%'>
  <Frame data-is-side ar='16/9'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' mb='10' />
  </Stack>
</Card>

Import

Section titled “Import”
ソースコードを手動でコピー&ペーストしてご利用ください。 
 import Card from '@/components/lism/Card/index.jsx';

Props

Section titled “Props”
プロパティ説明
layout展開するレイアウトコンポーネントを指定します。デフォルトは<WihSide>です。
hrefこの例では、hrefを指定すると自動でa.is--linkBoxとして展開されるようになっています。

Examples

Section titled “Examples”
↓
デフォルトは<WihSide>で構成されるので、画面サイズが小さいと縦並び、大きいと横並びになります。

Card Title

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

Card Title

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

リサイズ可能 
<Card sideW='50%'>
  <Frame data-is-side ar='16/9'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' mb='10' />
  </Stack>
</Card>
<Card fxd='rr' sideW='50%' >
  <Frame data-is-side ar='16/9'>
    <Media src='/img/img-2.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' mb='10' />
  </Stack>
</Card>

カードにリンクをつける

Section titled “カードにリンクをつける”

<Card>にhrefを指定すると、isLinkBox tag='a' が適用され、カード全体をis--linkBoxでリンク化します。

↓
例

Card Title

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
リサイズ可能 
<Card href='###' sideW='50%' >
  <Frame data-is-side ar='16/9'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' mb='10' />
  </Stack>
</Card>

リンク要素を一部の要素に限定したい場合や、カード全体をリンクにしつつ、別のリンクを含めたい場合、 u--overlayLink を使用してください。

↓
u--overlayLinkを使う例
Category

Card Title(Link)

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

Bottom Link
リサイズ可能 
<Card isLinkBox hov={{bxsh: '4'}} trs sideW='50%'>
  <Frame data-is-side ar='16/9' pos='r'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
    <Link href='#badge-link' pos='a' z='1' t='0' r='0' fz='s' bgc='black' c='white' m='20' px='20' bdrs='99' td='n' hov='fade'>Category</Link>
  </Frame>
  <Stack g='10' p='30'>
    <h3 className='-fz:l'>
      <Link className='u--overlayLink' href='#card-link'>Card Title(Link)</Link>
    </h3>
    <Dummy lang='ja' />
    <Link href='#bottom-link' px='10' td='n' bd='b' aslf='end' mbs='auto'>Bottom Link</Link>
  </Stack>
</Card>

横並びで固定する

Section titled “横並びで固定する”
↓
layout={Flex}を指定して横並びで常に表示できます。

Card Title

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

リサイズ可能 
<Card layout={Flex}>
  <Frame w={['32%','40%','50%']} fxsh='0'>
    <Media src='/img/img-3.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack fxg='1' g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' />
  </Stack>
</Card>
↓
メディア側のアスペクト比を指定すると、画面サイズが十分広ければそのアスペクト比で固定されます。

Card Title

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

s

リサイズ可能 
<Card layout={Flex} fxd='rr'>
  <Frame w={['32%','40%']} ar='1/1' fxsh='0'>
    <Media src='/img/img-2.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack fxg='1' g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' />
    <Link href='#button-link' px='10' td='n' bd='b' aslf='end' mbs='auto'>Link Text</Link>
  </Stack>
</Card>

縦並び

Section titled “縦並び”

layout={Stack}を指定して縦並びで常に表示する例を紹介します。

↓
縦向きで固定

Card Title

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

Bottom Text

Card Title

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

Bottom Text

リサイズ可能 
<Columns variant='liquid' g='40'>
  <Card layout={Stack} href='#card-1'>
    <Frame ar='16/9'>
      <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
    </Frame>
    <Stack fxg='1' p='30'>
      <h3 className='-fz:l'>Card Title</h3>
      <Dummy lang='ja' fz='s' />
      <Text px='10' aslf='end' mbs='auto' fz='s' bd='b'>Bottom Text</Text>
    </Stack>
  </Card>
  <Card layout={Stack} href='#card-2'>
    <Frame ar='16/9'>
      <Media src='/img/img-2.jpg' alt='' width='960' height='640' />
    </Frame>
    <Stack fxg='1' p='30'>
      <h3 className='-fz:l'>Card Title</h3>
      <Dummy lang='ja' length='s' fz='s'/>
      <Text px='10' aslf='end' mbs='auto' fz='s' bd='b'>Bottom Text</Text>
    </Stack>
  </Card>
</Columns>

その他の例

Section titled “その他の例”

bdrs=‘inner’

Section titled “bdrs=‘inner’”
↓
bdrs='inner'の活用

Card Title

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

リサイズ可能 
<Card sideW='45%' g='20' p='20' bdrs='4'>
  <Frame data-is-side ar='16/9' bdrs='inner'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack g='10' p='10'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' mb='10' />
    <Link href='#button-link' px='10' td='n' bd='b' aslf='end' mbs='auto'>Link Text</Link>
  </Stack>
</Card>

ホバーでコンテンツを出現させる例

Section titled “ホバーでコンテンツを出現させる例”

以下の例では、.-hov\:get\:slideクラスを別途用意する必要があります。

↓
コンテンツをホバーして表示

Card Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

2000.01.01 / Author

Card Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

2000.01.01 / Author

<Columns variant='liquid' colSize='20rem' g='30'>
  <Card href='#card-a' pos='r' bdrs='2' hov='set'>
    <Frame ar='3/2'>
      <img src='/img/img-1.jpg' alt='' width='960' height='640' />
    </Frame>
    <Stack pos='a' b='0' w='100%' p='20' bgc='white:50%'>
      <Layer blur='4px' brightness='1.1'/>
      <Box pos='relative' z='1' c='black' lh='s'>
        <h3 className='-fz:l'>Card Title</h3>
        <Grid hov='get:slide'>
          <Box ov='h'>
            <Dummy py='5' fz='s' lh='xs' op='high' />
          </Box>
        </Grid>
        <Text fz='xs' op='high'>2000.01.01 / Author</Text>
      </Box>
    </Stack>
  </Card>
  <Card href='#card-b' pos='r' bdrs='2' hov='set'>
    <Frame ar='3/2'>
      <img src='/img/img-2.jpg' alt='' width='960' height='640' />
    </Frame>
    <Stack pos='a' b='0' w='100%' p='20' bgc='white:50%'>
      <Layer blur='4px' brightness='1.1'/>
      <Box pos='relative' z='1' c='black' lh='s'>
        <h3 className='-fz:l'>Card Title</h3>
        <Grid hov='get:slide'>
          <Box ov='h'>
            <Dummy py='5' fz='s' lh='xs' op='high' />
          </Box>
        </Grid>
        <Text fz='xs' op='high'>2000.01.01 / Author</Text>
      </Box>
    </Stack>
  </Card>
</Columns>

横並びの時はコンテンツ側の高さにあわせ、縦並びの時はアスペクト比を維持

Section titled “横並びの時はコンテンツ側の高さにあわせ、縦並びの時はアスペクト比を維持”

ar(aspect-ratio)をブレイクポイント指定します。 また、それに合わせてCardのレイアウトもブレイクポイントで切り替わるように sidePositionを指定します。

↓
ブレイクポイントで切り替える場合

Card Title

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

リサイズ可能 
<Card sideW='50%' sidePosition='start start' bxsh='0' bdrs='0'>
  <Frame data-is-side ar={['16/9', 'unset']} pos='r'>
    <Media pos='a' src='/img/img-1.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' />
  </Stack>
</Card>