Bootstrap 5
Accordions
Materiel Design
Template
Html
Integration Accordions
Dashboard
Accordions Materiel Design optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Accordions Materiel Design 2026 23040042 | AngularForAll</title>
<!-- Material Symbols & Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Material Web Components -->
<script type="importmap">
{
"imports": {
"@material/web/": "https://esm.run/@material/web/"
}
}
</script>
<script type="module">
import '@material/web/all.js';
import { styles as typescaleStyles } from '@material/web/typography/md-typescale-styles.js';
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(145deg, #faf9fe 0%, #f0edf7 100%);
min-height: 100vh;
padding: 2.5rem 1.5rem;
}
.display-font {
font-family: 'Outfit', sans-serif;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
/* En-tête Material */
.header {
margin-bottom: 3.5rem;
text-align: center;
}
.header h1 {
font-family: 'Outfit', sans-serif;
font-size: 3.5rem;
font-weight: 700;
background: linear-gradient(135deg, #1a1a2e 0%, #6750a4 50%, #b3261e 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
}
.header-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #6750a4, #9c4040);
color: white;
padding: 0.6rem 2rem;
border-radius: 100px;
font-weight: 500;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(103, 80, 164, 0.3);
}
/* Grille d'accordéons */
.accordion-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 2rem;
}
/* Cartes Material Design */
.material-card {
background: #fff;
border-radius: 28px;
padding: 1.5rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 0 0 1px rgba(103, 80, 164, 0.04);
transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
position: relative;
overflow: hidden;
}
.material-card:hover {
box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(103, 80, 164, 0.1);
transform: translateY(-4px);
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(103, 80, 164, 0.1);
}
.card-number {
width: 40px;
height: 40px;
border-radius: 16px;
background: linear-gradient(135deg, #6750a4, #9c4040);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.1rem;
box-shadow: 0 6px 12px rgba(103, 80, 164, 0.25);
}
.card-header h2 {
font-family: 'Outfit', sans-serif;
font-size: 1.5rem;
font-weight: 600;
color: #1a1a2e;
letter-spacing: -0.01em;
}
/* Conteneur d'accordéon personnalisé */
.custom-accordion {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Styles pour les différents designs d'accordéons */
.accordion-item-custom {
border-radius: 16px;
overflow: hidden;
transition: all 0.2s;
}
/* Design 1 : Élévation */
.elevated-accordion .accordion-item-custom {
background: #f8f5ff;
border: 1px solid rgba(103, 80, 164, 0.15);
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
/* Design 2 : Outline */
.outline-accordion .accordion-item-custom {
background: transparent;
border: 1.5px solid #e0d8f0;
}
/* Design 3 : Filled */
.filled-accordion .accordion-item-custom {
background: #6750a4;
}
/* Design 4 : Tonal */
.tonal-accordion .accordion-item-custom {
background: #e8def8;
}
/* Design 5 : Dynamic Color */
.dynamic-accordion .accordion-item-custom {
background: linear-gradient(135deg, #fff0f0, #f0f0ff);
border-left: 4px solid #b3261e;
}
/* Design 6 : Surface */
.surface-accordion .accordion-item-custom {
background: #fef7ff;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* Design 7 : Inverse */
.inverse-accordion .accordion-item-custom {
background: #1a1a2e;
}
/* Design 8 : Gradient */
.gradient-accordion .accordion-item-custom {
background: linear-gradient(135deg, #ffffff, #faf5ff);
border: 1px solid #e9d5ff;
}
/* Design 9 : Minimal */
.minimal-accordion .accordion-item-custom {
background: transparent;
border-bottom: 1px solid #e0e0e0;
border-radius: 0;
}
/* Design 10 : Playful */
.playful-accordion .accordion-item-custom {
background: #fff9e6;
border-radius: 24px 8px 24px 8px;
border: 2px solid #ffb74d;
}
/* Contenu des accordéons */
.accordion-summary {
padding: 1rem 1.25rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
transition: background 0.2s;
}
.accordion-summary:hover {
background: rgba(103, 80, 164, 0.08);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.2, 0, 0, 1);
padding: 0 1.25rem;
}
.accordion-content-inner {
padding: 0 0 1.25rem 0;
color: #49454f;
font-size: 0.95rem;
line-height: 1.5;
}
/* Checkbox personnalisée */
.accordion-toggle {
display: none;
}
.accordion-toggle:checked ~ .accordion-content {
max-height: 200px;
}
.accordion-toggle:checked ~ .accordion-summary .material-icons {
transform: rotate(180deg);
}
.accordion-summary .material-icons {
transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
color: #6750a4;
}
/* Couleurs spécifiques par design */
.filled-accordion .accordion-summary {
color: white;
}
.filled-accordion .accordion-summary .material-icons {
color: white;
}
.filled-accordion .accordion-content-inner {
color: rgba(255,255,255,0.9);
}
.tonal-accordion .accordion-summary {
color: #1d192b;
}
.inverse-accordion .accordion-summary {
color: #e0d8f0;
}
.inverse-accordion .accordion-summary .material-icons {
color: #d0bcff;
}
.inverse-accordion .accordion-content-inner {
color: #c4b5fd;
}
.minimal-accordion .accordion-summary {
padding-left: 0;
padding-right: 0;
}
.minimal-accordion .accordion-content {
padding-left: 0;
padding-right: 0;
}
/* Chips décoratifs */
.chip-deco {
display: inline-flex;
align-items: center;
background: rgba(103, 80, 164, 0.1);
padding: 0.25rem 0.75rem;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 500;
margin-left: 0.75rem;
}
/* Icônes dans les résumés */
.summary-icon {
margin-right: 12px;
font-size: 1.25rem;
}
.summary-text {
display: flex;
align-items: center;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<!-- En-tête -->
<div class="header">
<h1>Material Accordions 3</h1>
<div class="header-badge">
<span class="material-icons">auto_awesome</span>
10 designs · Google Material Web
<span class="material-icons">auto_awesome</span>
</div>
</div>
<!-- Grille d'accordéons -->
<div class="accordion-grid">
<!-- 1. Élévation (Elevated) -->
<div class="material-card">
<div class="card-header">
<span class="card-number">1</span>
<h2>Élévation</h2>
</div>
<div class="custom-accordion elevated-accordion">
<div class="accordion-item-custom">
<input type="checkbox" id="elev1" class="accordion-toggle" checked>
<label for="elev1" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">inventory_2</span>
Collection Surface
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Les surfaces élevées créent une hiérarchie visuelle naturelle. Ombre douce et profondeur subtile.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="elev2" class="accordion-toggle">
<label for="elev2" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">layers</span>
Niveaux d'élévation
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Material Design définit 5 niveaux d'élévation pour organiser l'interface utilisateur.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="elev3" class="accordion-toggle">
<label for="elev3" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">shadow</span>
Système d'ombres
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Les ombres sont calculées dynamiquement pour simuler l'éclairage naturel.
</div>
</div>
</div>
</div>
</div>
<!-- 2. Outline -->
<div class="material-card">
<div class="card-header">
<span class="card-number">2</span>
<h2>Outline</h2>
</div>
<div class="custom-accordion outline-accordion">
<div class="accordion-item-custom">
<input type="checkbox" id="out1" class="accordion-toggle" checked>
<label for="out1" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">crop_free</span>
Contours précis
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Style épuré avec bordures définies. Idéal pour les interfaces denses en informations.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="out2" class="accordion-toggle">
<label for="out2" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">border_color</span>
États interactifs
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Les bordures changent de couleur au survol et à la sélection pour un feedback clair.
</div>
</div>
</div>
</div>
</div>
<!-- 3. Filled -->
<div class="material-card">
<div class="card-header">
<span class="card-number">3</span>
<h2>Filled</h2>
</div>
<div class="custom-accordion filled-accordion">
<div class="accordion-item-custom">
<input type="checkbox" id="fill1" class="accordion-toggle" checked>
<label for="fill1" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">square</span>
Surface pleine
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Arrière-plan solide avec couleur primaire. Fort contraste pour une lisibilité maximale.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="fill2" class="accordion-toggle">
<label for="fill2" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">opacity</span>
Opacité contrôlée
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Variations d'opacité pour les états hover, focus et pressed selon Material 3.
</div>
</div>
</div>
</div>
</div>
<!-- 4. Tonal -->
<div class="material-card">
<div class="card-header">
<span class="card-number">4</span>
<h2>Tonal</h2>
</div>
<div class="custom-accordion tonal-accordion">
<div class="accordion-item-custom">
<input type="checkbox" id="ton1" class="accordion-toggle" checked>
<label for="ton1" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">palette</span>
Couleur tonale
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Utilisation de la palette secondaire avec une faible saturation pour un look doux.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="ton2" class="accordion-toggle">
<label for="ton2" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">blender</span>
Harmonie visuelle
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
S'intègre parfaitement avec d'autres composants sans créer de conflit visuel.
</div>
</div>
</div>
</div>
</div>
<!-- 5. Dynamic Color -->
<div class="material-card">
<div class="card-header">
<span class="card-number">5</span>
<h2>Dynamic</h2>
</div>
<div class="custom-accordion dynamic-accordion">
<div class="accordion-item-custom">
<input type="checkbox" id="dyn1" class="accordion-toggle" checked>
<label for="dyn1" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">auto_awesome</span>
Material You
<span class="chip-deco">Nouveau</span>
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Couleurs générées dynamiquement à partir du fond d'écran de l'utilisateur (Android 12+).
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="dyn2" class="accordion-toggle">
<label for="dyn2" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">color_lens</span>
Schémas adaptatifs
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Adaptation automatique au thème système (clair/sombre) avec transitions fluides.
</div>
</div>
</div>
</div>
</div>
<!-- 6. Surface -->
<div class="material-card">
<div class="card-header">
<span class="card-number">6</span>
<h2>Surface</h2>
</div>
<div class="custom-accordion surface-accordion">
<div class="accordion-item-custom">
<input type="checkbox" id="surf1" class="accordion-toggle" checked>
<label for="surf1" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">dashboard</span>
Surface Container
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Conteneur de surface Material 3 avec couleur de fond légèrement teintée.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="surf2" class="accordion-toggle">
<label for="surf2" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">invert_colors</span>
Teinte de surface
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Mélange subtil de la couleur primaire dans le fond pour une cohérence visuelle.
</div>
</div>
</div>
</div>
</div>
<!-- 7. Inverse -->
<div class="material-card">
<div class="card-header">
<span class="card-number">7</span>
<h2>Inverse</h2>
</div>
<div class="custom-accordion inverse-accordion">
<div class="accordion-item-custom">
<input type="checkbox" id="inv1" class="accordion-toggle" checked>
<label for="inv1" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">dark_mode</span>
Surface sombre
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Version inverse pour les thèmes sombres. Contraste optimisé pour la lisibilité.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="inv2" class="accordion-toggle">
<label for="inv2" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">contrast</span>
Contraste élevé
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Conforme aux normes d'accessibilité WCAG AAA pour le contraste des couleurs.
</div>
</div>
</div>
</div>
</div>
<!-- 8. Gradient -->
<div class="material-card">
<div class="card-header">
<span class="card-number">8</span>
<h2>Gradient</h2>
</div>
<div class="custom-accordion gradient-accordion">
<div class="accordion-item-custom">
<input type="checkbox" id="grad1" class="accordion-toggle" checked>
<label for="grad1" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">gradient</span>
Dégradé subtil
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Dégradés légers pour ajouter de la profondeur sans compromettre la lisibilité.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="grad2" class="accordion-toggle">
<label for="grad2" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">water_drop</span>
Fluidité visuelle
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Transitions de couleurs fluides pour une expérience utilisateur apaisante.
</div>
</div>
</div>
</div>
</div>
<!-- 9. Minimal -->
<div class="material-card">
<div class="card-header">
<span class="card-number">9</span>
<h2>Minimal</h2>
</div>
<div class="custom-accordion minimal-accordion">
<div class="accordion-item-custom">
<input type="checkbox" id="min1" class="accordion-toggle" checked>
<label for="min1" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">minimize</span>
Réduction maximale
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Uniquement l'essentiel. Séparateurs fins et espacement généreux.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="min2" class="accordion-toggle">
<label for="min2" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">vertical_align_center</span>
Lisibilité pure
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Aucune distraction visuelle. Focus total sur le contenu textuel.
</div>
</div>
</div>
</div>
</div>
<!-- 10. Playful -->
<div class="material-card">
<div class="card-header">
<span class="card-number">10</span>
<h2>Playful</h2>
</div>
<div class="custom-accordion playful-accordion">
<div class="accordion-item-custom">
<input type="checkbox" id="play1" class="accordion-toggle" checked>
<label for="play1" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">celebration</span>
Ludique & Joyeux
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Design arrondi et asymétrique pour une expérience plus décontractée et amusante.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="play2" class="accordion-toggle">
<label for="play2" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">toys</span>
Approche créative
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
Parfait pour les applications éducatives, enfants ou créatives. Couleurs vives.
</div>
</div>
</div>
<div class="accordion-item-custom">
<input type="checkbox" id="play3" class="accordion-toggle">
<label for="play3" class="accordion-summary">
<span class="summary-text">
<span class="material-icons summary-icon">emoji_emotions</span>
Émotion positive
</span>
<span class="material-icons">expand_more</span>
</label>
<div class="accordion-content">
<div class="accordion-content-inner">
L'interface peut exprimer de la personnalité tout en restant fonctionnelle.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Section de démonstration Material Web Components natifs -->
<div style="margin-top: 3rem;">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
<span class="material-icons" style="color: #6750a4;">component_exchange</span>
<h3 style="font-family: 'Outfit', sans-serif; font-weight: 600; color: #1a1a2e;">Composants Material Web natifs</h3>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
<!-- Accordéon natif Material -->
<div style="background: white; border-radius: 24px; padding: 1.5rem; box-shadow: 0 4px 16px rgba(0,0,0,0.04);">
<h4 style="margin-bottom: 1rem; font-weight: 500; color: #49454f;"><md-list> accordéon</h4>
<md-list>
<md-list-item type="button" class="accordion-trigger">
<span slot="headline">Paramètres de confidentialité</span>
<span slot="supporting-text">Gérez vos données personnelles</span>
<md-icon slot="end">expand_more</md-icon>
</md-list-item>
<md-list-item type="button" class="accordion-trigger">
<span slot="headline">Notifications</span>
<span slot="supporting-text">Personnalisez vos alertes</span>
<md-icon slot="end">expand_more</md-icon>
</md-list-item>
</md-list>
</div>
<!-- Autre variante native -->
<div style="background: white; border-radius: 24px; padding: 1.5rem; box-shadow: 0 4px 16px rgba(0,0,0,0.04);">
<h4 style="margin-bottom: 1rem; font-weight: 500; color: #49454f;"><md-elevation> surfaces</h4>
<div style="display: flex; flex-direction: column; gap: 12px;">
<md-elevated-button style="width: 100%; --md-elevated-button-container-height: 48px;">
<span slot="leading-icon">⬇️</span>
Télécharger les données
</md-elevated-button>
<md-filled-tonal-button style="width: 100%;">
<span slot="leading-icon">📊</span>
Exporter rapport
</md-filled-tonal-button>
<md-outlined-button style="width: 100%;">
<span slot="leading-icon">⚙️</span>
Configuration
</md-outlined-button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div style="margin-top: 4rem; padding-top: 2rem; text-align: center; border-top: 1px solid rgba(103, 80, 164, 0.15);">
<p style="color: #6750a4; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;">
<span class="material-icons">auto_awesome</span>
<span>10 designs d'accordéons Material Design 3 · Google Material Web Components · Design moderne et unique</span>
<span class="material-icons">auto_awesome</span>
</p>
</div>
</div>
<script type="module">
// Animation supplémentaire pour les accordéons natifs Material
document.querySelectorAll('.accordion-trigger').forEach((item, index) => {
let isExpanded = false;
item.addEventListener('click', () => {
isExpanded = !isExpanded;
const icon = item.querySelector('md-icon');
if (icon) {
icon.style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0deg)';
icon.style.transition = 'transform 0.3s';
}
// Simuler l'expansion (dans une vraie app, on afficherait le contenu)
const supporting = item.querySelector('[slot="supporting-text"]');
if (isExpanded) {
supporting.textContent = 'Cliquez pour réduire • Contenu développé';
} else {
const originalTexts = ['Gérez vos données personnelles', 'Personnalisez vos alertes'];
supporting.textContent = originalTexts[index] || 'Contenu réduit';
}
});
});
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur