Card

یک کامپوننت انعطاف پذیر و قابل ترکیب

رنگ ندارد
اندازه ندارد
متغیر دارد

کامپوننت card شامل چندین المان هست که می توان آنها را ترکیب کرد:

  • card: بخش اصلی
    • card-header: یک بخش افقی سایه دار
      • card-header-title: متن ضخیم راست چین
      • card-header-icon: مکان آیکون
    • card-image: بخش عریض برای تصویر ریسپانسیو
    • card-content: یک بخش چند منظوره برای هر المانی
    • card-footer: یک لیست افقی از کنترلرها
      • card-footer-item: لیست قابل تکرار
Since 0.5.3

می توان با افزودن اصلاح کننده is-centered به card-header-title عنوان را وسط چین کرد.


Placeholder image
Placeholder image

John Smith

@johnsmith

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است @bulmaio. #css #responsive

<div class="card">
 <div class="card-image">
  <figure class="image is-4by3">
   <img src="https://pars-bulma.com/images/placeholders/1280x960.png" alt="Placeholder image">
  </figure>
 </div>
 <div class="card-content">
  <div class="media">
   <div class="media-left">
    <figure class="image is-48x48">
     <img src="https://pars-bulma.com/images/placeholders/96x96.png" alt="Placeholder image">
    </figure>
   </div>
   <div class="media-content">
    <p class="title is-4">John Smith</p>
    <p class="subtitle is-6">@johnsmith</p>
   </div>
  </div>

  <div class="content">
  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است <a>@bulmaio</a>.
   <a href="#">#css</a> <a href="#">#responsive</a>
   <br>
   <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
  </div>
 </div>
</div>

کامپوننت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است. @bulmaio. #css #responsive

<div class="card">
 <header class="card-header">
  <p class="card-header-title">
   Component
  </p>
  <a href="#" class="card-header-icon" aria-label="more options">
   <span class="icon">
    <i class="fas fa-angle-down" aria-hidden="true"></i>
   </span>
  </a>
 </header>
<div class="card-content">
<div class="content">
 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
 <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
 <br>
 <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
 </div>
</div>
<footer class="card-footer">
 <a href="#" class="card-footer-item">Save</a>
 <a href="#" class="card-footer-item">Edit</a>
 <a href="#" class="card-footer-item">Delete</a>
</footer>
</div>
                                    

“لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.”

Jeff Atwood


<div class="card">
 <div class="card-content">
  <p class="title">
   “لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.”
  </p>
  <p class="subtitle">
   Jeff Atwood
  </p>
 </div>
 <footer class="card-footer">
  <p class="card-footer-item">
   <span>
     View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
   </span>
 </p>
 <p class="card-footer-item">
  <span>
   Share on <a href="#">Facebook</a>
  </span>
 </p>
 </footer>
</div>
                                    

متغیرها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$card-color color $text hsl(0, 0%, 29%)
$card-background-color color $scheme-main hsl(0, 0%, 100%)
$card-shadow size 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$card-radius size 0.25rem
$card-overflow string hidden
$card-header-background-color string transparent
$card-header-color color $text-strong hsl(0, 0%, 21%)
$card-header-padding size 0.75rem 1rem
$card-header-shadow size 0 0.125em 0.25em rgba($scheme-invert, 0.1)
$card-header-weight font-weight $weight-bold 700
$card-content-background-color string transparent
$card-content-padding size 1.5rem
$card-footer-background-color string transparent
$card-footer-border-top size 1px solid $border-light
$card-footer-padding size 0.75rem
$card-media-margin size $block-spacing 1.5rem