<div class="card-wrapper card-wrapper-image hover-grow ">
<div class="card">
<div class="card-image">
<img src="/images/WomanColdBlanketDr1Cropped_510x288.jpeg" alt="" />
</div>
<div class="card-description">
<h3 class="card-description-title">
Video Care Consult
</h3>
<p class="card-description-desc">
You can be located anywhere within the state of Colorado
</p>
</div>
<div class="card-button">
<a href="">
<!-- src/components/button--light.hbs -->
<button class="button button-light">Click me!</button>
</a>
</div>
</div>
</div>
<div class="card-wrapper card-wrapper-image hover-grow ">
<div class="card">
<div class="card-image">
<img src="{{ img-src }}" alt="{{ img-alt }}" />
</div>
<div class="card-description">
<h3 class="card-description-title">
{{ card-description-title }}
</h3>
<p class="card-description-desc">
{{ card-description-desc }}
</p>
</div>
<div class="card-button">
<a href="{{ button-location }}">{{> @button--light}}</a>
</div>
</div>
</div>
{
"button-text": "Click me!",
"card-description-title": "Video Care Consult",
"card-description-desc": "You can be located anywhere within the state of Colorado",
"img-src": "/images/WomanColdBlanketDr1Cropped_510x288.jpeg",
"main-logo": "/images/COL_Logo_Full_2ColorBig.png",
"site-title": "Care on Location",
"year": 2017,
"nav-items": [
{
"nav-item-link": "#",
"nav-item-title": "Services",
"classes": "has-sub-menu",
"sub-nav-items": [
{
"nav-item-link": "#",
"nav-item-title": "Video Care Consult"
},
{
"nav-item-link": "#",
"nav-item-title": "Assisted Video Care Consult"
},
{
"nav-item-link": "#",
"nav-item-title": "On Location Care Consult"
}
]
},
{
"nav-item-link": "#",
"nav-item-title": "Providers"
},
{
"nav-item-link": "#",
"nav-item-title": "Partners"
},
{
"nav-item-link": "#",
"nav-item-title": "About"
},
{
"nav-item-link": "#",
"nav-item-title": "FAQ"
},
{
"nav-item-link": "#",
"nav-item-title": "News"
}
],
"org-address": "111 N. 1st St. <br /> Denver, CO 80204",
"org-phone": "303-111-1111",
"socials": [
{
"social": "facebook",
"social-url": "https://www.facebook.com"
},
{
"social": "twitter",
"social-url": "https://www.twitter.com"
},
{
"social": "google-plus",
"social-url": "https://plus.google.com"
}
]
}
.card-wrapper {
border: 2px solid $brand-mediumblue;
background-color: $brand-mediumblue;
max-width: 100%;
padding: 10px;
margin: 1.1em;
max-width: 300px;
text-align: center;
.card {
color: $brand-white;
h3 {
text-align: center;
margin-bottom: 0;
color: $brand-white;
}
p {
text-align: center;
@include font-size(14);
margin: 10px 5px;
}
.card-button {
text-align: center;
}
}
&.card-wrapper-plain {
border-width: 1px;
.card {
margin: 7px;
}
}
&.card-wrapper-image {
padding: 0 0 10px 0;
}
&.hover-grow {
transition: all 0.5s;
&:hover {
transform: scale(1.1);
box-shadow: 1px 5px 14px rgba(0, 0, 0, 1);
}
}
}
Cards are short callout sections of the website. Often they will be grouped together in sets. They can contain:
Cards will never contain full descriptions of items. See Features for that.