Created
June 12, 2016 08:54
-
-
Save anonymous/bc6cdb25968d8751cc366dfcb486e8de to your computer and use it in GitHub Desktop.
JS Bin Card group with vertical alignment // source https://jsbin.com/powosu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="Card group with vertical alignment"> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
html { | |
font-family: sans-serif | |
} | |
.card { | |
display: flex; | |
flex-direction: column; | |
border: 1px solid #CAD0D2; | |
border-radius: 4px; | |
overflow: hidden; | |
} | |
.card--fixedWidth { | |
max-width: 120px; | |
} | |
.card__description { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
padding: 15px 0; | |
} | |
.card__descriptionIcon { | |
max-height: 30px; | |
margin-bottom: 10px; | |
} | |
.card__descriptionText { | |
font-size: 12px; | |
color: #57727C; | |
text-align: center; | |
max-width: calc(100% - 30px) | |
} | |
.card__price { | |
text-align: center; | |
color: #57727C; | |
font-size: 12px; | |
font-weight: 700; | |
padding: 5px 15px; | |
border-top: 1px solid #D7DBDD; | |
background-color: #EEF3F5; | |
} | |
.cardGroup { | |
display: flex; | |
border: 1px solid #CAD0D2; | |
border-radius: 4px; | |
overflow: hidden; | |
} | |
.cardGroup__card { | |
flex: 1 1 0; | |
border: none; | |
border-radius: 0; | |
} | |
.cardGroup__card + .cardGroup__card { | |
border-left: 1px solid #CAD0D2; | |
} | |
.cardGroup__cardDescription { | |
flex: 1 1 auto; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="cardGroup"> | |
<div class="card cardGroup__card"> | |
<div class="card__description cardGroup__cardDescription"> | |
<img class="card__descriptionIcon" src="https://d30y9cdsu7xlg0.cloudfront.net/png/34882-200.png" alt="potion-icon"> | |
<div class="card__descriptionText"> | |
Science Potion | |
</div> | |
</div> | |
<div class="card__price">Cost $5</div> | |
</div> | |
<div class="card cardGroup__card"> | |
<div class="card__description cardGroup__cardDescription "> | |
<img class="card__descriptionIcon" src="https://d30y9cdsu7xlg0.cloudfront.net/png/34882-200.png" alt="potion-icon"> | |
<div class="card__descriptionText"> | |
Science Potion Science Potion Science Potion Science Potion | |
</div> | |
</div> | |
<div class="card__price">Cost $5</div> | |
</div> | |
<div class="card cardGroup__card"> | |
<div class="card__description cardGroup__cardDescription "> | |
<img class="card__descriptionIcon" src="https://d30y9cdsu7xlg0.cloudfront.net/png/34882-200.png" alt="potion-icon"> | |
<div class="card__descriptionText"> | |
Science Potion Science Potion Science Potion Science Potion Science Potion Science Potion Science Potion Science Potion Science Potion | |
</div> | |
</div> | |
<div class="card__price">Cost $5</div> | |
</div> | |
</div> | |
<script id="jsbin-source-css" type="text/css">html { | |
font-family: sans-serif | |
} | |
.card { | |
display: flex; | |
flex-direction: column; | |
border: 1px solid #CAD0D2; | |
border-radius: 4px; | |
overflow: hidden; | |
} | |
.card--fixedWidth { | |
max-width: 120px; | |
} | |
.card__description { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
padding: 15px 0; | |
} | |
.card__descriptionIcon { | |
max-height: 30px; | |
margin-bottom: 10px; | |
} | |
.card__descriptionText { | |
font-size: 12px; | |
color: #57727C; | |
text-align: center; | |
max-width: calc(100% - 30px) | |
} | |
.card__price { | |
text-align: center; | |
color: #57727C; | |
font-size: 12px; | |
font-weight: 700; | |
padding: 5px 15px; | |
border-top: 1px solid #D7DBDD; | |
background-color: #EEF3F5; | |
} | |
.cardGroup { | |
display: flex; | |
border: 1px solid #CAD0D2; | |
border-radius: 4px; | |
overflow: hidden; | |
} | |
.cardGroup__card { | |
flex: 1 1 0; | |
border: none; | |
border-radius: 0; | |
} | |
.cardGroup__card + .cardGroup__card { | |
border-left: 1px solid #CAD0D2; | |
} | |
.cardGroup__cardDescription { | |
flex: 1 1 auto; | |
}</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
font-family: sans-serif | |
} | |
.card { | |
display: flex; | |
flex-direction: column; | |
border: 1px solid #CAD0D2; | |
border-radius: 4px; | |
overflow: hidden; | |
} | |
.card--fixedWidth { | |
max-width: 120px; | |
} | |
.card__description { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
padding: 15px 0; | |
} | |
.card__descriptionIcon { | |
max-height: 30px; | |
margin-bottom: 10px; | |
} | |
.card__descriptionText { | |
font-size: 12px; | |
color: #57727C; | |
text-align: center; | |
max-width: calc(100% - 30px) | |
} | |
.card__price { | |
text-align: center; | |
color: #57727C; | |
font-size: 12px; | |
font-weight: 700; | |
padding: 5px 15px; | |
border-top: 1px solid #D7DBDD; | |
background-color: #EEF3F5; | |
} | |
.cardGroup { | |
display: flex; | |
border: 1px solid #CAD0D2; | |
border-radius: 4px; | |
overflow: hidden; | |
} | |
.cardGroup__card { | |
flex: 1 1 0; | |
border: none; | |
border-radius: 0; | |
} | |
.cardGroup__card + .cardGroup__card { | |
border-left: 1px solid #CAD0D2; | |
} | |
.cardGroup__cardDescription { | |
flex: 1 1 auto; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment