Concorde UI component — Card. Suffix Doc ID: core/components/ui/card/card. Keywords: Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html.

Card

Type

<div class="grid grid-cols-3 gap-3">
    <sonic-card type="base">Base</sonic-card>
    <sonic-card type="light">Light</sonic-card>
    <sonic-card type="primary">Primary</sonic-card>
    <sonic-card type="warning">Warning</sonic-card>
    <sonic-card type="danger">Danger</sonic-card>
    <sonic-card type="success">Success</sonic-card>
    <sonic-card type="info">Info</sonic-card>
    <sonic-card type="neutral">Neutral</sonic-card>
    <sonic-card type="invert">Invert</sonic-card>
  </div>

Header

<div class="grid grid-cols-1 gap-3">
    <sonic-card >
      <sonic-card-header label="Header simple, titre géré via l'attribut : label" description="Description via l'attribut : description">
      </sonic-card-header>
    </sonic-card>
    <sonic-card type="neutral">
      <sonic-card-header label="Header composé">
        <sonic-card-header-description>Description rendu via le composant : "sonic-card-header-description"</sonic-card-header-description>
        <div  slot="suffix" class="flex">
          Suffix
        </div>
      </sonic-card-header>
    </sonic-card>
    <sonic-card type="invert">
      <sonic-card-header>
        <div>Header custom</div>
        <div class="text-lg text-danger">Tout le contenu excepté l'icône ✈ passe par le slot du header</div>
        <span slot="suffix" >✈</span>
      </sonic-card-header>
    </sonic-card>
  </div>

Main

<sonic-card >
    <sonic-card-main >
      <h3>Main area</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ" title="Big Buck Bunny (Blender Foundation)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </sonic-card-main>
  </sonic-card>

Footer

<sonic-card >
    <sonic-card-footer >
      <div >
        <h4 class="mb-0">Footer area</h4>
        <small>Debitis deleniti eligendi natus dolorem aufdh.</small>
        <div>
          🛫 ✈ ✈ ✈ ✈ ✈ 🛬
        </div>
      </div>
    </sonic-card-footer>
  </sonic-card>

Example of use

<sonic-card >
    <sonic-card-header label="Header" description="Header description">
      <sonic-icon library="iconoir" name="nav-arrow-right" slot="suffix" ></sonic-icon>
    </sonic-card-header>
    <sonic-card-main >
      <sonic-image rounded ratio="11/4" src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg">
      </sonic-image>
      <p><b>Main</b> - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
    </sonic-card-main>
    <sonic-card-footer>
      <div>
        <i>Footer</i> - Amet consectetur adipisicing
      </div>
    </sonic-card-footer>
  </sonic-card>