Customizable CSS
search

Cards

Simple card

youn can create cards by using the .card class

<div class="card">
  <div class="card-head">
    <img class="card-avatar " />
    <div class="card-titles">
      <div class="card-title">...</div>
      <div class="card-subtitle">...</div>
    </div>
  </div>
  <div class="card-content">
    <div class="card-body">
      ...
    </div>
  </div>
  <div class="card-footer">
    <div class="card-actions">
      <a class="btn flat"> ... </a>
      <a class="btn flat"> ... </a>
    </div>
  </div>
</div>
card avatar image

Card title goes here

some card subtitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas architecto pariatur rem? Inventore, odit! Corporis nam voluptas labore iure commodi neque quam. At similique porro voluptates dolorum dolor vel fugiat.

action 1 action 2

Card with image

<div class="card">
    <img src="https://via.placeholder.com/40" alt="card avatar image" class="card-img">
  <div class="card-head">
    <img class="card-avatar " />
    <div class="card-titles">
      <div class="card-title">...</div>
      <div class="card-subtitle">...</div>
    </div>
  </div>
  <div class="card-content">
    <div class="card-body">
      ...
    </div>
  </div>
  <div class="card-footer">
    <div class="card-actions">
      <a class="btn flat"> ... </a>
      <a class="btn flat"> ... </a>
    </div>
  </div>
</div>
card avatar image
card avatar image

Card title goes here

some card subtitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas architecto pariatur rem? Inventore, odit! Corporis nam voluptas labore iure commodi neque quam. At similique porro voluptates dolorum dolor vel fugiat.

action 1 action 2

On this page

Site

Support

Customizable CSS By Haniel Hernández. 2021