کارت محتوا ساده و کاربردی

کارت ها می‌توانند بخش های مختلف را از یکدیگر تفکیک کنند تا کاربران بتوانند در انتخاب بخش های مختلف راحت تر تصمیم گیری کنند.

کارت محتوا

این یک کارت ساده است که محتوا و المان ها می‌توانند در داخل آن قرار بگیرند.

عنوان کوچک

<div class="amd-card">
    <h3 class="--title">عنوان کارت</h3>
    <div class="--content">
        <p>این محتوا برای کارت است.</p>
    </div>
</div>

عنوان بزرگتر

<div class="amd-card">
    <h3 class="--title-2">یک عنوان بزرگتر</h3>
    <div class="--content">
        <p>این محتوا برای کارت است.</p>
    </div>
</div>

کارت با فوتر

<div class="amd-card">
    <h3 class="--title-2">یک عنوان بزرگتر</h3>
    <div class="--content">
        <p>این محتوا برای کارت است.</p>
    </div>
    <div class="--footer">
        <button type="button" class="btn">Submit</button>
        <button type="button" class="btn btn-text">Dismiss</button>
    </div>
</div>

کارت عنوان دار

کارت های عنوان دار توجه بیشتری جلب می‌کنند، به همین دلیل از آنها برای کاربرد های خاص تر مانند لیست های ویژه استفاده کنید.

کارت های ساده

<div class="amd-card --title-box">
    <h3 class="--title">تاریخچه خرید</h3>
    <div class="--content">
        <p>درحال حاضر هیچ خریدی ندارید.</p>
    </div>
</div>

کارت عنوان دار به همراه دکمه

<div class="amd-card --title-box">
    <h3 class="--title">
        تاریخچه خرید;
        <button class="btn --transparent --button --right mlr-8 --sm">مشاهده خرید ها</button>
        <button class="btn --transparent --button --left mlr-8 --sm">رفتن به فروشگاه</button>
    </h3>
    <div class="--content">
        <p>درحال حاضر هیچ خریدی ندارید.</p>
    </div>
</div>

رنگ های کارت های عنوان دار

<div class="amd-card --title-box">
    <h3 class="--title bg-red-im">
        تاریخچه خرید;
        <button class="btn --transparent --button --right mlr-8 --sm">مشاهده خرید ها</button>
        <button class="btn --transparent --button --left mlr-8 --sm">رفتن به فروشگاه</button>
    </h3>
    <div class="--content">
        <p>درحال حاضر هیچ خریدی ندارید.</p>
    </div>
</div>

با اضافه کردن رنگ ها به عنوان می‌توانید رنگ پس زمینه آنها را تغییر دهید.

<h3 class="--title {COLOR_CLASS}"></h3>

کارت آیکن دار

کارت های آیکن دار در صفحه اصلی داشبورد استفاده شده اند و خلاصه ای از فعالیت ها را مانند تاریخ، خرید ها، وظایف و... نمایش می‌دهند.

<div class="amd-card --boxed">
    <div class="--icon">
        <!-- Icon -->
    </div>
    <div class="--title">تاریخ</div>
    <div class="--content">
        <!-- Card content -->
    </div>
    <div class="--footer">
        <!-- Card footer -->
    </div>
</div>

کارت تاریخ

<div class="amd-card --boxed">
    <div class="--icon">
        <span class="mi _icon_">today</span>
    </div>
    <div class="--title">Date</div>
    <div class="--content">
        <h4>چهارشنبه 26 دی</h4>
        <p>1403</p>
    </div>
    <div class="--footer">
        <span>10:28</span>
    </div>
</div>

کارت درحال بارگیری

با افزودن المان نوار بارگیری به بالای کارت می‌توانید آن را به کارت اضافه کنید.

<div class="amd-card" id="my-card">
    <h3 class="--title">لطفا صبر کنید</h3>
    <div class="--content">درحال پردازش درخواست شما...</div>
    <div class="indeterminate-progress-bar --card-progress"><div class="indeterminate-progress-bar__progress"></div></div>
</div>

همچنین می‌توانید وضعیت نوار بارگیری را از طریق jQuery تغییر دهید:

$("#my-card").cardLoader(true); // Show loader
$("#my-card").cardLoader(false); // Hide loader

ستون کارت

ستون های کارت یک روش برای مرتب کردن کارت ها به صورت واکنشگرا (responsive) هستند که نیاز به انجام هیچ کار پیچیده ای نیست و تنها کافیست تگ div را به آن اضافه کنید:

<div class="card-columns template-1">
    <!-- Your cards here! -->
</div>

لیست کارت

<div class="card-columns template-1">

    <!-- Card 1 -->
    <div class="amd-card">
        <h3 class="--title">کارت #1</h3>
        <div class="--content">
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.</p>
        </div>
    </div>

    <!-- Card 2 -->
    <div class="amd-card">
        <h3 class="--title">کارت #2</h3>
        <div class="--content">
            <p>سلام دنیا!</p>
        </div>
    </div>

    <!-- Card 3 -->
    <div class="amd-card">
        <h3 class="--title">کارت #3</h3>
        <div class="--content">
            <p>این محتوا برای کارت است.</p>
        </div>
    </div>

    <!-- Card 4 -->
    <div class="amd-card">
        <h3 class="--title">کارت #4</h3>
        <div class="--content">
            <p>صفحه مورد نظر یافت نشد</p>
        </div>
    </div>

    <!-- Card 5 -->
    <div class="amd-card">
        <h3 class="--title">کارت #5</h3>
        <div class="--content">
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.</p>
        </div>
    </div>

    <!-- Card 6 -->
    <div class="amd-card">
        <h3 class="--title">کارت #6</h3>
        <div class="--content">
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.</p>
        </div>
    </div>

    <!-- Card 7 -->
    <div class="amd-card">
        <h3 class="--title">کارت #7</h3>
        <div class="--content">
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.</p>
        </div>
    </div>

</div>