Tronic247 Material

Cards

Edit this page

The world and Hello

By John Doe

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, animi voluptates ea illum nostrum quo sapiente ducimus facere est fugit repellat ratione asperiores culpa itaque dolores ad reprehenderit quas corporis!

<div class="card">
    <div class="card-ripple-container ripple-e">
        <div class="card-header">
            <img src="https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" class="card-img">
            <h3 class="card-title">The world and Hello</h3>
            <h4 class="card-meta-title">By John Doe</h4>
        </div>
        <div class="card-content">
            <p class="card-meta-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, animi voluptates ea illum nostrum quo sapiente ducimus facere est fugit repellat ratione asperiores culpa itaque dolores ad reprehenderit quas corporis!</p>
        </div>
    </div>
    <div class="card-footer">
        <div class="card-footer-start">
            <button class="text">Button 1</button>
        </div>
        <div class="card-footer-end">
            <button class="icon"><i class="material-icons">favorite</i></button>
            <button class="icon"><i class="material-icons">favorite</i></button>
        </div>
    </div>
</div>

Basic Card

The world and Hello

By John Doe

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, animi voluptates ea illum nostrum quo sapiente ducimus facere est fugit repellat ratione asperiores culpa itaque dolores ad reprehenderit quas corporis!

<div class="card">
    <div class="card-ripple-container ripple-e">
        <div class="card-header">
            <img src="https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" class="card-img">
            <h3 class="card-title">The world and Hello</h3>
            <h4 class="card-meta-title">By John Doe</h4>
        </div>
        <div class="card-content">
            <p class="card-meta-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, animi voluptates ea illum nostrum quo sapiente ducimus facere est fugit repellat ratione asperiores culpa itaque dolores ad reprehenderit quas corporis!</p>
        </div>
    </div>
</div>

Collapsed Card

<div class="card collapsed">
    <div class="card-ripple-container ripple-e">
        <div class="card-header">
            <img src="https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" class="card-img">
            <div class="card-header-content">
                <h3 class="card-title">The world and Hello</h3>
                <h4 class="card-meta-title">By John Doe</h4>
            </div>
        </div>
        <div class="card-content">
            <p class="card-meta-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, animi voluptates ea illum nostrum quo sapiente ducimus facere est fugit repellat ratione asperiores culpa itaque dolores ad reprehenderit quas corporis!</p>
        </div>
    </div>
    <div class="card-footer">
        <div class="card-footer-start">
            <button class="text">Button 1</button>
        </div>
        <div class="card-footer-end">
            <button class="icon"><i class="material-icons">favorite</i></button>
            <button class="icon"><i class="material-icons">favorite</i></button>
        </div>
    </div>
</div>

Card With Header

The world and Hello

By John Doe

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, animi voluptates ea illum nostrum quo sapiente ducimus facere est fugit repellat ratione asperiores culpa itaque dolores ad reprehenderit quas corporis!

<div class="card">
    <div class="card-header header-before">
      <div class="row">
        <div class="col-2 me-3">
          <img src="https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" class="rounded-xll" width="40" height="40">
        </div>
        <div class="col-8">
          <h3 class="card-title">The world and Hello</h3>
          <h4 class="card-meta-title">By John Doe</h4>
        </div>
      </div>
    </div>
    <div class="card-ripple-container ripple-e">
      <div class="card-header">
        <img src="https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" class="card-img">
      </div>
      <div class="card-content">
        <p class="card-meta-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, animi voluptates ea illum nostrum quo sapiente ducimus facere est fugit repellat ratione asperiores culpa itaque dolores ad reprehenderit quas corporis!</p>
      </div>
    </div>
    <div class="card-footer">
      <div class="card-footer-start">
        <button class="text">Button 2</button>
      </div>
      <div class="card-footer-end">
        <button class="icon"><i class="material-icons">favorite</i></button>
        <button class="icon"><i class="material-icons">favorite</i></button>
      </div>
    </div>
</div>

Outlined card

Add the class outlined to the .card element.

The world and Hello

By John Doe

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, animi voluptates ea illum nostrum quo sapiente ducimus facere est fugit repellat ratione asperiores culpa itaque dolores ad reprehenderit quas corporis!

<div class="card outlined">
    <div class="card-ripple-container ripple-e">
        <div class="card-header">
            <img src="https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" class="card-img">
            <h3 class="card-title">The world and Hello</h3>
            <h4 class="card-meta-title">By John Doe</h4>
        </div>
        <div class="card-content">
            <p class="card-meta-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, animi voluptates ea illum nostrum quo sapiente ducimus facere est fugit repellat ratione asperiores culpa itaque dolores ad reprehenderit quas corporis!</p>
        </div>
    </div>
</div>