@patternfly/patternfly 4.199.0 → 4.201.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/DescriptionList/description-list.css +36 -2
- package/components/DescriptionList/description-list.scss +31 -2
- package/components/ProgressStepper/progress-stepper.css +416 -69
- package/components/ProgressStepper/progress-stepper.scss +211 -80
- package/components/Wizard/wizard.css +2 -1
- package/components/Wizard/wizard.scss +3 -1
- package/docs/components/DescriptionList/examples/DescriptionList.md +316 -11
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +328 -2
- package/docs/components/Wizard/examples/Wizard.md +59 -57
- package/docs/demos/Wizard/examples/Wizard.md +2581 -275
- package/package.json +1 -1
- package/patternfly-no-reset.css +454 -72
- package/patternfly.css +454 -72
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -118,7 +118,7 @@ cssPrefix: pf-c-description-list
|
|
|
118
118
|
|
|
119
119
|
```
|
|
120
120
|
|
|
121
|
-
### Default
|
|
121
|
+
### Default, two column
|
|
122
122
|
|
|
123
123
|
```html
|
|
124
124
|
<dl class="pf-c-description-list pf-m-2-col">
|
|
@@ -177,7 +177,7 @@ cssPrefix: pf-c-description-list
|
|
|
177
177
|
|
|
178
178
|
```
|
|
179
179
|
|
|
180
|
-
### Default
|
|
180
|
+
### Default, three column on lg breakpoint
|
|
181
181
|
|
|
182
182
|
```html
|
|
183
183
|
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
|
@@ -291,7 +291,7 @@ cssPrefix: pf-c-description-list
|
|
|
291
291
|
|
|
292
292
|
```
|
|
293
293
|
|
|
294
|
-
### Horizontal
|
|
294
|
+
### Horizontal, two column
|
|
295
295
|
|
|
296
296
|
```html
|
|
297
297
|
<dl class="pf-c-description-list pf-m-horizontal pf-m-2-col">
|
|
@@ -348,7 +348,7 @@ cssPrefix: pf-c-description-list
|
|
|
348
348
|
|
|
349
349
|
```
|
|
350
350
|
|
|
351
|
-
### Horizontal
|
|
351
|
+
### Horizontal, three column on lg breakpoint
|
|
352
352
|
|
|
353
353
|
```html
|
|
354
354
|
<dl class="pf-c-description-list pf-m-horizontal pf-m-3-col-on-lg">
|
|
@@ -696,7 +696,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
696
696
|
|
|
697
697
|
```
|
|
698
698
|
|
|
699
|
-
### Auto-fit, min width modified grid template columns
|
|
699
|
+
### Auto-fit, min width modified, grid template columns
|
|
700
700
|
|
|
701
701
|
```html
|
|
702
702
|
<dl
|
|
@@ -818,7 +818,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
818
818
|
|
|
819
819
|
## Responsive column definitions
|
|
820
820
|
|
|
821
|
-
### Default responsive columns
|
|
821
|
+
### Default, responsive columns
|
|
822
822
|
|
|
823
823
|
```html
|
|
824
824
|
<dl class="pf-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl">
|
|
@@ -875,7 +875,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
875
875
|
|
|
876
876
|
```
|
|
877
877
|
|
|
878
|
-
### Horizontal responsive columns
|
|
878
|
+
### Horizontal, responsive columns
|
|
879
879
|
|
|
880
880
|
```html
|
|
881
881
|
<dl
|
|
@@ -934,7 +934,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
934
934
|
|
|
935
935
|
```
|
|
936
936
|
|
|
937
|
-
### Responsive horizontal, vertical group layout
|
|
937
|
+
### Responsive, horizontal, vertical group layout
|
|
938
938
|
|
|
939
939
|
```html
|
|
940
940
|
<dl
|
|
@@ -995,7 +995,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
995
995
|
|
|
996
996
|
## Auto-column-width
|
|
997
997
|
|
|
998
|
-
### Default auto columns width
|
|
998
|
+
### Default, auto columns width
|
|
999
999
|
|
|
1000
1000
|
```html
|
|
1001
1001
|
<dl class="pf-c-description-list pf-m-auto-column-widths pf-m-3-col">
|
|
@@ -1052,7 +1052,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1052
1052
|
|
|
1053
1053
|
```
|
|
1054
1054
|
|
|
1055
|
-
### Horizontal auto column width
|
|
1055
|
+
### Horizontal, auto column width
|
|
1056
1056
|
|
|
1057
1057
|
```html
|
|
1058
1058
|
<dl
|
|
@@ -1113,7 +1113,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1113
1113
|
|
|
1114
1114
|
## Inline grid
|
|
1115
1115
|
|
|
1116
|
-
### Default inline grid
|
|
1116
|
+
### Default, inline grid
|
|
1117
1117
|
|
|
1118
1118
|
```html
|
|
1119
1119
|
<dl class="pf-c-description-list pf-m-3-col pf-m-inline-grid">
|
|
@@ -1170,6 +1170,309 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1170
1170
|
|
|
1171
1171
|
```
|
|
1172
1172
|
|
|
1173
|
+
### Display variant
|
|
1174
|
+
|
|
1175
|
+
```html
|
|
1176
|
+
<dl class="pf-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
|
|
1177
|
+
<div class="pf-c-description-list__group">
|
|
1178
|
+
<dt class="pf-c-description-list__term">
|
|
1179
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1180
|
+
</dt>
|
|
1181
|
+
<dd class="pf-c-description-list__description">
|
|
1182
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1183
|
+
</dd>
|
|
1184
|
+
</div>
|
|
1185
|
+
<div class="pf-c-description-list__group">
|
|
1186
|
+
<dt class="pf-c-description-list__term">
|
|
1187
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1188
|
+
</dt>
|
|
1189
|
+
<dd class="pf-c-description-list__description">
|
|
1190
|
+
<div class="pf-c-description-list__text">
|
|
1191
|
+
<a href="#">mary-test</a>
|
|
1192
|
+
</div>
|
|
1193
|
+
</dd>
|
|
1194
|
+
</div>
|
|
1195
|
+
<div class="pf-c-description-list__group">
|
|
1196
|
+
<dt class="pf-c-description-list__term">
|
|
1197
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1198
|
+
</dt>
|
|
1199
|
+
<dd class="pf-c-description-list__description">
|
|
1200
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1201
|
+
</dd>
|
|
1202
|
+
</div>
|
|
1203
|
+
<div class="pf-c-description-list__group">
|
|
1204
|
+
<dt class="pf-c-description-list__term">
|
|
1205
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
1206
|
+
</dt>
|
|
1207
|
+
<dd class="pf-c-description-list__description">
|
|
1208
|
+
<div class="pf-c-description-list__text">
|
|
1209
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
1210
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1211
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1212
|
+
</span>
|
|
1213
|
+
app=MyApp
|
|
1214
|
+
</button>
|
|
1215
|
+
</div>
|
|
1216
|
+
</dd>
|
|
1217
|
+
</div>
|
|
1218
|
+
<div class="pf-c-description-list__group">
|
|
1219
|
+
<dt class="pf-c-description-list__term">
|
|
1220
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
1221
|
+
</dt>
|
|
1222
|
+
<dd class="pf-c-description-list__description">
|
|
1223
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
1224
|
+
</dd>
|
|
1225
|
+
</div>
|
|
1226
|
+
</dl>
|
|
1227
|
+
|
|
1228
|
+
```
|
|
1229
|
+
|
|
1230
|
+
## Card variants
|
|
1231
|
+
|
|
1232
|
+
Cards can be used as [description list group wrappers](../card#description-list-group-wrapper-card-variant). Using cards in this way applies the card body padding directly to the card and enables the use of card modifiers within description list groups.
|
|
1233
|
+
|
|
1234
|
+
### Description list group wrapper as card
|
|
1235
|
+
|
|
1236
|
+
```html
|
|
1237
|
+
<dl class="pf-c-description-list pf-m-2-col-on-lg">
|
|
1238
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1239
|
+
<dt class="pf-c-description-list__term">
|
|
1240
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1241
|
+
</dt>
|
|
1242
|
+
<dd class="pf-c-description-list__description">
|
|
1243
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1244
|
+
</dd>
|
|
1245
|
+
</div>
|
|
1246
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1247
|
+
<dt class="pf-c-description-list__term">
|
|
1248
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1249
|
+
</dt>
|
|
1250
|
+
<dd class="pf-c-description-list__description">
|
|
1251
|
+
<div class="pf-c-description-list__text">
|
|
1252
|
+
<a href="#">mary-test</a>
|
|
1253
|
+
</div>
|
|
1254
|
+
</dd>
|
|
1255
|
+
</div>
|
|
1256
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1257
|
+
<dt class="pf-c-description-list__term">
|
|
1258
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1259
|
+
</dt>
|
|
1260
|
+
<dd class="pf-c-description-list__description">
|
|
1261
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1262
|
+
</dd>
|
|
1263
|
+
</div>
|
|
1264
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1265
|
+
<dt class="pf-c-description-list__term">
|
|
1266
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
1267
|
+
</dt>
|
|
1268
|
+
<dd class="pf-c-description-list__description">
|
|
1269
|
+
<div class="pf-c-description-list__text">
|
|
1270
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
1271
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1272
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1273
|
+
</span>
|
|
1274
|
+
app=MyApp
|
|
1275
|
+
</button>
|
|
1276
|
+
</div>
|
|
1277
|
+
</dd>
|
|
1278
|
+
</div>
|
|
1279
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1280
|
+
<dt class="pf-c-description-list__term">
|
|
1281
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
1282
|
+
</dt>
|
|
1283
|
+
<dd class="pf-c-description-list__description">
|
|
1284
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
1285
|
+
</dd>
|
|
1286
|
+
</div>
|
|
1287
|
+
</dl>
|
|
1288
|
+
|
|
1289
|
+
```
|
|
1290
|
+
|
|
1291
|
+
### Display lg and card variant
|
|
1292
|
+
|
|
1293
|
+
```html
|
|
1294
|
+
<dl class="pf-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
|
|
1295
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1296
|
+
<dt class="pf-c-description-list__term">
|
|
1297
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1298
|
+
</dt>
|
|
1299
|
+
<dd class="pf-c-description-list__description">
|
|
1300
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1301
|
+
</dd>
|
|
1302
|
+
</div>
|
|
1303
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1304
|
+
<dt class="pf-c-description-list__term">
|
|
1305
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1306
|
+
</dt>
|
|
1307
|
+
<dd class="pf-c-description-list__description">
|
|
1308
|
+
<div class="pf-c-description-list__text">
|
|
1309
|
+
<a href="#">mary-test</a>
|
|
1310
|
+
</div>
|
|
1311
|
+
</dd>
|
|
1312
|
+
</div>
|
|
1313
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1314
|
+
<dt class="pf-c-description-list__term">
|
|
1315
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1316
|
+
</dt>
|
|
1317
|
+
<dd class="pf-c-description-list__description">
|
|
1318
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1319
|
+
</dd>
|
|
1320
|
+
</div>
|
|
1321
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1322
|
+
<dt class="pf-c-description-list__term">
|
|
1323
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
1324
|
+
</dt>
|
|
1325
|
+
<dd class="pf-c-description-list__description">
|
|
1326
|
+
<div class="pf-c-description-list__text">
|
|
1327
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
1328
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1329
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1330
|
+
</span>
|
|
1331
|
+
app=MyApp
|
|
1332
|
+
</button>
|
|
1333
|
+
</div>
|
|
1334
|
+
</dd>
|
|
1335
|
+
</div>
|
|
1336
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1337
|
+
<dt class="pf-c-description-list__term">
|
|
1338
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
1339
|
+
</dt>
|
|
1340
|
+
<dd class="pf-c-description-list__description">
|
|
1341
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
1342
|
+
</dd>
|
|
1343
|
+
</div>
|
|
1344
|
+
</dl>
|
|
1345
|
+
|
|
1346
|
+
```
|
|
1347
|
+
|
|
1348
|
+
### Display 2xl and card variant
|
|
1349
|
+
|
|
1350
|
+
```html
|
|
1351
|
+
<dl class="pf-c-description-list pf-m-display-2xl pf-m-2-col-on-lg">
|
|
1352
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1353
|
+
<dt class="pf-c-description-list__term">
|
|
1354
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1355
|
+
</dt>
|
|
1356
|
+
<dd class="pf-c-description-list__description">
|
|
1357
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1358
|
+
</dd>
|
|
1359
|
+
</div>
|
|
1360
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1361
|
+
<dt class="pf-c-description-list__term">
|
|
1362
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1363
|
+
</dt>
|
|
1364
|
+
<dd class="pf-c-description-list__description">
|
|
1365
|
+
<div class="pf-c-description-list__text">
|
|
1366
|
+
<a href="#">mary-test</a>
|
|
1367
|
+
</div>
|
|
1368
|
+
</dd>
|
|
1369
|
+
</div>
|
|
1370
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1371
|
+
<dt class="pf-c-description-list__term">
|
|
1372
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1373
|
+
</dt>
|
|
1374
|
+
<dd class="pf-c-description-list__description">
|
|
1375
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1376
|
+
</dd>
|
|
1377
|
+
</div>
|
|
1378
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1379
|
+
<dt class="pf-c-description-list__term">
|
|
1380
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
1381
|
+
</dt>
|
|
1382
|
+
<dd class="pf-c-description-list__description">
|
|
1383
|
+
<div class="pf-c-description-list__text">
|
|
1384
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
1385
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1386
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1387
|
+
</span>
|
|
1388
|
+
app=MyApp
|
|
1389
|
+
</button>
|
|
1390
|
+
</div>
|
|
1391
|
+
</dd>
|
|
1392
|
+
</div>
|
|
1393
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1394
|
+
<dt class="pf-c-description-list__term">
|
|
1395
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
1396
|
+
</dt>
|
|
1397
|
+
<dd class="pf-c-description-list__description">
|
|
1398
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
1399
|
+
</dd>
|
|
1400
|
+
</div>
|
|
1401
|
+
</dl>
|
|
1402
|
+
|
|
1403
|
+
```
|
|
1404
|
+
|
|
1405
|
+
### Display and card variant, three column on lg breakpoint
|
|
1406
|
+
|
|
1407
|
+
```html
|
|
1408
|
+
<dl class="pf-c-description-list pf-m-3-col-on-lg pf-m-display-lg">
|
|
1409
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1410
|
+
<dt class="pf-c-description-list__term">
|
|
1411
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1412
|
+
</dt>
|
|
1413
|
+
<dd class="pf-c-description-list__description">
|
|
1414
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1415
|
+
</dd>
|
|
1416
|
+
</div>
|
|
1417
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1418
|
+
<dt class="pf-c-description-list__term">
|
|
1419
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1420
|
+
</dt>
|
|
1421
|
+
<dd class="pf-c-description-list__description">
|
|
1422
|
+
<div class="pf-c-description-list__text">
|
|
1423
|
+
<a href="#">mary-test</a>
|
|
1424
|
+
</div>
|
|
1425
|
+
</dd>
|
|
1426
|
+
</div>
|
|
1427
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1428
|
+
<dt class="pf-c-description-list__term">
|
|
1429
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1430
|
+
</dt>
|
|
1431
|
+
<dd class="pf-c-description-list__description">
|
|
1432
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1433
|
+
</dd>
|
|
1434
|
+
</div>
|
|
1435
|
+
</dl>
|
|
1436
|
+
|
|
1437
|
+
```
|
|
1438
|
+
|
|
1439
|
+
### Display and card variant, horizontal, modified term width
|
|
1440
|
+
|
|
1441
|
+
```html
|
|
1442
|
+
<dl
|
|
1443
|
+
class="pf-c-description-list pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"
|
|
1444
|
+
style="--pf-c-description-list__term--width: 10ch;"
|
|
1445
|
+
>
|
|
1446
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1447
|
+
<dt class="pf-c-description-list__term">
|
|
1448
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1449
|
+
</dt>
|
|
1450
|
+
<dd class="pf-c-description-list__description">
|
|
1451
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1452
|
+
</dd>
|
|
1453
|
+
</div>
|
|
1454
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1455
|
+
<dt class="pf-c-description-list__term">
|
|
1456
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1457
|
+
</dt>
|
|
1458
|
+
<dd class="pf-c-description-list__description">
|
|
1459
|
+
<div class="pf-c-description-list__text">
|
|
1460
|
+
<a href="#">mary-test</a>
|
|
1461
|
+
</div>
|
|
1462
|
+
</dd>
|
|
1463
|
+
</div>
|
|
1464
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1465
|
+
<dt class="pf-c-description-list__term">
|
|
1466
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1467
|
+
</dt>
|
|
1468
|
+
<dd class="pf-c-description-list__description">
|
|
1469
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1470
|
+
</dd>
|
|
1471
|
+
</div>
|
|
1472
|
+
</dl>
|
|
1473
|
+
|
|
1474
|
+
```
|
|
1475
|
+
|
|
1173
1476
|
<!-- ## Auto term with is only supported in FF currently
|
|
1174
1477
|
|
|
1175
1478
|
### Horizontal 2 col auto term width
|
|
@@ -1273,6 +1576,8 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1273
1576
|
| `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
|
|
1274
1577
|
| `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
|
|
1275
1578
|
| `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
|
|
1579
|
+
| `.pf-m-display-lg` | `.pf-c-description-list` | Modifies the description list to have large display styling. |
|
|
1580
|
+
| `.pf-m-display-2xl` | `.pf-c-description-list` | Modifies the description list to have 2xl display styling. |
|
|
1276
1581
|
| `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
|
|
1277
1582
|
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
|
|
1278
1583
|
| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
|