Source:
styles.scss
, line 49
6.1 details.default Details
Component can be used to create an interactive widget that the user can open and close. This allows to show additional details that the user can view or hide on demand.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a quam ut elit sodales scelerisque. Nunc dolor lorem, mattis quis risus pretium, pulvinar porta lorem. Nullam vestibulum lorem semper augue sagittis viverra. Aenean ac leo nec turpis tincidunt consequat. Quisque pellentesque metus sed mattis eleifend. Morbi blandit velit eget porta tempor. Etiam feugiat risus nec diam vestibulum porttitor. Duis consectetur, lorem vel ornare facilisis, urna tellus ultrices nibh, id convallis neque tortor ac augue. Praesent commodo lacus eu cursus feugiat. Duis id convallis arcu. Phasellus ante lacus, pharetra vitae consequat ac, finibus eget nisl.
Markup: components/details/details.twig
<details class="details {{ modifier_class }}">
<summary class="details__summary">{{ summary }}</summary>
<div>{{ content }}</div>
</details>
Source:
components/details/details.scss
, line 1