FAQ

This page is currently under construction

Lism UI (@lism-css/ui) is still in preparation.

Examples of FAQ / Q&A layouts built with Lism.

Examples

↓

Simple FAQ

Is it okay to dance when you get tired?

Of course. Feel free to sweat and refresh yourself.

Why does my cat sit on my keyboard?

There are theories that cats want to be close to their owners, or that they find the warmth of the keyboard comfortable. It may be a sign that they want attention, so give them plenty of pets.

Why can’t penguins fly?

Penguins have bodies specialized for swimming. While they cannot fly through the air, they move through water as freely as birds in flight.

<Stack as="dl" g="30">
  <Stack g="15">
    <Lism as="dt" fw="bold" bd-x-s bdc="current" bdw="2px" px-s="15">
      Is it okay to dance when you get tired?
    </Lism>
    <Lism as="dd" px-s="5">
      <p>Of course. Feel free to sweat and refresh yourself.</p>
    </Lism>
  </Stack>
  <Stack g="15">
    <Lism as="dt" fw="bold" bd-x-s bdc="current" bdw="2px" px-s="15">
      Why does my cat sit on my keyboard?
    </Lism>
    <Lism as="dd" px-s="5">
      <p>
        There are theories that cats want to be close to their owners, or that they find the warmth of the keyboard comfortable. It may be a sign that
        they want attention, so give them plenty of pets.
      </p>
    </Lism>
  </Stack>
  <Stack g="15">
    <Lism as="dt" fw="bold" bd-x-s bdc="current" bdw="2px" px-s="15">
      Why can't penguins fly?
    </Lism>
    <Lism as="dd" px-s="5">
      <p>
        Penguins have bodies specialized for swimming. While they cannot fly through the air, they move through water as freely as birds in flight.
      </p>
    </Lism>
  </Stack>
</Stack>

<dl class="l--stack -g:30">
  <div class="l--stack -g:15">
    <dt class="-fw:bold -bd-x-s -bdc:current -px-s" style="--bdw: 2px; --px-s: var(--s15)">Is it okay to dance when you get tired?</dt>
    <dd class="-px-s" style="--px-s: var(--s5)">
      <p>Of course. Feel free to sweat and refresh yourself.</p>
    </dd>
  </div>
  <div class="l--stack -g:15">
    <dt class="-fw:bold -bd-x-s -bdc:current -px-s" style="--bdw: 2px; --px-s: var(--s15)">Why does my cat sit on my keyboard?</dt>
    <dd class="-px-s" style="--px-s: var(--s5)">
      <p>There are theories that cats want to be close to their owners, or that they find the warmth of the keyboard comfortable.</p>
    </dd>
  </div>
  <div class="l--stack -g:15">
    <dt class="-fw:bold -bd-x-s -bdc:current -px-s" style="--bdw: 2px; --px-s: var(--s15)">Why can't penguins fly?</dt>
    <dd class="-px-s" style="--px-s: var(--s5)">
      <p>
        Penguins have bodies specialized for swimming. While they cannot fly through the air, they move through water as freely as birds in flight.
      </p>
    </dd>
  </div>
</dl>

↓

Example

Is it okay to dance when you get tired?

Why does my cat sit on my keyboard?

<Accordion.Root class="c--faq" bgc="base-2" bdrs="10">
    <Accordion.Item>
      <Accordion.Heading>
        <Accordion.Button p="20" layout="flex" ai="center" g="10" fw="bold">
          <Icon viewBox="0 0 256 256" fz="xl" c="brand">
            <path d="M192,96c0,28.51-24.47,52.11-56,55.56V160a8,8,0,0,1-16,0V144a8,8,0,0,1,8-8c26.47,0,48-17.94,48-40s-21.53-40-48-40S80,73.94,80,96a8,8,0,0,1-16,0c0-30.88,28.71-56,64-56S192,65.12,192,96Zm-64,96a16,16,0,1,0,16,16A16,16,0,0,0,128,192Z"></path>
          </Icon>
          <span>Is it okay to dance when you get tired?</span>
        </Accordion.Button>
      </Accordion.Heading>
      <Accordion.Panel p="20" py-s="0" mx-s="5" flow="s">
        <p>Of course. Feel free to sweat and refresh yourself.</p>
      </Accordion.Panel>
    </Accordion.Item>
  </Accordion.Root>
  <Accordion.Root class="c--faq" bgc="base-2" bdrs="10">
    <Accordion.Item>
      <Accordion.Heading>
        <Accordion.Button p="20" layout="flex" ai="center" g="10" fw="bold">
          <Icon viewBox="0 0 256 256" fz="xl" c="brand">
            <path d="M192,96c0,28.51-24.47,52.11-56,55.56V160a8,8,0,0,1-16,0V144a8,8,0,0,1,8-8c26.47,0,48-17.94,48-40s-21.53-40-48-40S80,73.94,80,96a8,8,0,0,1-16,0c0-30.88,28.71-56,64-56S192,65.12,192,96Zm-64,96a16,16,0,1,0,16,16A16,16,0,0,0,128,192Z"></path>
          </Icon>
          <span>Why does my cat sit on my keyboard?</span>
        </Accordion.Button>
      </Accordion.Heading>
      <Accordion.Panel p="20" py-s="0" mx-s="5" flow="s">
        <p>There are theories that cats want to be close to their owners, or that they find the warmth of the keyboard comfortable. It may be a sign that they want attention, so give them plenty of pets.</p>
      </Accordion.Panel>
    </Accordion.Item>
  </Accordion.Root>
</Stack>