HTML
<div class="container">
<h1>Color Scheme Cards</h1>
<p>These are great to use with style guides.</p>
<div class="cardGroup" id="demo">
<div class="card cardGroup__card">
<div class="card__description cardGroup__cardDescription hvr"
id="color-1">Primary
</div>
<div class="card__color">
<span>#F9ED69</span>
<span>rgb(249,237,105)</span>
<span>$primary</span>
</div>
</div>
<div class="card cardGroup__card">
<div class="card__description cardGroup__cardDescription hvr"
id="color-2">Secondary
</div>
<div class="card__color">
<span>#F08A5D</span>
<span>rgb(240,138,93)</span>
<span>$secondary</span>
</div>
</div>
<div class="card cardGroup__card hvr-rectangle-in">
<div class="card__description cardGroup__cardDescription hvr"
id="color-3">Alternative 1
</div>
<div class="card__color">
<span>#B83B5E</span>
<span>rgb(184,59,94)</span>
<span>$alternative1</span>
</div>
</div>
<div class="card cardGroup__card hvr-rectangle-in">
<div class="card__description cardGroup__cardDescription hvr"
id="color-4">Alternative 2
</div>
<div class="card__color">
<span>#6A2C70</span>
<span>rgb(106,44,112)</span>
<span>$alternative2</span>
</div>
</div>
</div><!-- /card group -->
</div><!-- /container -->
CSS
/*=====================================================
Card Colors
=====================================================*/
#color-1 {
background: #F9ED69;
color: #B4A500;
}
#color-2 {
background: #F08A5D;
color: #BE3A00;
}
#color-3 {
background: #B83B5E;
color: #FD81A4;
}
#color-4 {
background: #6A2C70;
color: #DC59E8;
}
/*=====================================================
Card Group
=====================================================*/
/* Hover Effect */
.hvr {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
top: 0;
background: #0DE472;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {
left: 0;
right: 0;
}
#color-1.hvr:before {
background: #B4A500;
}
#color-2.hvr:before {
background: #BE3A00;
}
#color-3.hvr:before {
background: #FD81A4;
}
#color-4.hvr:before {
background: #DC59E8;
}
.card {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border: 0px solid #E0E0E0;
border-radius: 4px;
overflow: hidden;
}
.card__description {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 15px 0;
height: 120px;
}
.card__color {
text-align: center;
color: #57727C;
font-size: 15px;
letter-spacing: 1px;
padding: 5px 15px;
border-top: 3px solid #E0E0E0;
background-color: #FEFEFE;
}
.card__color span {
display: block;
padding: 5px 0;
}
.card--fixedWidth {
max-width: 120px;
}
.cardGroup {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border: 3px solid #E0E0E0;
border-radius: 4px;
overflow: hidden;
}
.cardGroup__card {
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
border: none;
border-radius: 0;
}
.cardGroup__card + .cardGroup__card {
border-left: 3px solid #E0E0E0;
}
.cardGroup__cardDescription {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
/*=====================================================
Demo
=====================================================*/
.container {
padding: 50px;
overflow-x: auto;
}
#demo {
margin: 100px;
}
h1 {
font-size: 40px;
font-weight: 700;
color: #0DE472;
text-align: center;
}
p {
text-align: center;
}
