Card
カード型でコンテンツを表示できるコンポーネントです。 全体をリンク化することも可能です。
<Card>
<CardMedia>
<img src="..." />
</CardMedia>
<CardBody>
...Content...
</CardBody>
</Card><div class="c--card [l--stack|l--flex]">
<div class="c--card__media l--frame">
<img src="..." />
</div>
<div class="c--card__body l--stack">
...Content...
</div>
</div>
or
<a class="c--card [l--stack|l--flex] is--linkbox" href="###">
<div class="c--card__media l--frame">
<img src="..." />
</div>
<div class="c--card__body l--stack">
...Content...
</div>
</a>Props
Card: 内部でStackが使用されています。isFlex: 横並びにできます。<Stack>ではなく<Flex>で構成されるようになります。href:hover
CardMedia:Frameが内部で使用されています。aspect: メディア比率w:isFlexが指定されている場合、<CardMedia>の幅を指定できます。
CardBodyisLayer?
radiusのデフォルト、1にする？
Import
import { Card, CardMedia, CardBody } from '@loos/lism-core';DEMO
Card Title
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
<Card>
<CardMedia aspect="2/1">
<img src="/img/demo-img.jpeg" alt="" loading="lazy" width={960} height={640} />
</CardMedia>
<CardBody>
<h3 className="-fz:l">Card Title</h3>
<DammyText />
</CardBody>
</Card><CardMedia>に aspectを指定すると、内部で<Frame>が使われます。
aspectの指定Card Title
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。
<Card>
<CardMedia aspect="2/1">
<img src="/img/demo-img.jpeg" alt="" loading="lazy" width={960} height={640} />
</CardMedia>
<CardBody>
<h3 className="-fz:l">Card Title</h3>
<DammyText />
</CardBody>
</Card><TileGrid itemMinW="20rem" gap={20}>
<Card href="#card-demo" radius="4">
<CardMedia aspect="16/9">
<Image src="/img/demo-img.jpeg" alt="" width={960} height={640} />
</CardMedia>
<CardBody lh="s">
<h3 className="-fz:l">Card Title A</h3>
<p>...text...</p>
<Text ta="right" mt="auto" fz="s">Bottom Text</Text>
</CardBody>
</Card>
<Card>...</Card>
</TileGrid><TileGrid itemMinW="20rem" gap={20}>
<Card href="#card-demo" radius="1" hover={["shadow", "up", "mediaBright"]}>
<CardMedia aspect="2/1">
<Image className="is--transitionMedia" src="/img/demo-img.jpeg" alt="" width={960} height={640} />
<Badge keycolor="black" pos="absolute" top="0" right="0">Category</Badge>
</CardMedia>
<CardBody lh="s">
<h3 className="-fz:l">Card Title A</h3>
<DammyText />
<Text ta="right" mt="auto" pt="10" fz="s">Bottom Text</Text>
</CardBody>
</Card>
<Card href="#card-demo" radius="1" hover={["shadow", "up", "mediaBright"]}>
...
</Card>
<Card>...</Card>
</TileGrid>横並び
isFlex を指定すると、<Card>が<Stack>ではなく<Flex>で構成されるようになります。
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Bottom Text
<Card isFlex>
<CardMedia>
...
</CardMedia>
<CardBody>
...
</CardBody>
</Card><Card isFlex direction="row-reverse" href="###">
<CardMedia>
...
</CardMedia>
<CardBody>
...
</CardBody>
</Card>横並び時のメディアサイズについて
<CardMedia>に対して wで横幅、aspectでアスペクト比率を指定することでサイズを調整できます。（wの初期値は50%になっています）
横並び時、.c--card__media は min-height:100%になっており、コンテンツよりもメディアの縦幅が大きくなる場合のみ指定したアスペクト比が保持されます。
w:32%, aspect:3/4, 位置反転
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Bottom Text
<Card isFlex>
<CardMedia w="32%" aspect="3/4">
...
</CardMedia>
<CardBody>
...
</CardBody>
</Card>Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Bottom Text
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Bottom Text
<Columns cols={[1, null, 2]} gap={20}>
<Card isFlex>
<CardMedia w="40%" media={...} />
<CardBody>
...
</CardBody>
</Card>
<Card isFlex>
<CardMedia w="40%" media={...} />
<CardBody>
...
</CardBody>
</Card>
</Columns>isLayer
カスタマイズ例
hoverエフェクトを自作する
"contentUp"を指定しているので、 .-hov:contentUp が出力されます。
このクラスに対して、下記のCSSを追加して上記のDEMOを実装しています。
.c--card.-hov\:contentUp .c--card__hiddenArea{
--gtr: 0fr;
opacity: 0;
transition: opacity .25s, grid-template-rows .25s;
}
.c--card.-hov\:contentUp:hover .c--card__hiddenArea{
--gtr: 1fr;
opacity: 1;
}