FAQ

Q&Aの構築例を紹介します。

DEMO

Boxの例 1

Lorem question 1: 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.
Lorem question 1: 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.

リサイズ可能エリアです ↑

<Stack tag='dl' className='b--faq' gap={40}>
	<Stack tag='div' className='b--faq__item' gap={20}>
		<Flex tag='dt' className='b--faq__header' gap={30} ai='c'>
			<Icon fz='xl' data-icon='Q'>Q.</Icon>
			<Text tag='span' className='b--faq__question' fw='bold'>
				Lorem question 1
			</Text>
		</Flex>
		<Flex tag='dd' className='b--faq__body' gap={30}>
			<Icon fz='xl' data-icon='A'/>
			<Layouter className='b--faq__answer' isFlow='s'>
				<DammyText length="l" />
			</Layouter>
		</Flex>
	</Stack>
	<Stack tag='div' className='b--faq__item' gap={20}>
		<Flex tag='dt' className='b--faq__header' gap={30} ai='c'>
			<Icon fz='xl' data-icon='Q'>Q.</Icon>
			<Text tag='span' className='b--faq__question' fw='bold'>
				Lorem question 1
			</Text>
		</Flex>
		<Flex tag='dd' className='b--faq__body' gap={30}>
			<Icon fz='xl' data-icon='A'/>
			<Layouter className='b--faq__answer' isFlow='s'>
				<DammyText length="l" />
			</Layouter>
		</Flex>
	</Stack>
</Stack>

※ b--クラスは別に不要ですが。何か命名するとしたらこうかな？という一例です。 ※ この例では、data-icon='A'は、Qと同じ幅で余白をあけるために配置しています。

Memo: ブロック化した時、"Q." はテキスト普通におくのではなく、::beforeで。（CSSでいじりやすくする）

アコーディオンタイプ

isAccordion を指定するとアコーディオンになります。

Boxの例 1

ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。クピダタットのつるの痛みになりたい宿題に、批判されてきたら痛み、マグナ逃亡しても結果の喜びを生成しません。先例クピダタットブラックは先例していない、つまり、彼らはあなたの悩みに責任がある人の、一般的な義務を捨て、魂を癒しています。

リサイズ可能エリアです ↑

<AccordionGroup gap={10} className='b--faq'>
	<Accordion className='b--faq__item'>
		<AccordionHeader p="box" bgc="pale">
			<Icon data-icon='Q' fz='xl'>Q.</Icon>
			<AccordionLabel>
				Lorem question 1 ロレム・イプサムの座り雨、トマ好き学習エリット？
			</AccordionLabel>
			<AccordionIcon />
		</AccordionHeader>
		<AccordionBody p="box">
			<p>
				ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。クピダタットのつるの痛みになりたい宿題に、批判されてきたら痛み、マグナ逃亡しても結果の喜びを生成しません。先例クピダタットブラックは先例していない、つまり、彼らはあなたの悩みに責任がある人の、一般的な義務を捨て、魂を癒しています。
			</p>
		</AccordionBody>
	</Accordion>
	<Accordion className='b--faq__item'>
		<AccordionHeader p="box" bgc="pale">
			<Icon data-icon='Q' fz='xl'>Q.</Icon>
			<AccordionLabel>
				Lorem question 2 ロレム・イプサムの座り雨、トマ好き学習エリット？
			</AccordionLabel>
			<AccordionIcon />
		</AccordionHeader>
		<AccordionBody p="box">
			<p>
				ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。クピダタットのつるの痛みになりたい宿題に、批判されてきたら痛み、マグナ逃亡しても結果の喜びを生成しません。先例クピダタットブラックは先例していない、つまり、彼らはあなたの悩みに責任がある人の、一般的な義務を捨て、魂を癒しています。
			</p>
		</AccordionBody>
	</Accordion>
</AccordionGroup>

Container Pricemenu