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

<h2>Cards</h2>

@*
    <h4># Example</h4>

    <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 href="#">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>

<h4># Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-card class="text-center">
            <abp-card-header>
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </abp-card-header>
            <abp-card-body title="Special title treatment">
                <abp-card-text>With supporting text below as a natural lead-in to additional 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 class="text-center"&gt;
    &lt;abp-card-header&gt;
        &lt;ul class="nav nav-tabs card-header-tabs"&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link active" href="#"&gt;Active&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/abp-card-header&gt;
    &lt;abp-card-body title="Special title treatment"&gt;
        &lt;abp-card-text&gt;With supporting text below as a natural lead-in to additional 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>