Composant Card - Default

Swap Component

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

Swap Component

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

Exemple sans sa partie wrapper-complementary

Swap Component

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

Exemple avec dans sa partie principale un link highlight

Swap Component

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

Swap Component

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

Exemple avec dans sa partie complementary un titre et un button chip.

Swap Component

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

Swap Component

Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.

          
            HTML
            


            PUG
            include ../../../mixins/swap-component.pug
.title-exemple 
  h4 Composant Card - Default
.card-version3
  .wrapper-principal
    .header
      .wrapper-title-buttons-group
        .title
          h2 Title
        .cta-group-version2.-horizontal.-align-right
          button.chip.-icon.-icon-with-text-md(type="button")
            i.maificon.maificon-trash(aria-hidden="true")
            span Button
      .subtitle
        p Subtitle
    .wrapper-content
      +swap-component
  .wrapper-complementary-version2 
    .wrapper-content
      +swap-component

.documentation-space 

.title-exemple 
  h4 Exemple sans sa partie wrapper-complementary
.card-version3
  .wrapper-principal
    .header
      .wrapper-title-buttons-group
        .title
          h2 Title
        .cta-group-version2.-horizontal.-align-right
          button.chip.-icon.-icon-with-text-md(type="button")
            i.maificon.maificon-trash(aria-hidden="true")
            span Button
          button.chip.-icon.-icon-with-text-md(type="button")
            i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
            span Button
      .subtitle
        p Subtitle
    .wrapper-content
      +swap-component

.documentation-space 

.title-exemple 
  h4 Exemple avec dans sa partie principale un link highlight
.card-version3
  .wrapper-principal
    .header
      .wrapper-title-buttons-group
        .title
          h2 Title
        .cta-group-version2.-horizontal.-align-right
          a.link.-highlight-icon Link
      .subtitle
        p Subtitle
    .wrapper-content
      +swap-component
  .wrapper-complementary-version2 
    .wrapper-content
      +swap-component

.documentation-space 

.title-exemple 
  h4 Exemple avec dans sa partie complementary un titre et un button chip.
.card-version3
  .wrapper-principal
    .header
      .wrapper-title-buttons-group
        .title
          h2 Title
        .cta-group-version2.-horizontal.-align-right
          button.chip.-icon.-icon-with-text-md(type="button")
            i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
            span Button
      .subtitle
        p Subtitle
    .wrapper-content
      +swap-component
  .wrapper-complementary-version2 
    .header
      .content 
        .title 
          h2 Titre du composant CardComplementary
      .cta-group-version2.-horizontal.-align-right
        button.chip.-icon.-icon-with-text-md(type="button")
          i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
          span Button
    .wrapper-content
      +swap-component