> [!metadata|i-at]
> [[Callout Adjustments]]
# Cards Callout
> Simple columns to display images along with text. For more complex usage, use the [[Callout - Columns|Columns Callout]].
> [!note] Use [[Image Adjustments]] functionality to control the [[Image Adjustments#Sizing|images sizing]]
- Blank Line `>` separated
- `**Bold**` syntax will center text and and a background color
- (no background color for dataview tables)
| Adjustment | Description |
| ------------- | -------------------------------------------------- |
| `2`, `4`, `5` | Change number of columns; 3 is default |
| `dataview` | Style dataview table and lists as cards |
| `dvl` | Style dataview list |
| `no-strong` | Undo strong's center and background color styling |
| `notion` | Style cards in the style of Notion's gallery cards |
---
## Examples
**External and Internal Images:**
```markdown
> [!cards]
> **[[Link]]**
> 
>
> **[[Link]]**
> ![[Image Link.png|sban htiny ctr]]
```
**Add More Columns:**
```markdown
> [!cards|4]
> **[[Link]]**
> 
>
> **[[Link]]**
> ![[Image Link.png|sban htiny ctr]]
>
> **[[Link]]**
> 
>
> **[[Link]]**
> ![[Image Link.png|sban htiny ctr]]
```
**Style Dataview Table:**
````markdown
> [!cards|dataview]
> ```dataview
> TABLE WITHOUT ID
> "![|sban cover hmicro](" + image + ")" as Image,
> "**"+ file.link + "**" AS "Column Name",
> file.mtime AS "Modified"
> FROM "folder"
> SORT file.name asc
> LIMIT 10
> ```
> [!cards|dvl no-strong]
> ```dataview
> LIST WITHOUT ID file.link + "<br>" + file.mtime
> FROM "folder"
> SORT file.name asc
> LIMIT 10
> ```
````
## Live Example
> [!cards]
> **[By Thibault Penin](https://unsplash.com/photos/AWOl7qqsffM)**
> 
>
> **[By Clint Bustrillos](https://unsplash.com/photos/X-A-LJVAhzk)**
> 
>
> **[By Jiawei Zhao](https://unsplash.com/photos/W-ypTC6R7_k)**
> 
>
> 
> **[By Guillaume TECHER](https://unsplash.com/photos/Jm9P0mDPo6A)**
>
> 
> **[By Supratik Deshmukh](https://unsplash.com/photos/iO0I6-mhDEY)**
>
> 
> **[By Felix Mooneeram](https://unsplash.com/photos/evlkOfkQ5rE)**
> [!cards|notion wmed]
> **[By Thibault Penin](https://unsplash.com/photos/AWOl7qqsffM)**
> Extra text
> 
>
> **[By Clint Bustrillos](https://unsplash.com/photos/X-A-LJVAhzk)**
> 
>
> **[By Jiawei Zhao](https://unsplash.com/photos/W-ypTC6R7_k)**
> 
>
> 
> **[By Guillaume TECHER](https://unsplash.com/photos/Jm9P0mDPo6A)**
>
> 
> **[By Supratik Deshmukh](https://unsplash.com/photos/iO0I6-mhDEY)**
>
> 
> **[By Felix Mooneeram](https://unsplash.com/photos/evlkOfkQ5rE)**
## Photo Example
**Cards & Dataview Cards:**
![[Cards And Dataview Cards.png]]
**Dataview List Card Styling:**
![[Callout - Cards Lists - dvl.png]]