Skip to content

Commit c77ee85

Browse files
Ricokolatristandasilva
Ricokola
authored and
tristandasilva
committed
Content - Panels and Badges: Create demo pages (wet-boew#2652)
1 parent 748f9a2 commit c77ee85

File tree

6 files changed

+786
-0
lines changed

6 files changed

+786
-0
lines changed

‎components/badges/badges-en.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
{
3+
"title": "Badges",
4+
"language": "en",
5+
"altLangPage": "badges-fr.html",
6+
"description": "Working examples of WET-BOEW Badges component",
7+
"dateModified": "2025-09-17"
8+
}
9+
---
10+
<div class="wb-prettify all-pre"></div>
11+
12+
<h2>Purpose</h2>
13+
<p>Use badges (numerical indicators) to highlight the number of updates, new or unread items associated with a link.</p>
14+
15+
<h2>Default</h2>
16+
<p>Use to highlight new or updated items with a simple grey numeric, or blue button-like badge.</p>
17+
<dl>
18+
<dt>Grey badge:</dt>
19+
<dd>
20+
<p><a href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p>
21+
</dd>
22+
<dt>Blue button-like badge:</dt>
23+
<dd>
24+
<p><a class="btn btn-primary" href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p>
25+
</dd>
26+
</dl>
27+
28+
<h3>Source code</h3>
29+
<dl>
30+
<dt>Grey badge:</dt>
31+
<dd><pre><code>&lt;p&gt;&lt;a href="#"&gt;Inbox &lt;span class="badge"&gt;42&lt;span class="wb-inv"&gt; unread emails&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;</code></pre></dd>
32+
<dt>Blue button-like badge:</dt>
33+
<dd><pre><code>&lt;p&gt;&lt;a class="btn btn-primary" href="#"&gt;Inbox &lt;span class="badge"&gt;42&lt;span class="wb-inv"&gt; unread emails&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;</code></pre></dd>
34+
</dl>
35+
36+
<h2>Self collapsing badges</h2>
37+
<p>Use when there are no new or unread items. Badges simply collapse (via <abbr title="cascading style sheet">CSS</abbr> <code>:empty</code> selector).</p>
38+
39+
<section class="alert alert-warning">
40+
<h3>Cross-browser compatibility</h3>
41+
<p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
42+
</section>
43+
44+
<dl>
45+
<dt>No content inside badge:</dt>
46+
<dd>
47+
<p><a href="#">Inbox <span class="badge"></span></a></p>
48+
</dd>
49+
</dl>
50+
51+
<h3>Source code</h3>
52+
<dl>
53+
<dt>No content inside badge</dt>
54+
<dd><pre><code>&lt;p&gt;&lt;a href="#"&gt;Inbox &lt;span class="badge"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;</code></pre></dd>
55+
</dl>
56+
57+
<h2>Reference</h2>
58+
<p><a href="https://wet-boew.github.io/wet-boew-styleguide/design/badges-en">Web Experience Toolkit Style Guide - Badges</a></p>

‎components/badges/badges-fr.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
{
3+
"title": "Badges",
4+
"language": "fr",
5+
"altLangPage": "badges-fr.html",
6+
"description": "Exemples pratiques de la composante Badges de la WET-BOEW",
7+
"dateModified": "2025-09-17"
8+
}
9+
---
10+
<div class="wb-prettify all-pre"></div>
11+
12+
<h2>Usage</h2>
13+
<p>Utilisez les badges (indicateurs numériques) afin de souligner le nombre de mises à jour, d'éléments nouveaux ou non lus associés à un lien.</p>
14+
15+
<h2>Valeur par défaut</h2>
16+
<p>Utiliser pour souligner des éléments nouveaux ou à jour avec un badge numérique simple gris ou bleu en forme de bouton.</p>
17+
<dl>
18+
<dt>Badge gris :</dt>
19+
<dd>
20+
<p><a href="#">Boîte de réception <span class="badge">42<span class="wb-inv"> courriels non lus</span></span></a></p>
21+
</dd>
22+
<dt>Badge bleu sous forme de bouton :</dt>
23+
<dd>
24+
<p><a class="btn btn-primary" href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p>
25+
</dd>
26+
</dl>
27+
28+
<h3>Source code</h3>
29+
<dl>
30+
<dt>Badge gris :</dt>
31+
<dd><pre><code>&lt;p&gt;&lt;a href="#"&gt;Boîte de réception &lt;span class="badge"&gt;42&lt;span class="wb-inv"&gt; courriels non lus&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;</code></pre></dd>
32+
<dt>Blue button-like badge :</dt>
33+
<dd><pre><code>&lt;p&gt;&lt;a class="btn btn-primary" href="#"&gt;Inbox &lt;span class="badge"&gt;42&lt;span class="wb-inv"&gt; unread emails&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;</code></pre></dd>
34+
</dl>
35+
36+
<h2>Badges qui se réduisent seuls</h2>
37+
<p>Utilisez-les lorsqu'il n'y a aucun élément nouveau ou non lu. Les badges se réduisent simplement (au moyen du <code>sélecteur empty</code> du <abbr title="feuille de style en cascade">CSS</abbr>).</p>
38+
39+
<section class="alert alert-warning">
40+
<h3>Compatibilité multinavigateur</h3>
41+
<p>Les badges ne se réduiront pas seuls dans Internet Explorer 8 parce qu'il manque de soutien pour le sélecteur <code>:empty</code>.</p>
42+
</section>
43+
44+
<dl>
45+
<dt>Aucun contenu à l'intérieur du badge :</dt>
46+
<dd>
47+
<p><a href="#">Boîte de réception <span class="badge"></span></a></p>
48+
</dd>
49+
</dl>
50+
51+
<h3>Source code</h3>
52+
<dl>
53+
<dt>Aucun contenu à l'intérieur du badge :</dt>
54+
<dd><pre><code>&lt;p&gt;&lt;a href="#"&gt;... &lt;span class="badge"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;</code></pre></dd>
55+
</dl>
56+
57+
<h2>Reference</h2>
58+
<p><a href="https://wet-boew.github.io/wet-boew-styleguide/design/badges-fr">Guide de style de la Boîte à outils de l'expérience Web - Badges</a></p>

‎components/badges/index.json-ld‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"@context": {
3+
"@version": 1.1,
4+
"dct": "http://purl.org/dc/terms/",
5+
"title": { "@id": "dct:title", "@container": "@language" },
6+
"description": { "@id": "dct:description", "@container": "@language" },
7+
"modified": "dct:modified"
8+
},
9+
"title": {
10+
"en": "Badges",
11+
"fr": "Badges"
12+
},
13+
"description": {
14+
"en": "Use badges (numerical indicators) to highlight the number of updates, new or unread items associated with a link.",
15+
"fr": "Utilisez les badges (indicateurs numériques) afin de souligner le nombre de mises à jour, d'éléments nouveaux ou non lus associés à un lien."
16+
},
17+
"modified": "2025-09-17",
18+
"componentName": "badges",
19+
"processing": "baseline",
20+
"status": "stable",
21+
"pages": {
22+
"examples": [
23+
{
24+
"title": "Badges",
25+
"language": "en",
26+
"path": "badges-en.html"
27+
},
28+
{
29+
"title": "Badges",
30+
"language": "fr",
31+
"path": "badges-fr.html"
32+
}
33+
]
34+
}
35+
}

‎components/panels/index.json-ld‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"@context": {
3+
"@version": 1.1,
4+
"dct": "http://purl.org/dc/terms/",
5+
"title": { "@id": "dct:title", "@container": "@language" },
6+
"description": { "@id": "dct:description", "@container": "@language" },
7+
"modified": "dct:modified"
8+
},
9+
"title": {
10+
"en": "Panels",
11+
"fr": "Panneaux"
12+
},
13+
"description": {
14+
"en": "Use to create a visual grouping of content. Panels have colour themed options, as well as offer a distinct header and footer.",
15+
"fr": "Les utiliser pour créer un groupement visuel de contenu. Les panneaux ont des options de couleur par thème, en plus d'offrir un en-tête et un pied de page distincts."
16+
},
17+
"modified": "2025-09-18",
18+
"componentName": "panels",
19+
"processing": "baseline",
20+
"status": "stable",
21+
"pages": {
22+
"examples": [
23+
{
24+
"title": "Panels",
25+
"language": "en",
26+
"path": "panels-en.html"
27+
},
28+
{
29+
"title": "Panneaux",
30+
"language": "fr",
31+
"path": "panels-fr.html"
32+
}
33+
]
34+
}
35+
}

0 commit comments

Comments
 (0)