# Rich Content & Media Layout Demo

Rich-content example with front matter

- layout: 2-col
- pageTocStyle: sidebar
- pageHeroStyle: background
- pageFeatureImage: img/07.webp

## Images

### Basic Markdown Syntax

![qwe](/img/animated-webp-supported.webp "[Source](https://mathiasbynens.be/demo/animated-webp)")

### Masonry Shortcode

{{< masonry >}}

- src: /img/01.webp
  alt: Biplane
- src: /img/02.webp
  alt: Fly high
- src: /img/03.webp
  alt: Contrails
- src: /img/04.webp
  alt: Parapet
- src: /img/05.webp
  alt: Wing
- src: /img/06.webp
  alt: Eaves
- src: /img/07.webp
  alt: Biplane sunset
- src: /img/drop.svg
  alt: SVG sample
  caption: example of SVG image
- src: https://cdn.zsl0621.cc/2025/docs/gemini-imagen-3-git-cover---2025-04-27T17-47-47.webp
  alt: External image sample
  caption: example of external image

{{< /masonry >}}

### Gallery Shortcode

{{< gallery ratio="16/7" fit="cover" arrows=false >}}

- match: /img/*.webp
- src: /img/drop.svg

{{< /gallery >}}

### Cols Shortcode

{{% cols widths="70%,30%" rwd=false %}}

![qwe](/img/01.webp)

<!-- cell -->

{{< typeit speed="50" loop="true" tag="p" >}}
Nemo enim ipsam voluptatem quia voluptas sit.
{{< /typeit >}}

{{% /cols %}}

{{% cols widths="50,50" rwd=false %}}

![qwe](/img/02.webp)

<!-- cell -->

![qwe](/img/04.webp)

{{% /cols %}}

<!-- Col Start -->

{{% cols widths="67%,33%" %}}

{{% cols widths="67%,33%" rwd=false %}}

![qwe](/img/07.webp)

<!-- cell -->

![qwe](/img/06.webp)
![qwe](/img/02.webp)

{{% /cols %}}

<!-- cell -->

Sed[^foo] ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

{{% /cols %}}

[^foo]: Example of footnote inside shortcodes.

<!-- Col END -->

{{% cols widths="50,50" rwd=true %}}

{{% cols widths="50,50" rwd=false %}}

![qwe](/img/03.webp)

<!-- cell -->

![qwe](/img/05.webp)

{{% /cols %}}

<!-- cell -->

{{% cols widths="50,50" rwd=false %}}

![qwe](/img/04.webp)

<!-- cell -->

![qwe](/img/07.webp)

{{% /cols %}}

{{% /cols %}}

*Photo credit: [Pixabay](https://pixabay.com/photos/aircraft-double-decker-biplane-1813731/)*