Headline 1
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.
Headline 2
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.
Marie Curie The name of the employee
Country The country of residence
Headline 1 Supporting text that is long enough to fill up multiple lines
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.
Headline 2 Supporting text that is long enough to fill up multiple lines
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.
Date
Time
Headline 1 Supporting text 1
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.
Headline 2 Supporting text 2
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.
Headline 1 Supporting text that is long enough to fill up multiple lines
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.
Headline 2 Supporting text that is long enough to fill up multiple lines
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.
Headline 1 39
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.
Headline 2 24
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.
Headline 1 Supporting text 1 waiting
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.
Headline 2 Supporting text 2 completed
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.
Headline 1 Supporting text that is long enough to fill up multiple lines
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.
Headline 2 Supporting text that is long enough to fill up multiple lines
Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.
Code example
<div class="micl-list" role="listbox">
<details name="accordion">
<summary class="micl-list-item-two">
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Headline 1</span>
<span class="micl-list-item__supporting-text">Supporting text 1</span>
</span>
</summary>
<div class="micl-list-item__content">
<p class="md-sys-typescale-body-medium">Lorem ipsum.</p>
</div>
</details>
<hr class="micl-divider">
<details name="accordion">
<summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1">
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Headline 2</span>
<span class="micl-list-item__supporting-text">Supporting text 2</span>
</span>
</summary>
<div class="micl-list-item__content">
<p class="md-sys-typescale-body-medium">Lorem ipsum.</p>
</div>
</details>
</div>