Skip to content
Snippets Groups Projects

Resolve #3485201 "1.1.0 from layout"

Files
17
+ 336
0
name: "Grid row (1 col)"
description: "The grid system of DSFR uses a series of utility classes for layouts and alignment of content. 'Grid row (1 col)' offers an off-the-shelf component to add a 1-colummn configurable section."
links:
- "https://www.systeme-de-design.gouv.fr/fondamentaux/grille-et-points-de-rupture"
slots:
first:
title: "Main column"
description: "The content of the main column."
props:
type: object
properties:
container_type:
title: "Container type"
type: string
enum:
- container
- container-fluid
"meta:enum":
container: "Container (default)"
container-fluid: "Fluid container (no external margin)"
with_gutters:
title: "With gutters?"
description: "The gutters between columns in our predefined grid classes can be added with .fr-grid-row--gutters."
type: boolean
horizontal_align:
title: "Horizontal alignement"
type: string
enum:
- left
- right
- center
"meta:enum":
left: Left
right: Right
center: Center
vertical_align:
title: "Vertical alignment"
type: string
enum:
- top
- bottom
- middle
"meta:enum":
top: Top
bottom: Bottom
middle: Middle
fr_col_first:
title: "Column span main"
type: string
enum:
- fr-col-1
- fr-col-2
- fr-col-3
- fr-col-4
- fr-col-5
- fr-col-6
- fr-col-7
- fr-col-8
- fr-col-9
- fr-col-10
- fr-col-11
- fr-col-12
"meta:enum":
fr-col-1: 1
fr-col-2: 2
fr-col-3: "3 (default)"
fr-col-4: 4
fr-col-5: 5
fr-col-6: 6
fr-col-7: 7
fr-col-8: 8
fr-col-9: 9
fr-col-10: 10
fr-col-11: 11
fr-col-12: 12
fr_col_first_sm:
title: "Column span main (small)"
type: string
enum:
- fr-col-sm-1
- fr-col-sm-2
- fr-col-sm-3
- fr-col-sm-4
- fr-col-sm-5
- fr-col-sm-6
- fr-col-sm-7
- fr-col-sm-8
- fr-col-sm-9
- fr-col-sm-10
- fr-col-sm-11
- fr-col-sm-12
"meta:enum":
fr-col-sm-1: 1
fr-col-sm-2: 2
fr-col-sm-3: 3
fr-col-sm-4: 4
fr-col-sm-5: 5
fr-col-sm-6: 6
fr-col-sm-7: 7
fr-col-sm-8: 8
fr-col-sm-9: 9
fr-col-sm-10: 10
fr-col-sm-11: 11
fr-col-sm-12: 12
fr_col_first_md:
title: "Column span main (medium)"
type: string
enum:
- fr-col-md-1
- fr-col-md-2
- fr-col-md-3
- fr-col-md-4
- fr-col-md-5
- fr-col-md-6
- fr-col-md-7
- fr-col-md-8
- fr-col-md-9
- fr-col-md-10
- fr-col-md-11
- fr-col-md-12
"meta:enum":
fr-col-md-1: 1
fr-col-md-2: 2
fr-col-md-3: 3
fr-col-md-4: 4
fr-col-md-5: 5
fr-col-md-6: 6
fr-col-md-7: 7
fr-col-md-8: 8
fr-col-md-9: 9
fr-col-md-10: 10
fr-col-md-11: 11
fr-col-md-12: 12
fr_col_first_lg:
title: "Column span main (large)"
type: string
enum:
- fr-col-lg-1
- fr-col-lg-2
- fr-col-lg-3
- fr-col-lg-4
- fr-col-lg-5
- fr-col-lg-6
- fr-col-lg-7
- fr-col-lg-8
- fr-col-lg-9
- fr-col-lg-10
- fr-col-lg-11
- fr-col-lg-12
"meta:enum":
fr-col-lg-1: 1
fr-col-lg-2: 2
fr-col-lg-3: 3
fr-col-lg-4: 4
fr-col-lg-5: 5
fr-col-lg-6: 6
fr-col-lg-7: 7
fr-col-lg-8: 8
fr-col-lg-9: 9
fr-col-lg-10: 10
fr-col-lg-11: 11
fr-col-lg-12: 12
fr_col_first_xl:
title: "Column span main (extra large)"
type: string
enum:
- fr-col-xl-1
- fr-col-xl-2
- fr-col-xl-3
- fr-col-xl-4
- fr-col-xl-5
- fr-col-xl-6
- fr-col-xl-7
- fr-col-xl-8
- fr-col-xl-9
- fr-col-xl-10
- fr-col-xl-11
- fr-col-xl-12
"meta:enum":
fr-col-xl-1: 1
fr-col-xl-2: 2
fr-col-xl-3: 3
fr-col-xl-4: 4
fr-col-xl-5: 5
fr-col-xl-6: 6
fr-col-xl-7: 7
fr-col-xl-8: 8
fr-col-xl-9: 9
fr-col-xl-10: 10
fr-col-xl-11: 11
fr-col-xl-12: 12
fr_col_first_offset:
title: "Column offset main"
type: string
enum:
- fr-col-1
- fr-col-2
- fr-col-3
- fr-col-4
- fr-col-5
- fr-col-6
- fr-col-7
- fr-col-8
- fr-col-9
- fr-col-10
- fr-col-11
- fr-col-12
"meta:enum":
fr-col-1: 1
fr-col-2: 2
fr-col-3: "3 (default)"
fr-col-4: 4
fr-col-5: 5
fr-col-6: 6
fr-col-7: 7
fr-col-8: 8
fr-col-9: 9
fr-col-10: 10
fr-col-11: 11
fr-col-12: 12
fr_col_first_offset_sm:
title: "Column offset main (small)"
type: string
enum:
- fr-col-sm-1
- fr-col-sm-2
- fr-col-sm-3
- fr-col-sm-4
- fr-col-sm-5
- fr-col-sm-6
- fr-col-sm-7
- fr-col-sm-8
- fr-col-sm-9
- fr-col-sm-10
- fr-col-sm-11
- fr-col-sm-12
"meta:enum":
fr-col-sm-1: 1
fr-col-sm-2: 2
fr-col-sm-3: 3
fr-col-sm-4: 4
fr-col-sm-5: 5
fr-col-sm-6: 6
fr-col-sm-7: 7
fr-col-sm-8: 8
fr-col-sm-9: 9
fr-col-sm-10: 10
fr-col-sm-11: 11
fr-col-sm-12: 12
fr_col_first_offset_md:
title: "Column offset main (medium)"
type: string
enum:
- fr-col-md-1
- fr-col-md-2
- fr-col-md-3
- fr-col-md-4
- fr-col-md-5
- fr-col-md-6
- fr-col-md-7
- fr-col-md-8
- fr-col-md-9
- fr-col-md-10
- fr-col-md-11
- fr-col-md-12
"meta:enum":
fr-col-md-1: 1
fr-col-md-2: 2
fr-col-md-3: 3
fr-col-md-4: 4
fr-col-md-5: 5
fr-col-md-6: 6
fr-col-md-7: 7
fr-col-md-8: 8
fr-col-md-9: 9
fr-col-md-10: 10
fr-col-md-11: 11
fr-col-md-12: 12
fr_col_first_offset_lg:
title: "Column offset main (large)"
type: string
enum:
- fr-col-lg-1
- fr-col-lg-2
- fr-col-lg-3
- fr-col-lg-4
- fr-col-lg-5
- fr-col-lg-6
- fr-col-lg-7
- fr-col-lg-8
- fr-col-lg-9
- fr-col-lg-10
- fr-col-lg-11
- fr-col-lg-12
"meta:enum":
fr-col-lg-1: 1
fr-col-lg-2: 2
fr-col-lg-3: 3
fr-col-lg-4: 4
fr-col-lg-5: 5
fr-col-lg-6: 6
fr-col-lg-7: 7
fr-col-lg-8: 8
fr-col-lg-9: 9
fr-col-lg-10: 10
fr-col-lg-11: 11
fr-col-lg-12: 12
fr_col_first_offset_xl:
title: "Column offset main (extra large)"
type: string
enum:
- fr-col-xl-1
- fr-col-xl-2
- fr-col-xl-3
- fr-col-xl-4
- fr-col-xl-5
- fr-col-xl-6
- fr-col-xl-7
- fr-col-xl-8
- fr-col-xl-9
- fr-col-xl-10
- fr-col-xl-11
- fr-col-xl-12
"meta:enum":
fr-col-xl-1: 1
fr-col-xl-2: 2
fr-col-xl-3: 3
fr-col-xl-4: 4
fr-col-xl-5: 5
fr-col-xl-6: 6
fr-col-xl-7: 7
fr-col-xl-8: 8
fr-col-xl-9: 9
fr-col-xl-10: 10
fr-col-xl-11: 11
fr-col-xl-12: 12
Loading