Skip to content

Commit 789afc6

Browse files
Content - Borders: Created Example Pages (#2275)
* Content - Spacing and Borders - Create Example Pages * Minor adjustments --------- Co-authored-by: Marc-André Garneau <marcandre.garneau@servicecanada.gc.ca>
1 parent dc00aa4 commit 789afc6

File tree

4 files changed

+238
-0
lines changed

4 files changed

+238
-0
lines changed

_data/common.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,40 @@
127127
]
128128
}
129129
}
130+
,{
131+
"@context": {
132+
"@version": 1.1,
133+
"dct": "http://purl.org/dc/terms/",
134+
"title": { "@id": "dct:title", "@container": "@language" },
135+
"description": { "@id": "dct:description", "@container": "@language" },
136+
"modified": "dct:modified"
137+
},
138+
"title": {
139+
"en": "Borders",
140+
"fr": "Bordures"
141+
},
142+
"description": {
143+
"en": "Utility classes to implement various border styles.",
144+
"fr": "Classes utilitaires pour implémenter divers styles de bordures."
145+
},
146+
"modified": "2025-10-01",
147+
"componentName": "borders",
148+
"status": "stable",
149+
"pages": {
150+
"docs": [
151+
{
152+
"title": "Borders",
153+
"language": "en",
154+
"path": "borders-en.html"
155+
},
156+
{
157+
"title": "Bordures",
158+
"language": "fr",
159+
"path": "borders-fr.html"
160+
}
161+
]
162+
}
163+
}
130164
,{
131165
"@context": {
132166
"@version": 2.0,

common/borders/borders-en.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
{
3+
"title": "Borders",
4+
"language": "en",
5+
"altLangPage": "borders-fr.html",
6+
"dateModified": "2025-10-01"
7+
}
8+
---
9+
<p>Utility classes to add spacing between elements.</p>
10+
11+
<h2><code>.brdr-lft</code></h2>
12+
<div class="row">
13+
<div class="col-md-4">
14+
<div class="brdr-lft">Left Border Only</div>
15+
</div>
16+
<div class="col-md-4">
17+
<pre><code>&lt;div class="brdr-lft"&gt;&lt;/div&gt;</code></pre>
18+
</div>
19+
</div>
20+
21+
<h2><code>.brdr-rght</code></h2>
22+
<div class="row">
23+
<div class="col-md-4">
24+
<div class="brdr-rght">Right Border Only</div>
25+
</div>
26+
<div class="col-md-4">
27+
<pre><code>&lt;div class="brdr-rght"&gt;&lt;/div&gt;</code></pre>
28+
</div>
29+
</div>
30+
31+
<h2><code>.brdr-tp</code></h2>
32+
<div class="row">
33+
<div class="col-md-4">
34+
<div class="brdr-tp">Top Border Only</div>
35+
</div>
36+
<div class="col-md-4">
37+
<pre><code>&lt;div class="brdr-tp"&gt;&lt;/div&gt;</code></pre>
38+
</div>
39+
</div>
40+
41+
<h2><code>.brdr-bttm</code></h2>
42+
<div class="row">
43+
<div class="col-md-4">
44+
<div class="brdr-bttm">Bottom Border Only</div>
45+
</div>
46+
<div class="col-md-4">
47+
<pre><code>&lt;div class="brdr-bttm"&gt;&lt;/div&gt;</code></pre>
48+
</div>
49+
</div>
50+
51+
<h2><code>.brdr-0</code></h2>
52+
<div class="row">
53+
<div class="col-md-4">
54+
<div class="brdr-0 well">Well With No Borders</div>
55+
</div>
56+
<div class="col-md-4">
57+
<pre><code>&lt;div class="brdr-0 well"&gt;&lt;/div&gt;</code></pre>
58+
</div>
59+
</div>
60+
<div class="row">
61+
<div class="col-md-4">
62+
<div class="well">Well With Borders</div>
63+
</div>
64+
<div class="col-md-4">
65+
<pre><code>&lt;div class="well"&gt;&lt;/div&gt;</code></pre>
66+
</div>
67+
</div>
68+
69+
<h2><code>.brdr-rds-0</code></h2>
70+
<div class="row">
71+
<div class="col-md-4">
72+
<div class="brdr-rds-0 well">Well With No Border Radius</div>
73+
</div>
74+
<div class="col-md-4">
75+
<pre><code>&lt;div class="brdr-rds-0 well"&gt;&lt;/div&gt;</code></pre>
76+
</div>
77+
</div>
78+
<div class="row">
79+
<div class="col-md-4">
80+
<div class="well">Well With Border Radius</div>
81+
</div>
82+
<div class="col-md-4">
83+
<pre><code>&lt;div class="well"&gt;&lt;/div&gt;</code></pre>
84+
</div>
85+
</div>

common/borders/borders-fr.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
{
3+
"title": "Borders",
4+
"language": "fr",
5+
"altLangPage": "borders-en.html",
6+
"dateModified": "2025-10-01"
7+
}
8+
---
9+
<p>Classes utilitaires pour ajouter de l'espacement entre les éléments.</p>
10+
11+
<h2><code>.brdr-lft</code></h2>
12+
<div class="row">
13+
<div class="col-md-4">
14+
<div class="brdr-lft">Bordure à gauche seulement</div>
15+
</div>
16+
<div class="col-md-4">
17+
<pre><code>&lt;div class="brdr-lft"&gt;&lt;/div&gt;</code></pre>
18+
</div>
19+
</div>
20+
21+
<h2><code>.brdr-rght</code></h2>
22+
<div class="row">
23+
<div class="col-md-4">
24+
<div class="brdr-rght">Bordure à droite seulement</div>
25+
</div>
26+
<div class="col-md-4">
27+
<pre><code>&lt;div class="brdr-rght"&gt;&lt;/div&gt;</code></pre>
28+
</div>
29+
</div>
30+
31+
<h2><code>.brdr-tp</code></h2>
32+
<div class="row">
33+
<div class="col-md-4">
34+
<div class="brdr-tp">Bordure en haut seulement</div>
35+
</div>
36+
<div class="col-md-4">
37+
<pre><code>&lt;div class="brdr-tp"&gt;&lt;/div&gt;</code></pre>
38+
</div>
39+
</div>
40+
41+
<h2><code>.brdr-bttm</code></h2>
42+
<div class="row">
43+
<div class="col-md-4">
44+
<div class="brdr-bttm">Bordure en bas seulement</div>
45+
</div>
46+
<div class="col-md-4">
47+
<pre><code>&lt;div class="brdr-bttm"&gt;&lt;/div&gt;</code></pre>
48+
</div>
49+
</div>
50+
51+
<h2><code>.brdr-0</code></h2>
52+
<div class="row">
53+
<div class="col-md-4">
54+
<div class="brdr-0 well">Well sans bordures</div>
55+
</div>
56+
<div class="col-md-4">
57+
<pre><code>&lt;div class="brdr-0 well"&gt;&lt;/div&gt;</code></pre>
58+
</div>
59+
</div>
60+
<div class="row">
61+
<div class="col-md-4">
62+
<div class="well">Well avec bordures</div>
63+
</div>
64+
<div class="col-md-4">
65+
<pre><code>&lt;div class="well"&gt;&lt;/div&gt;</code></pre>
66+
</div>
67+
</div>
68+
69+
<h2><code>.brdr-rds-0</code></h2>
70+
<div class="row">
71+
<div class="col-md-4">
72+
<div class="brdr-rds-0 well">Well sans rayon de bordure</div>
73+
</div>
74+
<div class="col-md-4">
75+
<pre><code>&lt;div class="brdr-rds-0 well"&gt;&lt;/div&gt;</code></pre>
76+
</div>
77+
</div>
78+
<div class="row">
79+
<div class="col-md-4">
80+
<div class="well">Well avec rayon de bordure</div>
81+
</div>
82+
<div class="col-md-4">
83+
<pre><code>&lt;div class="well"&gt;&lt;/div&gt;</code></pre>
84+
</div>
85+
</div>

common/borders/index.json-ld

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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": "Borders",
11+
"fr": "Bordures"
12+
},
13+
"description": {
14+
"en": "Utility classes to implement various border styles.",
15+
"fr": "Classes utilitaires pour implémenter divers styles de bordures."
16+
},
17+
"modified": "2025-10-01",
18+
"componentName": "borders",
19+
"status": "stable",
20+
"pages": {
21+
"docs": [
22+
{
23+
"title": "Borders",
24+
"language": "en",
25+
"path": "borders-en.html"
26+
},
27+
{
28+
"title": "Bordures",
29+
"language": "fr",
30+
"path": "borders-fr.html"
31+
}
32+
]
33+
}
34+
}

0 commit comments

Comments
 (0)