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.
92 lines (88 loc) • 7.27 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MICL Cards</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=dark_mode&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">
</head>
<body class="light">
<div class="headline">
<h1 class="md-sys-typescale-emphasized-display-small">Cards</h1>
<div id="settings-placeholder"></div>
</div>
<div class="cards">
<div class="micl-card-elevated" tabindex="0">
<div class="micl-card__headline-s">
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
</div>
<p class="micl-card__subhead">Dummy or placeholder text</p>
<p class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</p>
<div class="micl-card__content">
<p class="md-sys-typescale-body-small">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>
</div>
<div class="micl-card-filled" tabindex="0">
<div class="micl-card__headline-m">
<h2>Lorem ipsum</h2>
</div>
<p class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</p>
<div class="micl-card__content">
<p class="md-sys-typescale-body-medium">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>
</div>
<div class="micl-card-outlined">
<div class="micl-card__headline-l">
<h2>Lorem</h2>
</div>
<div class="micl-card__content">
<p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames. Feugiat donec magnis fusce elementum dis imperdiet velit convallis eget, maecenas sed sem lectus class facilisis posuere sociosqu, himenaeos taciti habitant orci senectus bibendum dignissim cursus.</p>
</div>
</div>
<details class="micl-card-elevated">
<summary>
<img alt="holiday" class="micl-card__image" src="card-holiday.webp">
<span class="micl-card__headline-s">
<span class="micl-heading">Lorem ipsum dolor sit amet consectetur adipiscing elit</span>
</span>
<span class="micl-card__subhead">Dummy or placeholder text</span>
<span class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</span>
</summary>
<div class="micl-card__content" style="padding:0">
<p class="md-sys-typescale-body-small" style="margin:16px">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>
<hr class="micl-divider">
<button type="button" class="micl-button-text-s">Share</button>
</div>
</details>
<details class="micl-card-filled">
<summary>
<img alt="cabinet" class="micl-card__image" src="card-cabinet.webp">
<span class="micl-card__headline-m">
<span class="micl-heading">Lorem ipsum</span>
</span>
<span class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</span>
</summary>
<div class="micl-card__content">
<p class="md-sys-typescale-body-medium">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 class="micl-card-outlined">
<summary>
<img alt="city" class="micl-card__image" src="card-city.webp">
<span class="micl-card__headline-l">
<span class="micl-heading">Lorem</span>
</span>
</summary>
<div class="micl-card__content">
<p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames. Feugiat donec magnis fusce elementum dis imperdiet velit convallis eget, maecenas sed sem lectus class facilisis posuere sociosqu, himenaeos taciti habitant orci senectus bibendum dignissim cursus.</p>
</div>
</details>
</div>
<script src="micl.js"></script>
<script src="docs.js"></script>
</body>
</html>