metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Documentation and examples for displaying related images and text with the figure component in Metro 4."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Figures - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Figures</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Figures</h1> <p class="text-leader"> Documentation and examples for displaying related images and text with the figure component in Metro 4. </p>  <p> Anytime you need to display a piece of content—like an image with an optional caption, consider using a <code><figure></code>. </p> <p> Use the included <code>.figure</code>, <code>.image</code> and <code>.caption</code> classes to provide some baseline styles for the HTML5 <code><figure></code> and <code><figcaption></code> elements. Images in figures are fluid and are made responsive with <code>max-width: 100%</code> and <code>height: auto</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> </div> <div class="cell-md-4"> <figure> <img data-src="holder.js/100px250"> <figcaption>A caption</figcaption> </figure> </div> <div class="cell-md-4"> </div> </div> </div> <pre class=""><code> <figure> <img data-src="holder.js/400x300"> <figcaption>A caption for the above image</figcaption> </figure> </code></pre> <p> Aligning the figure’s caption is easy with our <a href="typography.html#_text_alignment">text alignment classes</a>. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> <figure> <img data-src="holder.js/100px250"> <figcaption class="text-left">A caption</figcaption> </figure> </div> <div class="cell-md-4"> <figure> <img data-src="holder.js/100px250"> <figcaption class="text-center">A caption</figcaption> </figure> </div> <div class="cell-md-4"> <figure> <img data-src="holder.js/100px250"> <figcaption class="text-right">A caption</figcaption> </figure> </div> </div> </div> <pre class=""><code> <figure> <img data-src="holder.js/400x300"> <figcaption class="text-right">A caption for the above image</figcaption> </figure> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/holder.min.js"></script> <script src="js/site.js"></script>    </body> </html>