1. Layouts - images only
align-start | center | align-end |
|---|---|---|
| 
| 
|
2. Layouts with wrapping text
wrap-left | wrap-right |
|---|---|
This text should sit to the right of the image and wrap around it. So if we keep typing it will stay to the right of the image. | This text should sit to the left of the image and wrap around it. So if we keep typing it will stay to the left of the image. |
3. Widths (center layout)
|
|
|
|---|---|---|
| | |
Same size but in a narrow column vs a wide column
|
|
|---|---|
| |
|
|
4. Adjacent images in one cell
Two wrap-left siblings | Wrap-left then wrap-right | Two align-start (stacked) |
|---|---|---|
| | |
wrap-left then center | wrap-left, paragraph then wrap-left | wrap-right then wrap left |
| Paragraph between two wrap-left images. | |
5. Inline vs Block
Media Inline | Small block |
|---|---|
Here the image is reduced | Here the image is block and is not inline |
|
|
6. Captions
Center + caption | wrap-left + caption + text |
|---|---|
I am pusheen! |
I am pusheen! Text wrapping around a captioned wrap-left image. The caption should stay with the image, not with this paragraph. |