ui_suite_daisyui-4.0.x-dev/components/grid_1_region/grid_1_region.component.yml
components/grid_1_region/grid_1_region.component.yml
name: "Grid 1 region"
description: "The grid system of tailwind CSS uses a series of utility classes for layouts and alignment of content. 'Grid 1 region' offers an off-the-shelf component to add a 1-colummn configurable section. For more powerful needs, please refer to the Tailwind CSS documentation."
group: "Grid"
links:
- "https://daisyui.com/docs/layout-and-typography/"
- "https://tailwindcss.com/docs/container"
- "https://tailwindcss.com/docs/grid-template-columns"
- "https://tailwindcss.com/docs/grid-column"
icon_map:
- [col_first]
slots:
col_first:
title: First col
props:
type: object
properties:
container_type:
title: "Container type"
description: "Utilities for controlling if container class is injected in the markup."
type: string
enum:
- container mx-auto
- breakout
- bg-breakout
"meta:enum":
container mx-auto: "Container (default)"
breakout: "Breakout"
bg-breakout: "Bg breakout"
background_image:
title: Background image
description: "The background image URL. Optional."
$ref: "ui-patterns://url"
background_size:
title: "Background size"
description: "Utilities for controlling the background size of an element's background image."
type: string
enum:
- bg-auto
- bg-cover
- bg-contain
"meta:enum":
bg-auto: "Background auto"
bg-cover: "Background cover"
bg-contain: "Background contain"
background_position:
title: "Background position"
description: "Utilities for controlling the position of an element's background image."
type: string
enum:
- bg-bottom
- bg-center
- bg-left
- bg-left-bottom
- bg-left-top
- bg-right
- bg-right-bottom
- bg-right-top
- bg-top
"meta:enum":
bg-bottom: "Background bottom"
bg-center: "Background center"
bg-left: "Background left"
bg-left-bottom: "Background left bottom"
bg-left-top: "Background left top"
bg-right: "Background right"
bg-right-bottom: "Background right bottom"
bg-right-top: "Background right top"
bg-top: "Background top"
background_repeat:
title: "Background repeat"
description: "Utilities for controlling the repetition of an element's background image."
type: string
enum:
- bg-repeat
- bg-no-repeat
- bg-repeat-x
- bg-repeat-y
- bg-repeat-round
- bg-repeat-space
"meta:enum":
bg-repeat: "Background repeat"
bg-no-repeat: "Background no repeat"
bg-repeat-x: "Background repeat x"
bg-repeat-y: "Background repeat y"
bg-repeat-round: "Background repeat round"
bg-repeat-space: "Background repeat space"
grid_cols:
title: "Grid Template Columns (mobile first)"
description: "Utilities for specifying the columns in a grid layout, for mobile first."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "1 column"
2: "2 columns"
3: "3 columns"
4: "4 columns"
5: "5 columns"
6: "6 columns"
7: "7 columns"
8: "8 columns"
9: "9 columns"
10: "10 columns"
11: "11 columns"
12: "12 columns"
grid_cols_2xl:
title: "Grid Template Columns (2xl)"
description: "Utilities for specifying the columns in a grid layout, for '2xl' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "1 column"
2: "2 columns"
3: "3 columns"
4: "4 columns"
5: "5 columns"
6: "6 columns"
7: "7 columns"
8: "8 columns"
9: "9 columns"
10: "10 columns"
11: "11 columns"
12: "12 columns"
grid_cols_xl:
title: "Grid Template Columns (xl)"
description: "Utilities for specifying the columns in a grid layout, for 'xl' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "1 column"
2: "2 columns"
3: "3 columns"
4: "4 columns"
5: "5 columns"
6: "6 columns"
7: "7 columns"
8: "8 columns"
9: "9 columns"
10: "10 columns"
11: "11 columns"
12: "12 columns"
grid_cols_lg:
title: "Grid Template Columns (lg)"
description: "Utilities for specifying the columns in a grid layout, for 'lg' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "1 column"
2: "2 columns"
3: "3 columns"
4: "4 columns"
5: "5 columns"
6: "6 columns"
7: "7 columns"
8: "8 columns"
9: "9 columns"
10: "10 columns"
11: "11 columns"
12: "12 columns"
grid_cols_md:
title: "Grid Template Columns (md)"
description: "Utilities for specifying the columns in a grid layout, for 'md' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "1 column"
2: "2 columns"
3: "3 columns"
4: "4 columns"
5: "5 columns"
6: "6 columns"
7: "7 columns"
8: "8 columns"
9: "9 columns"
10: "10 columns"
11: "11 columns"
12: "12 columns"
grid_cols_sm:
title: "Grid Template Columns (sm)"
description: "Utilities for specifying the columns in a grid layout, for 'sm' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "1 column"
2: "2 columns"
3: "3 columns"
4: "4 columns"
5: "5 columns"
6: "6 columns"
7: "7 columns"
8: "8 columns"
9: "9 columns"
10: "10 columns"
11: "11 columns"
12: "12 columns"
col_span:
title: "Grid Column Span (mobile first)"
description: "Use the col-span-* utilities to make an element span n columns, for mobile first."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "span 1"
2: "span 2"
3: "span 3"
4: "span 4"
5: "span 5"
6: "span 6"
7: "span 7"
8: "span 8"
9: "span 9"
10: "span 10"
11: "span 11"
12: "span 12"
col_start:
title: "Grid Column Start (mobile first)"
description: "Use the col-start-* utilities to make an element start at the nth grid line, for mobile first."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
"meta:enum":
1: "start 1"
2: "start 2"
3: "start 3"
4: "start 4"
5: "start 5"
6: "start 6"
7: "start 7"
8: "start 8"
9: "start 9"
10: "start 10"
11: "start 11"
12: "start 12"
13: "start 13"
col_span_2xl:
title: "Grid Column Span (2xl)"
description: "Use the col-span-* utilities to make an element span n columns, for '2xl' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "span 1"
2: "span 2"
3: "span 3"
4: "span 4"
5: "span 5"
6: "span 6"
7: "span 7"
8: "span 8"
9: "span 9"
10: "span 10"
11: "span 11"
12: "span 12"
col_start_2xl:
title: "Grid Column Start (2xl)"
description: "Use the col-start-* utilities to make an element start at the nth grid line, for '2xl' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
"meta:enum":
1: "start 1"
2: "start 2"
3: "start 3"
4: "start 4"
5: "start 5"
6: "start 6"
7: "start 7"
8: "start 8"
9: "start 9"
10: "start 10"
11: "start 11"
12: "start 12"
13: "start 13"
col_span_xl:
title: "Grid Column Span (xl)"
description: "Use the col-span-* utilities to make an element span n columns, for 'xl' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "span 1"
2: "span 2"
3: "span 3"
4: "span 4"
5: "span 5"
6: "span 6"
7: "span 7"
8: "span 8"
9: "span 9"
10: "span 10"
11: "span 11"
12: "span 12"
col_start_xl:
title: "Grid Column Start (xl)"
description: "Use the col-start-* utilities to make an element start at the nth grid line, for 'xl' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
"meta:enum":
1: "start 1"
2: "start 2"
3: "start 3"
4: "start 4"
5: "start 5"
6: "start 6"
7: "start 7"
8: "start 8"
9: "start 9"
10: "start 10"
11: "start 11"
12: "start 12"
13: "start 13"
col_span_lg:
title: "Grid Column Span (lg)"
description: "Use the col-span-* utilities to make an element span n columns, for 'lg' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "span 1"
2: "span 2"
3: "span 3"
4: "span 4"
5: "span 5"
6: "span 6"
7: "span 7"
8: "span 8"
9: "span 9"
10: "span 10"
11: "span 11"
12: "span 12"
col_start_lg:
title: "Grid Column Start (lg)"
description: "Use the col-start-* utilities to make an element start at the nth grid line, for 'lg' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
"meta:enum":
1: "start 1"
2: "start 2"
3: "start 3"
4: "start 4"
5: "start 5"
6: "start 6"
7: "start 7"
8: "start 8"
9: "start 9"
10: "start 10"
11: "start 11"
12: "start 12"
13: "start 13"
col_span_md:
title: "Grid Column Span (md)"
description: "Use the col-span-* utilities to make an element span n columns, for 'md' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "span 1"
2: "span 2"
3: "span 3"
4: "span 4"
5: "span 5"
6: "span 6"
7: "span 7"
8: "span 8"
9: "span 9"
10: "span 10"
11: "span 11"
12: "span 12"
col_start_md:
title: "Grid Column Start (md)"
description: "Use the col-start-* utilities to make an element start at the nth grid line, for 'md' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
"meta:enum":
1: "start 1"
2: "start 2"
3: "start 3"
4: "start 4"
5: "start 5"
6: "start 6"
7: "start 7"
8: "start 8"
9: "start 9"
10: "start 10"
11: "start 11"
12: "start 12"
13: "start 13"
col_span_sm:
title: "Grid Column Span (sm)"
description: "Use the col-span-* utilities to make an element span n columns, for 'sm' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"meta:enum":
1: "span 1"
2: "span 2"
3: "span 3"
4: "span 4"
5: "span 5"
6: "span 6"
7: "span 7"
8: "span 8"
9: "span 9"
10: "span 10"
11: "span 11"
12: "span 12"
col_start_sm:
title: "Grid Column Start (sm)"
description: "Use the col-start-* utilities to make an element start at the nth grid line, for 'sm' breakpoint."
type: integer
enum:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
"meta:enum":
1: "start 1"
2: "start 2"
3: "start 3"
4: "start 4"
5: "start 5"
6: "start 6"
7: "start 7"
8: "start 8"
9: "start 9"
10: "start 10"
11: "start 11"
12: "start 12"
13: "start 13"
