Help:Shortcode Figure

{{< figure caption="The caption line" >}}
  Hello World
{{< /figure >}}

<!--

  Figure Shortcode
  ================

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/figure.html
  STYLE:  /assets/scss/components/_shortcode_img.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Figure.md

  Description
  -----------

  Use the figure shortcode to create a HTML figure.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->

<figure{{ with .Get "figure_class" }} class="{{.}}"{{ end }}>
  {{ .Inner | safeHTML }}
  {{ with .Get "caption" }}<figcaption class="figure-caption">
    <center><em>{{ . | safeHTML }}</em></center></figcaption>{{ end }}
</figure>

/*

  Img Shortcode
  =============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/img.html
  STYLE:  /assets/scss/components/_shortcode_img.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Img.md
  LIB:    medium-zoom
  SCRIPT: /assets/js/medium-zoom.js

  Figure Shortcode
  ================

  LAYOUT: /layouts/shortcodes/figure.html
  STYLE:  /assets/scss/components/_shortcode_img.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Figure.md

*/

figure {
  margin: 2rem 0;
}

.figure-caption {
  margin: 0.25rem 0 0.75rem;
  text-align: center;
}

figure.wide {
  margin: 2rem -1.5rem;
}

figure.wide .figure-caption {
  margin: 0.25rem 1.5rem 0.75rem;
}

@include media-breakpoint-up(md) {
  figure.wide {
    margin: 2rem -2.5rem;
  }

  figure.wide .figure-caption {
    margin: 0.25rem 2.5rem 0.75rem;
  }
}

@include media-breakpoint-up(lg) {
  figure.wide {
    margin: 2rem -5rem;
  }

  figure.wide .figure-caption {
    margin: 0.25rem 5rem 0.75rem;
  }
}

.blur-up {
  filter: blur(5px);
}

.blur-up.lazyloaded {
  filter: unset;
}

.img-simple {
  margin-top: 0.375rem;
  margin-bottom: 1.25rem;
}