some_cards

by Trifan Alexandru

HTML

<div class="card_wrapper">
  <div class="overlay">
  
  </div>
  <div class="card_type">
  
  </div>
  <div class="card_content error">
     <div class="card_icon">
     
     </div>
     <div class="card_title">
       some title test
     </div>
     <div class="card_message">
           Some message here
     </div>
  </div>
</div>

CSS

.card_wrapper {
    position: relative;
    overflow: visible;
    margin-top: 40px;
    margin-left: 40px;
}

.card_content {
  padding: 9px 12px;
  border-radius: 2px;
  border: 1px solid transparent;
  background-color: #fff;
  overflow: hidden;
}

.overlay {
  position: absolute;
  background-color: pink;
  opacity: 0.4;
  width: 100%;
  height: 100%;
}

.card_icon {
  float: left;
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

.card_title {
  float: left;
  margin-left: 5px;
  line-height: 20px;
}

.error {
  border-top-color: red;
}

.card_message {
  clear: both;
  padding: 9px 0 0 0;
}

.card_type {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20px;
  border: 1px solid red;
  background-color: red;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
}