.. include:: /Includes.rst.txt

.. _Images-and-figures:

==================
Images and figures
==================

.. contents:: This page
   :backlinks: top
   :class: compact-list
   :depth: 99
   :local:


Bright images with border and shadow
====================================

.. image:: ../images/q150_ffffff.png
   :alt: Image with background color #ffffff
   :class: with-border with-shadow

.. image:: ../images/q150_f8f8f8.png
   :alt: Image with background color #f8f8f8
   :class: with-border with-shadow

.. image:: ../images/q150_eeeeee.png
   :alt: Image with background color #eeeeee
   :class: with-border with-shadow

.. image:: ../images/q150_dddddd.png
   :alt: Image with background color #dddddd
   :class: with-border with-shadow

.. image:: ../images/q150_cccccc.png
   :alt: Image with background color #cccccc
   :class: with-border with-shadow

.. image:: ../images/q150_ffffff.png
   :alt: Image with background color #ffffff
   :class: with-border with-shadow

.. image:: ../images/q150_f8f8f8.png
   :alt: Image with background color #f8f8f8
   :class: with-border with-shadow

.. image:: ../images/q150_eeeeee.png
   :alt: Image with background color #eeeeee
   :class: with-border with-shadow

.. image:: ../images/q150_dddddd.png
   :alt: Image with background color #dddddd
   :class: with-border with-shadow

.. image:: ../images/q150_cccccc.png
   :alt: Image with background color #cccccc
   :class: with-border with-shadow


Bright images with border
=========================

.. image:: ../images/q150_ffffff.png
   :alt: Image with background color #ffffff
   :class: with-border

.. image:: ../images/q150_f8f8f8.png
   :alt: Image with background color #f8f8f8
   :class: with-border

.. image:: ../images/q150_eeeeee.png
   :alt: Image with background color #eeeeee
   :class: with-border

.. image:: ../images/q150_dddddd.png
   :alt: Image with background color #dddddd
   :class: with-border

.. image:: ../images/q150_cccccc.png
   :alt: Image with background color #cccccc
   :class: with-border


Bright images with shadow
=========================

.. image:: ../images/q150_ffffff.png
   :alt: Image with background color #ffffff
   :class: with-shadow

.. image:: ../images/q150_f8f8f8.png
   :alt: Image with background color #f8f8f8
   :class: with-shadow

.. image:: ../images/q150_eeeeee.png
   :alt: Image with background color #eeeeee
   :class: with-shadow

.. image:: ../images/q150_dddddd.png
   :alt: Image with background color #dddddd
   :class: with-shadow

.. image:: ../images/q150_cccccc.png
   :alt: Image with background color #cccccc
   :class: with-shadow


Bright images as figures with caption
=====================================

.. figure:: ../images/q150_ffffff.png
   :alt: Image with background color #ffffff
   :class: with-border with-shadow

   Image with border and shadow and background color #ffffff

.. figure:: ../images/q150_f8f8f8.png
   :alt: Image with background color #f8f8f8
   :class: with-border with-shadow

   Image with border and shadow and background color #f8f8f8

.. figure:: ../images/q150_eeeeee.png
   :alt: Image with background color #eeeeee
   :class: with-border with-shadow

   Image with border and shadow and background color #eeeeee

.. figure:: ../images/q150_dddddd.png
   :alt: Image with background color #dddddd
   :class: with-border with-shadow

   Image with border and shadow and background color #dddddd

.. figure:: ../images/q150_cccccc.png
   :alt: Image with background color #cccccc
   :class: with-border with-shadow

   Image with border and shadow and background color #cccccc


Image float left
================

.. |example-teaser-left| image:: ../images/q150_cccccc.png
   :alt: Left floating image
   :class: float-left with-shadow

|example-teaser-left|
Typesetting is the composition of text by means of arranging physical
types[1] or the digital equivalents. Stored letters and other symbols
(called sorts in mechanical systems and glyphs in digital systems)
are retrieved and ordered according to a language's orthography for
visual display.

.. rst-class:: clear-both

Floating cleared. Below the image.
Typesetting is the composition of text by means of arranging physical
types[1] or the digital equivalents. Stored letters and other symbols
(called sorts in mechanical systems and glyphs in digital systems)
are retrieved and ordered according to a language's orthography for
visual display.


.. |example-teaser-right| image:: ../images/q150_cccccc.png
   :alt: Right floating image
   :class: float-right with-shadow

|example-teaser-right|
Typesetting is the composition of text by means of arranging physical
types[1] or the digital equivalents. Stored letters and other symbols
(called sorts in mechanical systems and glyphs in digital systems)
are retrieved and ordered according to a language's orthography for
visual display.

.. rst-class:: clear-both

Floating cleared. Below the image.
Typesetting is the composition of text by means of arranging physical
types[1] or the digital equivalents. Stored letters and other symbols
(called sorts in mechanical systems and glyphs in digital systems)
are retrieved and ordered according to a language's orthography for
visual display.

Images and Admonitions
======================

..  versionadded:: 13.3
    EXT:form offers a site set that can be included as described here.
    quickstartIntegrators are still possible
    for compatibility reasons but not recommended anymore.

Include the site set "Form Framework" via the :site set in the site
configuration or the custom
site package's site set.

..  figure:: /images/q150_cccccc.png

    Add the site set "Form Framework"

..  note:: Include the site set "Form Framework" via the :site set in the site
    configuration or the custom
    site package's site set.

..  image:: /images/q150_cccccc.png

..  warning:: Include the site set "Form Framework" via the :site set in the site
    configuration or the custom
    site package's site set.

#.  Include the site set

    ..  versionadded:: 13.3
        EXT:form offers a site set that can be included as described here.
        quickstartIntegrators are still possible
        for compatibility reasons but not recommended anymore.

    Include the site set "Form Framework" via the :site set in the site
    configuration or the custom
    site package's site set.

    ..  figure:: /images/q150_cccccc.png

        Add the site set "Form Framework"

    ..  note:: Include the site set "Form Framework" via the :site set in the site
        configuration or the custom
        site package's site set.