Scaled Agile Card Heights

What is a scaled agile card heights How do you make a scaled agile card heights? This script and codes were developed by Jerusha Johnson on 26 December 2021, Sunday.

How do I make an scaled agile card heights?
  1. Scaled Agile Card Heights Previews
  2. Scaled Agile Card Heights HTML Codes
  3. Scaled Agile Card Heights CSS Codes
Scaled Agile Card Heights Previews

Scaled Agile Card Heights HTML Codes

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

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="card large">
  <div class="content">
    <div class="title">Improve perf time for OpenCard</div>
    <div class="assigned">
      <div class="placeholder"></div>
      <div class="name">Jerusha Johnson</div>
    </div>
    <div class="status">In Progress</div>
    <div class="tag-row">
      <div class="tag">
        <span>Blueprint</span>
      </div>
    </div>
  </div>
</div>
<div class="card medium">
  <div class="content">
    <div class="title">Improve perf time for OpenCard</div>
    <div class="assigned">
      <div class="placeholder"></div>
      <div class="name">Jerusha Johnson</div>
    </div>
    <div class="status">In Progress</div>
    <div class="tag-row">
      <div class="tag">
        <span>Blueprint</span>
      </div>
    </div>
  </div>
</div>
<div class="card small">
  <div class="content">
    <div class="title">Improve perf time for OpenCard</div>
  </div>
</div>
  
  
</body>
</html>

Scaled Agile Card Heights CSS Codes

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.card{
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background-color: #fff;
  border-left: solid 6px #009ccc;
  height:185px;
  margin-right:30px;
}
.large{
  width:170px;
}
.medium{
  width:110px;
}
.small{
  width:70px;
}
.content{
  height: 100%;
  position: relative;
  padding: 5px;
  border: solid 1px #ccc;
  border-left:none;
}

.title{
  font-size: 14px;
  max-height: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom:20px;
}
.medium .title{
  font-size: 13px;
}
.small .title{
  font-size: 12px;
}

.assigned{
  margin-bottom: 10px;
  height:30px;
}
.placeholder {
  width: 30px;
  height: 30px;
  background: #e8e8e8;
  display: inline-block;
}
.name {
  font-size: 12px;
  height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  padding-left: 2px;
  vertical-align: top;
  margin-top: 8px;
  width: calc(100% - 35px);
}
.medium .assigned{
  margin-bottom: 15px;
  height:20px;
}
.medium .placeholder{
  width: 20px;
  height: 20px;
}
.medium .name{
  margin-top:4px;
}

.status{
  font-size: 12px;
  position: relative;
  height: 14px;
  line-height: 14px;
  display: inline-block;
  margin-left: 15px;
}
.status:before {
  content: '';
  height: 10px;
  width: 10px;
  background-color: #007acc;
  border-radius: 50%;
  position: absolute;
  right: 66px;
  top: 1px;
}

.tag-row{
  height:25px;
  margin-top:5px;
}
.tag {
  height: 25px;
  padding: 2px 6px;
  background-color: #ff3399;
  display: inline-block;
  margin-top: 15px;
}
.tag span {
  font-size: 12px;
  color: #fff;
  line-height: 14px;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.