SnippetUI
← Back to snippets

Section de cartes de fonctionnalités

Section de la carte d'introduction aux fonctionnalités pour les pages SaaS/de destination. Un composant d'interface utilisateur de carte avec une bordure de gradation qui brille doucement lorsqu'elle est survolée.

HTMLCSS

Aperçu

Six cartes de fonction sont disposées dans une grille et la bordure de gradation s’allume au survol.

Features

tout est ici

⚡

traitement à grande vitesse

Réponse en millisecondes.

🛡️

sécurité

Architecture zéro confiance.

📊

analytique

Informations en temps réel.

🤝

collaboration

En toute transparence en équipe.

🌍

mondiale

Disponible dans 148 pays à travers le monde.

🔧

personnalisation

Personnalisable pour s’adapter à votre marque.

Cas d’utilisation et fonctionnalités

  • SaaS/Landing Page : Une section d’introduction aux fonctions qui transmet clairement l’attrait du produit.

  • Aucun JavaScript requis : implémentation CSS pure incluant des effets de survol.

  • Code couleur par carte à l’aide de variables CSS : Gérez de manière centralisée la couleur de la bordure de chaque carte à l’aide de la variable --card-color.

  • Effet de bordure mask-composite : la bordure du dégradé apparaît clairement au survol.

Points de conception et d’UX

  1. Communication visuelle avec des icônes : Les icônes véhiculent instantanément le contenu de chaque carte.

  2. translateY(-4px) lift-up : Une sensation de volume exquise qui n’est pas trop profonde mais flotte légèrement.

  3. opacity: 0 → 1 border : La bordure qui apparaît pour la première fois au survol crée une expérience surprise.

Comment personnaliser

Modifiez le nombre de cartes : ajoutez/supprimez simplement les éléments .feat-card dans feat-grid.

changer la couleur de la bordure:


.feat-c1 { --card-color: #f97316; } /* orange */

Correction du nombre de colonnes de la grille:


.feat-grid { grid-template-columns: repeat(3, 1fr); }

##Code d’implémentation

<section class="feat-section">

<div class="feat-header">

  <div class="feat-eyebrow">Features</div>

  <h2 class="feat-title">tout est ici</h2>

</div>

<div class="feat-grid">

  <div class="feat-card feat-c1">

    <span class="feat-icon">⚡</span>

    <h3 class="feat-card-title">traitement à grande vitesse</h3>

    <p class="feat-card-desc">Réponse en millisecondes.</p>

  </div>

  <div class="feat-card feat-c2">

    <span class="feat-icon">🛡️</span>

    <h3 class="feat-card-title">sécurité</h3>

    <p class="feat-card-desc">Architecture zéro confiance.</p>

  </div>

  <div class="feat-card feat-c3">

    <span class="feat-icon">📊</span>

    <h3 class="feat-card-title">analytique</h3>

    <p class="feat-card-desc">Informations en temps réel.</p>

  </div>

  <div class="feat-card feat-c4">

    <span class="feat-icon">🤝</span>

    <h3 class="feat-card-title">collaboration</h3>

    <p class="feat-card-desc">En toute transparence en équipe.</p>

  </div>

  <div class="feat-card feat-c5">

    <span class="feat-icon">🌍</span>

    <h3 class="feat-card-title">mondiale</h3>

    <p class="feat-card-desc">Disponible dans 148 pays à travers le monde.</p>

  </div>

  <div class="feat-card feat-c6">

    <span class="feat-icon">🔧</span>

    <h3 class="feat-card-title">personnalisation</h3>

    <p class="feat-card-desc">Personnalisable pour s'adapter à votre marque.</p>

  </div>

</div>

</section>



<style>
.feat-section {

padding: 4rem 1rem;

font-family: system-ui, -apple-system, sans-serif;

color: white;

background: #0f172a;

box-sizing: border-box;

width: 100%;

}

.feat-section * { box-sizing: border-box; }

.feat-header {

text-align: center;

margin-bottom: 3rem;

}

.feat-eyebrow {

color: #6366f1;

font-weight: 600;

letter-spacing: 0.1em;

text-transform: uppercase;

margin-bottom: 0.5rem;

}

.feat-title {

font-size: 2.5rem;

font-weight: 800;

margin: 0;

}

.feat-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));

gap: 1.5rem;

max-width: 1000px;

margin: 0 auto;

}

.feat-card {

position: relative;

background: rgba(255, 255, 255, 0.03);

border-radius: 1rem;

padding: 2rem;

text-align: center;

transition: transform 0.3s ease;

z-index: 1;

}

.feat-card::before {

content: '';

position: absolute;

inset: 0;

border-radius: inherit;

padding: 2px;

background: linear-gradient(135deg, var(--card-color, #6366f1), transparent);

-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

opacity: 0;

transition: opacity 0.3s ease;

z-index: -1;

}

.feat-card:hover {

transform: translateY(-4px);

}

.feat-card:hover::before {

opacity: 1;

}

.feat-icon {

font-size: 2.5rem;

display: block;

margin-bottom: 1rem;

}

.feat-card-title {

font-size: 1.25rem;

font-weight: 600;

margin: 0 0 0.5rem;

}

.feat-card-desc {

color: #9ca3af;

margin: 0;

line-height: 1.5;

}



.feat-c1 { --card-color: #f97316; }

.feat-c2 { --card-color: #3b82f6; }

.feat-c3 { --card-color: #10b981; }

.feat-c4 { --card-color: #8b5cf6; }

.feat-c5 { --card-color: #ec4899; }

.feat-c6 { --card-color: #06b6d4; }
</style>

État de compatibilité du navigateur

| Navigateur | Statut de compatibilité |

|--------|-------|

| Chrome 80+ | ✅ Entièrement compatible |

| Firefox 99+ | ✅ Entièrement compatible |

| Safari 15.4+ | ✅Compatible |

| Bord 80+ | ✅ Entièrement compatible |