> For the complete documentation index, see [llms.txt](https://wotamann.gitbook.io/vuetify-form-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wotamann.gitbook.io/vuetify-form-base/schema-1/untitled.md).

# Display & Typography

### Display, Typography and Spacing

Integrate Vuetify-Display and Layout behaviour by using schema property 'class'. But you can pass any other CSS class into your control here.

```javascript
mySchema: {
  name: { 
    type: 'text', 
    class:'title d-flex d-sm-none ml-4 pa-1 float-left' 
  }
}
```

for available Options look here at some extracts from original vuetify doc. 

### [Vuetify Display](https://vuetifyjs.com/en/styles/display)

Specify the elements `display` property. These classes can be applied to all breakpoints from `xs` to `xl`. When using a base class,`.d-{value}`, it is inferred to be `.d-${value}-xs`.

* `.d-{value}` for `xs`
* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg` and `xl`

The value property is one of:

* `none`
* `inline`
* `inline-block`
* `block`
* `table`
* `table-cell`
* `table-row`
* `flex`
* `inline-flex`

### [Vuetify Typography](https://vuetifyjs.com/en/styles/typography)

These classes can be applied to all breakpoints from `xs` to `xl`. When using a base class, `.text-{value}`, it is inferred to be `.text-xs-${value}`.

* `.text-{value}` for `xs`
* `.text-{breakpoint}-{value}` for `sm`, `md`, `lg` and `xl`

The value property is one of:

* `h1`
* `h2`
* `h3`
* `h4`
* `h5`
* `h6`
* `subtitle-1`
* `subtitle-2`
* `body-1`
* `body-2`
* `button`
* `caption`
* `overline`

### [Vuetify Spacing](https://vuetifyjs.com/en/styles/spacing)

The helper classes apply **margin** or **padding** to an element ranging from 0 to 16. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format `{property}{direction}-{size}`.

The **property** applies the type of spacing:

* `m` - applies `margin`
* `p` - applies `padding`

The **direction** designates the side the property applies to:

* `t` - applies the spacing for `margin-top` and `padding-top`
* `b` - applies the spacing for `margin-bottom` and `padding-bottom`
* `l` - applies the spacing for `margin-left` and `padding-left`
* `r` - applies the spacing for `margin-right` and `padding-right`
* `s` - applies the spacing for `margin-left`/`padding-left` (in LTR mode) and `margin-right`/`padding-right` (in RTL mode)
* `e` - applies the spacing for `margin-right`/`padding-right` (in LTR mode) and `margin-left`/`padding-left` (in RTL mode)
* `x` - applies the spacing for both `*-left` and `*-right`
* `y` - applies the spacing for both `*-top` and `*-bottom`
* `a` - applies the spacing for the property in all directions

The **size** controls the increment of the property in 4px intervals:

* `0` - eliminates all `margin` or `padding` by setting it to `0`
* `1` - sets `margin` or `padding` to 4px
* `2` - sets `margin` or `padding` to 8px
* `3` - sets `margin` or `padding` to 12px
* `4` - sets `margin` or `padding` to 16px
* `...`
* `16` - sets `margin` or `padding` to 64px
* `n1` - sets `margin` to -4px
* `n2` - sets `margin` to -8px
* `n3` - sets `margin` to -12px
* `n4` - sets `margin` to -16px
* `...`
* `n16` - sets `margin` to -64px
* `auto` - sets the spacing to **auto**

### [Vuetify Float](https://vuetifyjs.com/en/styles/float)

Floats can also be applied on a per breakpoint (viewport) basis.

 Float left on viewports sized SM (small) or wider\
 Float left on viewports sized MD (medium) or wider\
 Float left on viewports sized LG (large) or wider\
&#x20;Float left on viewports sized XL (extra-large) or wider<br>

Here is a list of all the available support classes:

* .float-left
* .float-right
* .float-none
* .float-sm-left
* .float-sm-right
* .float-sm-none
* .float-md-left
* .float-md-right
* .float-md-none
* .float-lg-left
* .float-lg-right
* .float-lg-none
* .float-xl-left
* .float-xl-right
* .float-xl-none

### [Example](https://wotamann.github.io/displayhelpers)