@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ImagesModel
@{
    ViewData["Title"] = "Images";
}

<h2>Images</h2>

<p>Based on <a href="https://getbootstrap.com/docs/4.1/content/images/" target="_blank"> Bootstrap Images</a>.</p>

<h4># Image Examples</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-image src="..." responsive="true"></abp-image>
    </div>
    <div class="code-area">
        <pre>
&lt;abp-image src=&quot;...&quot; responsive=&quot;true&quot;&gt;&lt;/abp-image&gt;
</pre>
    </div>
</div>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-image src="..." thumbnail="true" rounded="true"></abp-image>
    </div>
    <div class="code-area">
        <pre>
&lt;abp-image src=&quot;...&quot; thumbnail=&quot;true&quot; rounded=&quot;true&quot;&gt;&lt;/abp-image&gt;
</pre>
    </div>
</div>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-image src="..." rounded="true" position="Left"></abp-image>
        <abp-image src="..." rounded="true" position="Center"></abp-image>
        <abp-image src="..." rounded="true" position="Right"></abp-image>
    </div>
    <div class="code-area">
        <pre>
&lt;abp-image src=&quot;...&quot; rounded=&quot;true&quot; position=&quot;Left&quot;&gt;&lt;/abp-image&gt;
&lt;abp-image src=&quot;...&quot; rounded=&quot;true&quot; position=&quot;Center&quot;&gt;&lt;/abp-image&gt;
&lt;abp-image src=&quot;...&quot; rounded=&quot;true&quot; position=&quot;Right&quot;&gt;&lt;/abp-image&gt;
</pre>
    </div>
</div>