material-inspired-component-library
Version:
The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.
286 lines (281 loc) • 21 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MICL Accordions</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,person,search,settings&display=block">
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
<link rel="stylesheet" href="micl.css">
<link rel="stylesheet" href="docs.css">
<style>
.micl-card__content {
display: flex;
flex-direction: column;
row-gap: 8px;
padding-block: 16px;
}
</style>
</head>
<body class="light">
<div class="headline">
<h1 class="md-sys-typescale-emphasized-display-small">Accordions</h1>
<div id="settings-placeholder"></div>
</div>
<div class="cards">
<div class="micl-card-elevated">
<div class="micl-card__content">
<div class="micl-list" role="listbox">
<details name="accordion1">
<summary class="micl-list-item-one">
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Headline 1</span>
</span>
</summary>
<div class="micl-list-item__content">
<p class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
</div>
</details>
<details name="accordion1">
<summary class="micl-list-item-one" tabindex="-1">
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Headline 2</span>
</span>
</summary>
<div class="micl-list-item__content">
<p class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
</div>
</details>
</div>
<div class="micl-list" role="listbox">
<details name="accordion2">
<summary class="micl-list-item-two">
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Marie Curie</span>
<span class="micl-list-item__supporting-text">The name of the employee</span>
</span>
</summary>
<div class="micl-list-item__content" style="padding-block:16px">
<div class="micl-textfield-filled">
<label for="tf1">Name</label>
<input type="text" id="tf1" value="Marie Curie">
</div>
</div>
</details>
<details name="accordion2">
<summary class="micl-list-item-two" tabindex="-1">
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Country</span>
<span class="micl-list-item__supporting-text">The country of residence</span>
</span>
</summary>
<div class="micl-list-item__content" style="padding-block:16px">
<div class="micl-textfield-filled">
<label for="tf2">Country</label>
<input type="text" id="tf2" value="France">
</div>
</div>
</details>
</div>
<div class="micl-list" role="listbox">
<details name="accordion3">
<summary class="micl-list-item-three">
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Headline 1</span>
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
</span>
</summary>
<div class="micl-list-item__content">
<p class="md-sys-typescale-body-small" style="color:var(--md-sys-color-on-surface)">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.</p>
</div>
</details>
<details name="accordion3">
<summary class="micl-list-item-three" tabindex="-1">
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Headline 2</span>
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
</span>
</summary>
<div class="micl-list-item__content">
<p class="md-sys-typescale-body-small" style="color:var(--md-sys-color-on-surface)">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.</p>
</div>
</details>
</div>
</div>
</div>
<div class="micl-card-filled">
<div class="micl-card__content">
<div class="micl-list" role="listbox">
<details name="accordion4">
<summary class="micl-list-item-one">
<span class="material-symbols-outlined micl-list-item__icon">search</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Date</span>
</span>
</summary>
<div class="micl-list-item__content" style="padding-block:16px">
<div class="micl-textfield-outlined">
<label for="tf3">Date</label>
<input type="date" id="tf3" value="2025-11-01">
</div>
</div>
</details>
<details name="accordion4">
<summary class="micl-list-item-one" tabindex="-1">
<span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Time</span>
</span>
</summary>
<div class="micl-list-item__content" style="padding-block:16px">
<div class="micl-textfield-outlined">
<label for="tf4">Time</label>
<input type="time" id="tf4" value="13:22">
</div>
</div>
</details>
</div>
<div class="micl-list" role="listbox">
<details name="accordion5">
<summary class="micl-list-item-two">
<span class="material-symbols-outlined micl-list-item__icon">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" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
</div>
</details>
<details name="accordion5">
<summary class="micl-list-item-two micl-list-item--disabled" tabindex="-1">
<span class="material-symbols-outlined micl-list-item__icon">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" style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
</div>
</details>
</div>
<div class="micl-list" role="listbox">
<details name="accordion6">
<summary class="micl-list-item-three">
<span class="material-symbols-outlined micl-list-item__icon">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 that is long enough to fill up multiple lines</span>
</span>
</summary>
<div class="micl-list-item__content">
<p style="color:var(--md-sys-color-on-surface-variant)">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.</p>
</div>
</details>
<details name="accordion6">
<summary class="micl-list-item-three" tabindex="-1">
<span class="material-symbols-outlined micl-list-item__icon">confirmation_number</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 that is long enough to fill up multiple lines</span>
</span>
</summary>
<div class="micl-list-item__content">
<p style="color:var(--md-sys-color-on-surface-variant)">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.</p>
</div>
</details>
</div>
</div>
</div>
<div class="micl-card-outlined">
<div class="micl-card__content">
<div class="micl-list" role="listbox">
<details name="accordion7">
<summary class="micl-list-item-one">
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Large_cloud_over_Mexican_landscape.jpg/330px-Large_cloud_over_Mexican_landscape.jpg)"></span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Headline 1</span>
</span>
<span class="micl-list-item__trailing-text">39</span>
</summary>
<div class="micl-list-item__content">
<p style="font-family:Consolas;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
</div>
</details>
<details name="accordion7">
<summary class="micl-list-item-one" tabindex="-1">
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg/330px-Old_World_swallowtail_%28Papilio_machaon_gorganus%29_underside_Italy.jpg)"></span>
<span class="micl-list-item__text">
<span class="micl-list-item__headline">Headline 2</span>
</span>
<span class="micl-list-item__trailing-text">24</span>
</summary>
<div class="micl-list-item__content">
<p style="font-family:cursive;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
</div>
</details>
</div>
<div class="micl-list" role="listbox">
<details name="accordion8">
<summary class="micl-list-item-two">
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/San_Juan_River_at_Pagosa_Springs_with_balloons.jpg/330px-San_Juan_River_at_Pagosa_Springs_with_balloons.jpg)"></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>
<span class="micl-list-item__trailing-text">waiting</span>
</summary>
<div class="micl-list-item__content">
<p style="font-family:'Courier New';color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
</div>
</details>
<details name="accordion8">
<summary class="micl-list-item-two" tabindex="-1">
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Bhotaigaon_gaolia_khel%2C_rajohua_namghar.jpg/330px-Bhotaigaon_gaolia_khel%2C_rajohua_namghar.jpg)"></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>
<span class="micl-list-item__trailing-text">completed</span>
</summary>
<div class="micl-list-item__content">
<p style="font-family:Helvetica;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
</div>
</details>
</div>
<div class="micl-list micl-list__divider" role="listbox">
<details name="accordion9">
<summary class="micl-list-item-three">
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/N1015X_Air_Tahiti_Nui_Boeing_787-9_Dreamliner_26.jpg/330px-N1015X_Air_Tahiti_Nui_Boeing_787-9_Dreamliner_26.jpg)"></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 that is long enough to fill up multiple lines</span>
</span>
</summary>
<div class="micl-list-item__content">
<p style="font-family:fantasy;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
</div>
</details>
<details name="accordion9">
<summary class="micl-list-item-three" tabindex="-1">
<span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/1928_Model_A_Ford.jpg/330px-1928_Model_A_Ford.jpg)"></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 that is long enough to fill up multiple lines</span>
</span>
</summary>
<div class="micl-list-item__content">
<p style="font-family:Garamond;color:var(--md-sys-color-on-surface-variant)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent.</p>
</div>
</details>
</div>
</div>
</div>
</div>
<script src="micl.js"></script>
<script src="docs.js"></script>
</body>
</html>