Lism CSS
Search

Card

This page is currently under construction
Lism UI (@lism-css/ui) is still in preparation.

Examples of card-style content layouts built with Lism.

Examples

By building with WithSide, the layout automatically switches to vertical when the display area becomes narrow.

Additionally, is--boxLink is applied to make the entire card content a link.

↓
Preview

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View More →
Resize 
<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">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </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>

When you want to make the entire card a link while also including a separate link inside, use is--coverLink.

↓
Example using is--coverLink
Category

Card with .is—coverLink

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View More →
Resize 
<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">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </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>

Card example with content placed over an image

↓
Preview

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </Text>
    <Center as="a" href="#" c="black" bgc="white" td="none" lh="s" p="15" bdrs="99" hov="neutral">
      Link Text
    </Center>
  </Layer>
</Frame>

Rounded inner corners with set--var:bdrsInner

↓
Preview

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View More →
Resize 
<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">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </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>

Specifying an image aspect ratio while adapting to content height

↓
Specifying an aspect ratio on the media side locks it when the content side is shorter.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View More →
Resize 
<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">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </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>

Switching between horizontal and vertical layouts at a breakpoint, with changing media aspect ratio

An example using Grid to toggle between horizontal and vertical layouts at a breakpoint, while also changing the media aspect ratio.

↓
Switching layout at a breakpoint

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View More →
Resize 
<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">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </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>

Revealing text on hover

The following example requires a custom -hov\:in\:slide class to be defined separately.

↓
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">
          <DummyText py="5" fz="s" lh="xs" />
        </Box>
      </Grid>
      <Group util="trim" fz="xs" o="p">
        2000.01.01 / Author
      </Group>
    </Box>
  </Stack>
</BoxLink>

© Lism CSS. All rights reserved.

TOC