ux: update for bootstrap figure classes

This commit is contained in:
Henk Verlinde 2022-06-30 14:18:40 +02:00
parent 239aa56b68
commit ba16252b2e
3 changed files with 62 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

View File

@ -1,5 +1,19 @@
figure { figure {
margin: 2rem 0; margin: 0 0 1rem;
display: inline-block;
}
figure img {
margin-bottom: 0.5rem;
line-height: 1;
max-width: 100%;
height: auto;
}
figure figcaption {
margin: 0.25rem 0 0.75rem;
font-size: 0.875em;
color: #6c757d;
} }
.figure-caption { .figure-caption {

View File

@ -10,6 +10,52 @@ images: ["say-hello-to-doks.png"]
contributors: ["Henk Verlinde"] contributors: ["Henk Verlinde"]
--- ---
![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg) ## Remote gif
```md
![Happy Dance by Neil Sanders](https://i.giphy.com/media/hIip12KtxrNU5GG0Ii/giphy.gif?cid=790b7611e72a6d08626c8c4ff1410056fbc51e0ed1f2daab&rid=giphy.gif&ct=s)
```
![Happy Dance by Neil Sanders](https://i.giphy.com/media/hIip12KtxrNU5GG0Ii/giphy.gif?cid=790b7611e72a6d08626c8c4ff1410056fbc51e0ed1f2daab&rid=giphy.gif&ct=s)
## Image in page bundle
```bash
![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg "Optional title")
```
![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg "Optional title")
## Screenshot in page bundle
```bash
![Screenshot](image003.png)
```
![Screenshot](image003.png) ![Screenshot](image003.png)
## Image in assets directory
```bash
![Image](images/harley-davidson.jpg)
```
![Image](images/harley-davidson.jpg)
## Shortcode
### Image in page bundle
```md
{{</* figure src="security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg" alt="Describe your image" caption="For a figure caption can be different than alt text" */>}}
```
{{< figure src="security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg" alt="Describe your image" caption="For a figure caption can be different than alt text" >}}
### Image in assets directory
```md
{{</* figure src="images/harley-davidson.jpg" alt="Harley Davidson" caption="For a figure caption can be different than alt text" */>}}
```
{{< figure src="images/harley-davidson.jpg" alt="Harley Davidson" caption="For a figure caption can be different than alt text" >}}