iMobaio iMobaio - 1 year ago 51
Android Question

CardView for web pages

On Android there's a component called CardView which displays a box like a card, with rounded corners, shadows, etc. I'm willing to achieve the same thing in HTML, is there any library, CSS or sample to make it happen?

Answer Source

There is a library called Materialize, its compliant with Material designs standards.

http://materializecss.com/cards.html

Here's a snippet from their website.

<div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

You can add the library to your site by adding this inside the head tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>  
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download