Price

Gestion du format des prix.

Périodicité et mention

Aperçu

Mode responsive

143 €⁽³⁾ HT/mois

                                                                <div class="price" itemprop="price" content="143">
                                        <span class="price-main">143</span>
                                        <span class="price-details">
                                            <span class="currency" itemprop="priceCurrency" content="EUR">€<sup>(3)</sup></span>
                                            <span class="period">HT/mois</span>
                                        </span>
                                    </div>
                
                                    <div class="price is-main-price" itemprop="price" content="143">
                                        <span class="price-main">143</span>
                                        <span class="price-details">
                                            <span class="currency" itemprop="priceCurrency" content="EUR">€<sup>(3)</sup></span>
                                            <span class="period">HT/mois</span>
                                        </span>
                                    </div>

Aperçu avec un fond

Mode responsive

143 €⁽³⁾ HT/mois

                                                                <div class="price is-inverted" itemprop="price" content="143">
                                        <span class="price-main">143</span>
                                        <span class="price-details">
                                            <span class="currency" itemprop="priceCurrency" content="EUR">€<sup>(3)</sup></span>
                                            <span class="period">HT/mois</span>
                                        </span>
                                    </div>

DO

Voir l'exemple ci-dessus

Pour la couleur de la marque, utilisez la classe .is-main-price.
Lorsqu'un prix se trouve dans un bloc à fond coloré, alors il faut lui ajouter la classe .is-inverted.

Prix avec label

Aperçu

Mode responsive

A partir de

143 €⁽³⁾ HT/mois

A partir de

143 €⁽³⁾ HT/mois

                                                                <div class="columns">
                                        <div class="column is-6">
                                            <div class="rows has-text-centered">
                                                <div class="row is-paddingless">
                                                    <p class="text is-4">A partir de</p>
                                                </div>
                                                <div class="row is-paddingless">
                                                    <div class="price is-centered" itemprop="price" content="143">
                                                        <span class="price-main">143</span>
                                                        <span class="price-details">
                                                            <span class="currency" itemprop="priceCurrency" content="EUR">€<sup>(3)</sup></span>
                                                            <span class="period">HT/mois</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="column is-6">
                                            <div class="rows has-text-centered">
                                                <div class="row is-paddingless">
                                                    <p class="text is-4 has-text-secondary">A partir de</p>
                                                </div>
                                                <div class="row is-paddingless">
                                                    <div class="price is-main-price">
                                                        <span class="price-main">143</span>
                                                        <span class="price-details">
                                                            <span class="currency" itemprop="priceCurrency" content="EUR">€<sup>(3)</sup></span>
                                                            <span class="period">HT/mois</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

Aperçu avec un fond

Mode responsive

A partir de

143 €⁽³⁾ HT/mois

A partir de

143 €⁽³⁾ HT/mois

                                                                <div class="rows has-text-centered">
                                        <div class="row is-paddingless">
                                            <p class="text is-4 is-inverted">A partir de</p>
                                        </div>
                                        <div class="row is-paddingless">
                                            <div class="price is-inverted">
                                                <span class="price-main">143</span>
                                                <span class="price-details">
                                                    <span class="currency" itemprop="priceCurrency" content="EUR">€<sup>(3)</sup></span>
                                                    <span class="period">HT/mois</span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

DO

Voir l'exemple ci-dessus

Pour la couleur de la marque, utilisez la classe .is-main-price.
Lorsqu'un prix se trouve dans un bloc à fond coloré, alors il faut lui ajouter la classe .is-inverted, le prix deviendra alors blanc.

Code de base

• Le prix principal (hors centimes) s'insère dans .price-main
• Ajoutez des détails avec .price-details qui accueillera le nombre de centimes, le régime de TVA, la périodicité, etc.
• Sur fond de couleur, la classe is-inverted permettra d'inverser la couleur du prix pour l'accorder à l'arrière-plan.

Aperçu

Mode responsive

24 €99 /mois

                                                            <div class="price" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>

Aperçu avec un fond

Mode responsive

24 €99 /mois

                                                            <div class="price is-inverted" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>

Couleur de la marque

La facette is-main-price donnera au composant la couleur de la marque

Aperçu

Mode responsive

24 €99⁽³⁾ HT/mois

                                                            <div class="price is-main-price" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99<sup>(3)</sup></span>
                                        <span class="period">HT/mois</span>
                                    </span>
                                </div>

Surtitre

La facette has-suptitle permettra au composant d'accueillir un surtitre qui viendra se situer avant le prix. Ce surtitre possèdera la classe price-suptitle.

Aperçu

Mode responsive

à partir de 24 €99⁽³⁾ HT/mois

                                                            <div class="price has-suptitle" itemprop="price" content="24.99">
                                    <span class="price-suptitle">à partir de</span>
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99<sup>(3)</sup></span>
                                        <span class="period">HT/mois</span>
                                    </span>
                                </div>

Avec exposant

La balise sup sera automatiquement alignée

Aperçu

Mode responsive

24 €99⁽³⁾ HT/mois

                                                            <div class="price" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99<sup>(3)</sup></span>
                                        <span class="period">HT/mois</span>
                                    </span>
                                </div>

Avec icone

Ajoutez la facette .has-description pour aligner correctement l'icône.

Aperçu

Mode responsive

24 €99 /mois

                                                            <div class="price has-description" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents">
                                            <span><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                            <span class="icon">
                                                <i class="tri-infos-circle" aria-hidden="true"></i>
                                            </span>
                                        </span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>

Tailles

Des facettes vous permettent d'influer sur la taille de la police.

Aperçu

Mode responsive

24 €99 /mois

                                                            <div class="price is-huge" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>
                                <div class="price is-1" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>
                                <div class="price is-2" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>
                                <div class="price is-3" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>
                                <div class="price is-4" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>
                                <div class="price is-5" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>
                                <div class="price is-6" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>

WARNING

La taille par défaut d'un prix équivaut à .is-3. Pour vous assurer que votre prix sera toujours de niveau 3, vous devriez utilisez cette facette, dans le cas où la taille par défaut évolue un jour.

Barré

Aperçu

Mode responsive

24 €99

                                                            <div class="price is-1 is-striked" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                    </span>
                                </div>

Sur une même ligne

La taille de la police est identique partout et l'ensemble est aligné sur une seule ligne.

Aperçu

Mode responsive

24 €99 /mois

                                                            <div class="price is-inlined" itemprop="price" content="24.99">
                                    <span class="price-main">24</span>
                                    <span class="price-details">
                                        <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                        <span class="period">/mois</span>
                                    </span>
                                </div>