Others

↓

ステップナビゲーション

入力

確認

完了

リサイズ可能

<Flex className='c--stepNav' g='1.5rem'>
  <Flex className='c--stepNav__item' bgc='text' c='base' op='low' px='30' py='10' pos='r'>
    <Lism className='c--stepNav__body'>
      <Text>入力</Text>
    </Lism>
    <Decorator pos='a' w='0.75em' h='100%' bgc='inherit' l='100%' t='0' css={{ clipPath: 'polygon(0% 0%, 0% 100%, 100% 50%)' }} />
  </Flex>
  <Flex className='c--stepNav__item' bgc='text' c='base' px='30' py='10' pos='r'>
    <Lism className='c--stepNav__body'>
      <Text>確認</Text>
    </Lism>
    <Decorator pos='a' w='0.75em' h='100%' bgc='inherit' l='100%' t='0' css={{ clipPath: 'polygon(0% 0%, 0% 100%, 100% 50%)' }} />
  </Flex>
  <Flex className='c--stepNav__item' bgc='text' c='base' op='low' px='30' py='10' pos='r'>
    <Lism className='c--stepNav__body'>
      <Text>完了</Text>
    </Lism>
  </Flex>
</Flex>

↓

メニュー表

とても美味しいトマトソースのスパゲッティ

1,000円

美味しいドリンク

500円

リサイズ可能

<Stack className='c--priceMenu' g='30' fz={['s','m']} lh='s'>
  <Grid gtc='auto 1fr auto' ai='center' g='30'>
    <Text>とても美味しいトマトソースのスパゲッティ</Text>
    <Divider minW='1em' />
    <Text whs='nowrap'>1,000円</Text>
  </Grid>
  <Grid gtc='auto 1fr auto' ai='center' g='30'>
    <Text>美味しいドリンク</Text>
    <Divider minW='1em' />
    <Text whs='nowrap'>500円</Text>
  </Grid>
</Stack>

↓

コンテンツの高さに追従しつつ、最低限維持する比率を指定する

Card Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Link Text

リサイズ可能

<Stack pos='r' bdrs='4' ov='h'>
  <Frame isLayer>
    <Media src="/img/img-3.jpg" alt="" width='960' height='640' loading='lazy' decoding='async' />
  </Frame>
  <Flex ar='16/9'>
    <Stack fx='1' pos='r' g='20' p='40' z='1' minH='100%' h='auto' c='white' bgc='black:50%'>
      <h3>Card Title</h3>
      <Dummy lh='s' mb='auto' length='l'/>
      <Link href='#button-test' keycol='white' c='inherit' bdrs='99' aslf='end' px='10' mbs='30'>Link Text</Link>
    </Stack>
  </Flex>
</Stack>

独自ユーティリティクラスの作成例

Lismのパッケージ内で用意しているクラスはありませんが、いくつか独自のユーティリティクラスを用意してそれを呼び出す例を紹介します。

ユーティリティクラスとして強制出力する方法を活用します。

↓

stripe

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

リサイズ可能

.-bg\:stripe {
  --stripe-bdc: color-mix(in srgb, currentColor, transparent 94%);
  --stripe-bdw: 1px;
  --stripe-deg: -40deg;
  --stripe-interval: 6px;
  background-image: repeating-linear-gradient(
    var(--stripe-deg),
    var(--stripe-bdc),
    var(--stripe-bdc) var(--stripe-bdw),
    transparent var(--stripe-bdw),
    transparent var(--stripe-interval)
  );

  background-position: center;
}

↓

bg="u:sunset"

リサイズ可能

.-bg\:sunset{
  background: linear-bg(to top, #ddb672 5%, #e67a44 60%, #d16834 95%);
}