#Cards

Basic Cards

You can create cards with few steps. By default cards have a max width of 35em, but you can totally customize them.

You only need two classes to create a card: be-card and be-card-container.

Title Basic Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt sed do eiusmod sed ut labore et dolore magna aliqua.

<div class="be-card">
    <div class="be-card-container">
    <h2>Title Basic Card</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

Cards with img

You can add images, buttons and other accessories to the cards. You can also change the arrangement of these components.

Image below

<div class="be-column-container be-width-50">
   <div class="be-col-3">
     <figure class="be-card be-hover-shadow">
        <img src="/images/vertical-img-2.svg" alt="Card Person">
        <figcaption class="be-card-container be-text-white be-text-center be-bg-sun-flower">
        <strong>Some Title here</strong>
        </figcaption>
     </figure>
   </div>

    <div class="be-col-3">
        <div class="be-card be-hover-shadow">
          <div class="be-card-container be-bg-orange be-text-white be-text-center">
            <strong>Image below</strong>
            </div>
           <img src="/images/vertical-img-2.svg" alt="Card Person">
        </div>
   </div>

   <div class="be-col-3">
      <figure class="be-card be-hover-shadow">
        <img src="/images/vertical-img-2.svg" alt="Card Person">
        <figcaption class="be-card-container be-text-white be-text-center be-bg-orange">
        <strong>Some Title here</strong>
        </figcaption>
      </figure>
    </div>

    <div class="be-col-3">
      <figure class="be-card be-hover-shadow">
        <img src="/images/vertical-img-2.svg" alt="Card Person">
        <figcaption class="be-card-container be-text-white be-text-center be-bg-pumpkin">
        <strong>Some Title here</strong>
        </figcaption>
      </figure>
    </div>
 </div>

Please note that following good practices, if it is an image card it is recommended to use the figure and figcaption labels.

Not image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt sed do eiusmod sed ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod sed do eiusmod tempor incididunt ut labore et dolore.

Image below

This card use the picture below...

    <figure class="be-card be-hover-shadow">
        <img src="/path-to-images/image.svg" alt="Card Person">
        <figcaption class="be-card-container">
        <h4>Juana Saltitopa</h4>
        <p>Onte of the first revolutionary woman in Amarica</p>
        </figcaption>
    </figure>

If you want the card to be responsive you must include the code inside a container. You can use the Flexbox or Grid layouts.

Group of three cards code

Remember to keep the card title and text inside be-card-container, while the image must be inside be-card.

<!-- group tree Cards -->
<div class="be-column-container">

<div class="be-col-2">
    <figure class="be-card be-hover-shadow">
        <img src="/your-path/image.svg"  alt="Card Person">
        <figcaption class="be-card-container">
        <h2>Juana Saltitopa</h2>
        <p>One of the first revolutionary woman in America.</p>
        </figcaption>
    </figure>
</div>

<div class="be-col-2">
    <div class="be-card be-rounded-bottom be-hover-shadow">
        <div class="be-card-container be-align-center">
        <h4>Not image</h4><hr>
        <p>Lorem ipsum dolor sit amet... </p>
        <button class="be-btn be-btn-ghost">Here we go</button>
        </div>
    </div>
</div>
 

<div class="be-col-2">
    <div class="be-card be-hover-shadow">
          <div class="be-card-container">
            <h2>Image below</h2>
            <p>This card...</p>
            </div>
            <img src="/your-path/image.svg" alt="Card Person">
    </div>
  </div>
  
</div>
<!-- End Cards -->

Custom Card

This card includes several classes to define its size, color and position of the image.

This is a Tiny Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 <div class="be-card be-width-20 be-rounded be-shadow be-bg-clouds">
     <div class="be-card-container">
        <h4><strong>This is Tiny Card</strong></h4>
        <img src="/your-path/image.svg"  alt="Card Person" class="be-rounded be-float-left be-width-5">
         <p class="be-text-muted">Lorem ipsum dolor...</p>
      </div>
 </div>

:Prices Cards

Prices Cards are intended for a unordened list of items or characteristics that wish to be offered. They can be fully customized.

<!--Code for one simple Card Price -->
<ul class="be-card-price">
  <li class="be-price-header be-bg-peter-river">Starter</li>
  <li class="be-bg-clouds">$ 49.99 / year</li>
  <li>100GB Storage</li>
  <li>10k Commits / Mo</li>
  <li>Own Domains</li>
  <li>Git Repo Deploy</li>
  <li class="be-bg-clouds"><a href="#" class="be-btn be-bg-peter-river be-text-white">Sign Up</a></li>
</ul>

Community
Free / Forever
10GB Storage
1k Commits / Mo
Own Domains
Git Repo Deploy
Of course!!

Starter
$ 49.99 / year
100GB Storage
10k Commits / Mo
Own Domains
Git Repo Deploy
I Want it!!

Team
$ 99.99 / year
Unlimited Storage
Unlimited Commits
Own Domains
Git Repo Deploy
Let's Go!!


<!-- card price -->
<div class="be-column-container be-gap-10">
<!-- first card price -->
<div class="be-col-3">
  <ul class="be-card-price be-hover-shadow">
    <li class="be-price-header be-bg-asbestos">Community</li>
    <li class="be-bg-clouds">Free / Forever</li>
    <li>10GB Storage</li>
    <li>1k Commits / Mo</li>
    <li>Own Domains</li>
    <li>Git Repo Deploy</li>
    <li class="be-bg-clouds"><a href="#" class="be-btn be-bg-asbestos be-text-black">Of course!!</a></li>
  </ul>
  </div>

<!-- second card price -->
<div class="be-col-3">
  <ul class="be-card-price be-hover-shadow">
    <li class="be-price-header be-bg-peter-river">Starter</li>
    <li class="be-bg-clouds">$ 49.99 / year</li>
    <li>100GB Storage</li>
    <li>10k Commits / Mo</li>
    <li>Own Domains</li>
    <li>Git Repo Deploy</li>
    <li class="be-bg-clouds"><a href="#" class="be-btn be-bg-peter-river be-text-white">I Want it!!</a></li>
  </ul>
  </div>
<!-- third card price -->
<div class="be-col-3">
  <ul class="be-card-price be-hover-shadow">
    <li class="be-price-header be-bg-asbestos">Team</li>
    <li class="be-bg-clouds">$ 99.99 / year</li>
    <li>Unlimited Storage</li>
    <li>Unlimited Commits</li>
    <li>Own Domains</li>
    <li>Git Repo Deploy</li>
    <li class="be-bg-clouds"><a href="#" class="be-btn be-bg-asbestos be-text-black">Let's Go!!</a></li>
  </ul>
  </div>

  </div>

  <!-- Code for complete example shown -->

You can also group multiple Card Price in one Grid container. See Layout for more details on the Grit Layout.

Community
Free / Forever
10GB Storage
1k Commits / Mo
Own Domains
Git Repo Deploy
Of course!!

Community
Free / Forever
10GB Storage
1k Commits / Mo
Own Domains
Git Repo Deploy
Of course!!

Community
Free / Forever
10GB Storage
1k Commits / Mo
Own Domains
Git Repo Deploy
Of course!!

<div class="be-grid-container-3">

<ul class="be-card-price be-hover-shadow">
    <li class="be-price-header">Community</li>
    <li class="be-bg-clouds">Free / Forever</li>
    <li>10GB Storage</li>
    <li>1k Commits / Mo</li>
    <li>Own Domains</li>
    <li>Git Repo Deploy</li>
    <li class="be-bg-clouds"><a href="#" class="be-btn be-bg-asbestos be-text-black">Of course!!</a></li>
  </ul>
<ul class="be-card-price be-hover-shadow">
    <li class="be-price-header">Community</li>
    <li class="be-bg-clouds">Free / Forever</li>
    <li>10GB Storage</li>
    <li>1k Commits / Mo</li>
    <li>Own Domains</li>
    <li>Git Repo Deploy</li>
    <li class="be-bg-clouds"><a href="#" class="be-btn be-bg-asbestos be-text-black">Of course!!</a></li>
  </ul>
<ul class="be-card-price be-hover-shadow">
    <li class="be-price-header">Community</li>
    <li class="be-bg-clouds">Free / Forever</li>
    <li>10GB Storage</li>
    <li>1k Commits / Mo</li>
    <li>Own Domains</li>
    <li>Git Repo Deploy</li>
    <li class="be-bg-clouds"><a href="#" class="be-btn be-bg-asbestos be-text-black">Of course!!</a></li>
  </ul>

</div>