コンテンツにスキップ
Lism UI

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 flexItem={{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' keycolor='white' c='inherit' bdrs='99' aslf='end' px='10' mbs='30'>Link Text</Link>
    </Stack>
  </Flex>
</Stack>