コンテンツにスキップ

Card

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

↓

Preview

Card Title

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

リサイズ可能

<Card sideW='50%' >
  <CardMedia isSide ar='16/9'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' mb='10' />
  </CardBody>
</Card>

Import

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

Props

プロパティ	説明
`layout`	展開するレイアウトコンポーネントを指定します。デフォルトは`<WihSide>`です。

Child Components

<CardMedia>: <FlexItem layout={Frame}>を呼び出します.
<CardBody>: <FlexItem layout={Stack}>を呼び出します.

Examples

↓

例

Card Title

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

Card Title

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

リサイズ可能

<Card sideW='50%' >
  <CardMedia isSide ar='16/9'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' mb='10' />
  </CardBody>
</Card>
<Card fxd='rr' sideW='50%' >
  <CardMedia isSide ar='16/9'>
    <Media src='/img/img-2.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' mb='10' />
  </CardBody>
</Card>

↓

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

Card Title

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

Card Title

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

リサイズ可能

<Card sideW='50%' sidePosition='start start'>
  <CardMedia isSide ar={['16/9','4/3']} w='100%' h='100%'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody g='10' p='30'>
    <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>
  </CardBody>
</Card>
<Card sideW='50%' sidePosition='end start'>
  <CardMedia isSide ar={['16/9','4/3']} w='100%' h='100%'>
    <Media src='/img/img-2.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody g='10' p='30'>
    <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>
  </CardBody>
</Card>

カードにリンクをつける

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

↓

例

リサイズ可能

<Card href='###' sideW='50%' >
  <CardMedia isSide ar='16/9'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' mb='10' />
  </CardBody>
</Card>

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

↓

is--overlayLinkを使う例

リサイズ可能

<Card isLinkBox hov='shadow' sideW='50%'>
  <CardMedia isSide ar='4/3' pos='r'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
    <Link href='#badge-link' pos='a' z='1' hov='up' t='0' r='0' fz='s' bgc='black' c='white' m='20' px='20' bdrs='99' td='n'>Category</Link>
  </CardMedia>
  <CardBody g='10' p='30'>
    <h3 className='-fz:l'>
      <Link isOverlayLink 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>
  </CardBody>
</Card>

↓

is--hiddenLinkを使う例

リサイズ可能

<Card isLinkBox sideW='50%' hov='shadow' >
  <Link isHiddenLink href='#card-hiddenlink' aria-label='リンクの読み上げテキスト'/>
  <CardMedia ar='4/3' isSide>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
    <Link href='#badge-link' pos='a' z='1' hov='up' t='0' r='0' fz='s' bgc='black' c='white' m='20' px='20' bdrs='99' td='n'>Category</Link>
  </CardMedia>
  <CardBody g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' />
    <Link href='#bottom-link' px='10' td='n' bd='b' aslf='end' mbs='auto'>Bottom Link</Link>
  </CardBody>
</Card>

横並び

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

↓

横向きで固定

Card Title

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

Card Title

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

リサイズ可能

<Card layout={Flex}>
  <CardMedia w={['32%','40%','50%']} fxsh='0'>
    <Media src='/img/img-3.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody 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>
  </CardBody>
</Card>
<Card layout={Flex} fxd='rr'>
  <CardMedia w={['32%','40%','50%']} fxsh='0'>
    <Media src='/img/img-2.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody 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>
  </CardBody>
</Card>

↓

画像のアスペクト比を指定する例

リサイズ可能

<Card layout={Flex} href='###' hov='bxsh,up'>
  <CardMedia ar='1/1' w='36%' fxsh='0'>
    <Media src='/img/img-3.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody fxg='1' g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' length='s'/>
    <Text px='10' aslf='end' mbs='auto' fz='s' bd='b'>Bottom Text</Text>
  </CardBody>
</Card>

この時、コンテンツの方が高さがでてくると、カードの高さはコンテンツの高さに合わせて伸びますが、align-itemsを変更するとaspect-ratioを維持させることもできます。

縦並び

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

↓

縦向きで固定

リサイズ可能

<Columns variant='liquid' g='40'>
  <Card layout={Stack} href='#card-1'>
    <CardMedia ar='16/9'>
      <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
    </CardMedia>
    <CardBody 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>
    </CardBody>
  </Card>
  <Card layout={Stack} href='#card-2'>
    <CardMedia ar='16/9'>
      <Media src='/img/img-2.jpg' alt='' width='960' height='640' />
    </CardMedia>
    <CardBody 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>
    </CardBody>
  </Card>
</Columns>

その他の例

↓

bdrs=‘inner’の活用

Card Title

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

リサイズ可能

<Card sideW='40%' p='20' g='20' bdrs='4'>
  <CardMedia isSide ar='16/9' bdrs='inner'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody 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>
  </CardBody>
</Card>

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

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

↓

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

リサイズ可能

<Columns variant='liquid' colSize='20rem' g='30'>
  <Card href='#card-a' pos='r' bdrs='2' hov='bxsh,pass'>
    <CardMedia ar='4/3'>
      <img src='/img/img-1.jpg' alt='' width='960' height='640' />
    </CardMedia>
    <CardBody 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>
    </CardBody>
  </Card>
  <Card href='#card-b' pos='r' bdrs='2' hov='bxsh,pass'>
    <CardMedia ar='4/3'>
      <img src='/img/img-2.jpg' alt='' width='960' height='640' />
    </CardMedia>
    <CardBody 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>
    </CardBody>
  </Card>
</Columns>

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

↓

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

Card Title

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

リサイズ可能

<Card sideW='50%' sidePosition='start start' bxsh='0' bdrs='0'>
  <CardMedia isSide ar={['16/9', 'unset']} pos='r'>
    <Media pos='a' src='/img/img-1.jpg' alt='' width='960' height='640' />
  </CardMedia>
  <CardBody g='10' p='30'>
    <h3 className='-fz:l'>Card Title</h3>
    <Dummy lang='ja' fz='s' />
  </CardBody>
</Card>