Lism CSS
検索

Card

このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。

カード型コンテンツの作成例を紹介します。

Examples

縦向き・横向きのレイアウトが自動で切り替わるカードリンク

WithSideを使って構築することで、表示領域が狭くなったら縦向きレイアウトにすることができます。

また、is--boxLinkを適用してカードコンテンツ全体をリンクにしてみます。

↓
Preview

Card Title

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

View More →
リサイズ 
<WithSide isBoxLink href="###" hov="-bxsh" hasTransition sideW="50%" bgc="base" bdrs="20" bxsh="10" ov="hidden">
  <Frame isSide ar="16/9">
    <Media src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
  </Frame>
  <Stack g="30" p="30">
    <h3 util="trim" className="-fz:l">Card Title</h3>
    <Text util="trim" fz="s" lh="s" o="p">
      ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
    </Text>
    <Inline d="inline-flex" mx-s="auto" my-s="auto" c="inherit" td="none" bd-b lh="s" p="10">
      View More →
    </Inline>
  </Stack>
</WithSide>

カード内に別のリンクを配置する例

カード全体をリンクにしつつ、別のリンクを含めたい場合、 is--coverLink を使用します。

↓
is--coverLinkを使う例
Category

Card with .is—coverLink

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

View More →
リサイズ 
<WithSide isBoxLink hov="-bxsh" hasTransition sideW="50%" bgc="base" bdrs="20" bxsh="10" ov="hidden">
  <Frame isSide ar="16/9" pos="relative">
    <Media src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
    <Link href="#badge-link" pos="absolute" t="0" r="0" fz="s" bgc="black" c="white" m="20" px="15" bdrs="99" td="none" hov="neutral">
      Category
    </Link>
  </Frame>
  <Stack g="30" p="30">
    <h3 util="trim" className="-fz:l">
      <Link isCoverLink href="#card-link">
        Card with .is--coverLink
      </Link>
    </h3>
    <Text util="trim" fz="s" lh="s" o="p">
      ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
    </Text>
    <Inline d="inline-flex" mx-s="auto" my-s="auto" c="inherit" td="none" bd-b lh="s" p="10">
      View More →
    </Inline>
  </Stack>
</WithSide>

画像の上にコンテンツを配置するカードの例

↓
Preview

Card Title

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

Link Text
<Frame pos="relative" ar="3/4" bdrs="30" bxsh="30" max-w="24em">
  <Media src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
  <Layer bgc="rgb(0 0 0 / 20%)" />
  <Layer layout="stack" c="white" p="30" g="30">
    <h3 util="trim" className="-fz:l -my-s:auto">Card Title</h3>
    <Text util="trim" fz="s" lh="s" o="p">
      ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
    </Text>
    <Center as="a" href="#" c="black" bgc="white" td="none" lh="s" p="15" bdrs="99" hov="neutral">
      Link Text
    </Center>
  </Layer>
</Frame>

set—var:bdrsInner のカードへの活用例

↓
Preview

Card Title

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

View More →
リサイズ 
<Stack p="15" g="20" c="text" bgc="base" bdrs="30" bxsh="30" className="set--var:bdrsInner" max-w="xs" mx="auto">
  <Frame isSide ar="16/9">
    <Media src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" bdrs="inner" />
  </Frame>
  <Stack g="30" p="15">
    <h3 util="trim" className="-fz:l">Card Title</h3>
    <Text util="trim" fz="s" lh="s" o="p">
      ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
    </Text>
    <Link href="#" d="inline-flex" mx-s="auto" c="base" bgc="text" td="none" lh="s" py="15" px="20" jc="center" hov="neutral" bdrs="inner">
      View More →
    </Link>
  </Stack>
</Stack>

画像比率を指定しながらコンテンツに合わせる

↓
Flex時にメディア側のアスペクト比を指定すると、コンテンツ側の高さが低い場合にその比率で固定されます。

Card Title

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

View More →
リサイズ 
<BoxLink href="#_" layout="flex" p="15" c="text" bgc="base" bd bdw="2px" bdc="base-2" bdrs="20" hov="-bxsh" set="var:hov" hasTransition>
  <Frame w={['25%', '30%']} ar="1/1" fxsh="0" bdrs="10">
    <Media src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
  </Frame>
  <Stack fxg="1" g="30" p="30">
    <h3 util="trim" className="-fz:l">Card Title</h3>
    <Text util="trim" fz="s" lh="s" o="p">
      ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
    </Text>
    <Inline d="inline-flex" mx-s="auto" my-s="auto" c="var(--_isHov, var(--link)) var(--_notHov, inherit)" td="none" bd-b lh="s" p="10">
      View More →
    </Inline>
  </Stack>
</BoxLink>

横並びと縦並びをブレイクポイントで切り替え、メディア比率も変更する

Gridでブレイクポイント指定で横並びと縦並びを切り替え、メディア比率も変更する例です。

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

Card Title

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

View More →
リサイズ 
<BoxLink
  href="#_"
  layout="grid"
  gt={[`'img' '.'`, `'img .' / 200px 1fr`]}
  ai="center"
  g="15"
  p="15"
  bgc="base"
  bd
  bdw="2px"
  bdc="base-2"
  bdrs="20"
  bxsh="10"
  hov="-bxsh"
  set="var:hov" hasTransition
>
  <Frame ga="img" aslf="stretch" ar={['og', '1/1']} max-w="100%" pos="relative" bdrs="20" bxsh="10">
    <Media css={{ scale: 'var(--_isHov, 1.25)' }} hasTransition src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
  </Frame>
  <Stack g="20" p="15">
    <h3 className="-fz:l">Card Title</h3>
    <Text util="trim" fz="s" lh="s" o="p">
      ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
    </Text>
    <Inline d="inline-flex" mx-s="auto" my-s="20" c="inherit" td="none" bd-b lh="1" p="10">
      View More →
    </Inline>
  </Stack>
</BoxLink>

ホバーでテキストを出現させる例

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

↓
Preview

Card Title

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

2000.01.01 / Author
 
<BoxLink href="#card-a" pos="relative" bdrs="20" bxsh="20" ov="hidden" set="var:hov" max-w="xs" mx="auto">
  <Frame ar="1/1">
    <img src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
  </Frame>
  <Layer bgc="rgba(0 0 0 / 10%)" />
  <Stack pos="absolute" b="0" w="100%" p="30" bgc="rgb(255 255 255 / 20%)">
    <Layer style={{ backdropFilter: 'blur(6px) brightness(1.1)' }} />
    <Box pos="relative" z="1" c="white" lh="s">
      <h3 util="trim" className="-fz:l">Card Title</h3>
      <Grid hasTransition hov="in:slide" my="15">
        <Box ov="hidden">
          <p class="-py:5 -fz:s -lh:xs">ロレム・イプサムの座り雨。</p>
        </Box>
      </Grid>
      <Group util="trim" fz="xs" o="p">
        2000.01.01 / Author
      </Group>
    </Box>
  </Stack>
</BoxLink>

© Lism CSS. All rights reserved.

目次