lime-Card

In this example below you will see how to do a lime-Card with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Tenesan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Tenesan ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>lime-Card</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      *,
html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

* + * {
  margin-top: 26px;
}

.limecard {
  width: 100%;
  max-width: 528px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
}
.limecard__meta {
  padding-top: 9.6px;
  padding-bottom: 9.6px;
  border-bottom: 1px solid #eee;
}
.limecard__meta, .limecard__title, .limecard__body {
  padding-right: 9.6px;
  padding-left: 9.6px;
}
.limecard__body {
  padding-bottom: 9.6px;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <article class='limecard'></article>
<article class='limecard'>
  <header>
    <div class='limecard__meta'>Lorem ipsum</div>
    <h3 class='limecard__title'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
  </header>
  <div class='limecard__body'>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem eaque, earum cumque numquam rerum excepturi harum iure architecto quo, sapiente, voluptatibus sed nobis repellat.</p>
    <div class='limecard__action'>
      <button>Action</button>
    </div>
  </div>
</article>
<article class='limecard'></article>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Tenesan/lime-card-HzmtD */
*,
html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

* + * {
  margin-top: 26px;
}

.limecard {
  width: 100%;
  max-width: 528px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
}
.limecard__meta {
  padding-top: 9.6px;
  padding-bottom: 9.6px;
  border-bottom: 1px solid #eee;
}
.limecard__meta, .limecard__title, .limecard__body {
  padding-right: 9.6px;
  padding-left: 9.6px;
}
.limecard__body {
  padding-bottom: 9.6px;
}

Comments