## How to use helper classes Helper classes are added using the special `cssclasses` [property](https://help.obsidian.md/Editing+and+formatting/Properties). In source mode it should look like this: ``` --- cssclasses: - img-grid --- ``` To use multiple classes use the following syntax: ``` --- cssclasses: - cards - cards-1-1 --- ``` ## Image grids Helper class for [[Image grids]] feature | Class | Description | | -------------- | --------------------------------------------------- | | `img-grid` | Turns consecutive images into columns. To make a new row, add an extra line break between images. | ## Block widths Enable [[Block width]] features on per-file basis, for [[Tables]], [[Image grids]] and [[Iframes]] | Class | Description | | --------------------------------------- | -------------------------------------- | | `wide` | Entire note uses wide line width | | `max` | Entire note uses max line width | | `table-wide`, `img-wide`, `iframe-wide` | Block type uses wide line width | | `table-max`, `img-max`, `iframe-max` | Block type uses max line width | | `table-100`, `img-100`, `iframe-100` | Block type uses 100% of the pane width | ## Embeds and transclusions Controls the styling of [[embeds]] | Class | Description | | -------------- | --------------------------------------------------- | | `embed-strict` | Transclusions appear seamlessly in the flow of text | ## Tables Controls the row and column styling of [[tables]] | Class | Description | | :-------------- | :-------------------------------------------------- | | `table-nowrap` | Disable line wrapping in table cells | | `table-wrap` | Force wrapping in table cells | | `table-numbers` | Add row numbers to tables | | `table-tabular` | Use tabular figures in tables | | `table-small` | Use small font size in tables | | `table-tiny` | Use tiny font size in tables | | `table-lines` | Add borders around all table cells | | `row-lines` | Add borders between table rows | | `col-lines` | Add borders between table columns | | `row-alt` | Add striped background to alternating table rows | | `col-alt` | Add striped background to alternating table columns | | `row-highlight` | Highlight rows on hover | ## Cards Helper class for [[Cards]] feature | Class | Description | | :-------------------- | :----------------------------------------------- | | `cards` (required) | Set all Dataview tables to card layout | | `list-cards` | Set all bullet lists to card layout | | `cards-align-bottom` | Align the last element of a card to the bottom | | `cards-cover` | Images are resized to fill the defined space | | `cards-16-9` | Fit images in cards to 16:9 ratio | | `cards-1-1` | Fit images in cards to 1:1 ratio (square) | | `cards-2-1` | Fit images in cards to 2:1 ratio | | `cards-2-3` | Fit images in cards to 2:3 ratio | | `cards-cols-1` to `8` | Force a specific number of columns (from 1 to 8) |