Image Row

- TODO: Add sample images, like 1kb stuff.

Usage ::img-row

You are able to define how many columns e.g. images you want to show in each row.

Empty

::img-row{cols=3}

  

::

Example 3 Columns

::img-row{cols=3}

![Matthias](<url>/Matthias.png)

  

![Romi](<url>/romi.png)

  

![Poncho](<url>/Poncho.png)

::

Results to this:

Keep empty line !

Its important to keep an empty line between the images in the ::img-row component, otherwise it wont put in the right columns.

See example:

::img-row{cols=4}

❌ no empty line between:

![Matthias](<url>/Matthias.png)

![Romi](<url>/romi.png)

  

✅ empty line between:

![Poncho](<url>/Poncho.png)

  

![Romi](<url>/romi.png)

::

Mobile Optimized

The component is mobile optimized, so when you do e.g.: ::img-row{cols=6}

It wont show 6 super tiny images, on the mobile screen, instead it breaks it up in 3 rows.

If you have uneven numbers e.g.: ::img-row{cols=6}

::img-row{cols=6}

![curry](https://source.unsplash.com/random/400x400/?curry)

  

![safran](https://source.unsplash.com/random/400x400/?safran)

  

![Garlic](https://source.unsplash.com/random/400x400/?Garlic)

  

![coriander](https://source.unsplash.com/random/400x400/?coriander)

  

![wasabi](https://source.unsplash.com/random/400x400/?wasabi)

  

![Cumin](https://source.unsplash.com/random/400x400/?Cumin)

::