abp/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml

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

<h2>Cards</h2>

@*
    <div class="demo-with-code">
        <div class="demo-area">
        </div>
        <div class="code-area">
    <pre></pre>
        </div>
    </div>
*@

<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/card/" target="_blank"> Bootstrap card</a>.</p>

<h4># Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-card>
            <abp-card-header>Card header</abp-card-header>
            <abp-card-body>Card body</abp-card-body>
        </abp-card>
    </div>
    <div class="code-area">
        <pre>&lt;abp-card&gt;
    &lt;abp-card-header&gt;Card header&lt;/abp-card-header&gt;
    &lt;abp-card-body&gt;Card body&lt;/abp-card-body&gt;
&lt;/abp-card&gt;</pre>
    </div>
</div>

<h4># Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-card style="width: 18rem;">
            <abp-card-body title="Card title" subtitle="Card subtitle">
                <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
                <a abp-card-link>Card link</a>
                <a abp-card-link href="#">Another link</a>
            </abp-card-body>
        </abp-card>
    </div>
    <div class="code-area">
        <pre>
&lt;abp-card style="width: 18rem;"&gt;
    &lt;abp-card-body title="Card title" subtitle="Card subtitle"&gt;
        &lt;abp-card-text&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/abp-card-text&gt;
        &lt;a abp-card-link href="#"&gt;Card link&lt;/a&gt;
        &lt;a abp-card-link href="#"&gt;Another link&lt;/a&gt;
    &lt;/abp-card-body&gt;
&lt;/abp-card&gt;
</pre>
    </div>
</div>

<h4># Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-card style="width: 18rem;">
            <img abp-card-image="Top" src="~/imgs/demo/300x200.png" alt="Card image cap">
            <abp-card-body>
                <abp-card-title>Card title</abp-card-title>
                <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </abp-card-body>
        </abp-card>
    </div>
    <div class="code-area">
        <pre>
&lt;abp-card style="width: 18rem;"&gt;
    &lt;img abp-card-image="Top" src="~/imgs/demo/300x200.png" alt="Card image cap"&gt;
    &lt;abp-card-body&gt;
        &lt;abp-card-title&gt;Card title&lt;/abp-card-title&gt;
        &lt;abp-card-text&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/abp-card-text&gt;
        &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
    &lt;/abp-card-body&gt;
&lt;/abp-card&gt;
</pre>
    </div>
</div>

<hr />

<a asp-page="../">&lt; back</a>