Cards

Different types of cards.

Developer laptop

By developer team

This laptop will help you develop websites really faster. With Axentix already installed on it, its performances are enhanced by nearly 250%.

1.299$

</> Show code

Simple cards#

Axentix basic cards are made to be used inside a grix. They are usefull to display text.

Card header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non veritatis excepturi natus impedit distinctio quidem, nesciunt id possimus quia, tempore fuga doloribus reiciendis facilis voluptate accusantium! Adipisci est nam soluta!

Card footer

<div class="card shadow-1 white">
  <div class="card-header">Card header</div>

  <div class="card-content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non veritatis excepturi natus impedit distinctio quidem, nesciunt id
      possimus quia, tempore fuga doloribus reiciendis facilis voluptate accusantium! Adipisci est nam soluta!
    </p>
  </div>

  <div class="card-footer">Card footer</div>
</div>

Image cards#

Axentix image cards are made to be used inside a grix. They are usefull to easily display images.
You can create special cards using our .card-header, .card-content, and .card-footer classes.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi suscipit harum repellat architecto unde vel numquam rem doloribus maiores deserunt tenetur labore.

<div class="card light-shadow-2 white">
  <div class="card-image">
    <img src="https://picsum.photos/800/600?random=1" alt="logo" />
  </div>

  <div class="card-content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi suscipit harum repellat architecto unde vel
    numquam rem doloribus maiores deserunt tenetur labore.
  </div>

  <div class="card-footer">
    <button class="btn btn-small primary rounded-1">Action</button>
  </div>
</div>

Horizontal cards#

Create horizontal cards using flexbox !

Left side

Header

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<div class="card shadow-1 fx-row white">
  <div class="d-flex vcenter fx-center p-4 bd-r-1 bd-r-solid bd-grey ">
    <p>Left side</p>
  </div>

  <div class="d-flex fx-col fx-grow">
    <div class="card-header">Header</div>
    <div class="card-content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

Rounded cards#

Axentix cards can be rounded using the rounded classes.

Card header

Card footer

<div class="card shadow-1 rounded-3 white">
  <div class="card-header">Card header</div>

  <div class="card-content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non veritatis excepturi natus impedit distinctio quidem, nesciunt id
      possimus quia, tempore fuga doloribus reiciendis facilis voluptate accusantium! Adipisci est nam soluta!
    </p>
  </div>

  <div class="divider"></div>

  <div class="card-footer">Card footer</div>
</div>

Hoverable cards#

Use the hoverable classes to create a great effect when hovered.

Card header

<div class="card shadow-1 hoverable-1 rounded-3 white">
  <div class="card-header">Card header</div>
  <div class="card-content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non veritatis excepturi natus impedit distinctio quidem, nesciunt id
      possimus quia, tempore fuga doloribus reiciendis facilis voluptate accusantium! Adipisci est nam soluta!
    </p>
  </div>
</div>

Cards Simple cards Image cards Horizontal cards Rounded cards Hoverable cards