-
-
Save pmdartus/3ea1bceeff19d02ffaf89337564a485a 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