.card {
-webkit-box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 0.75rem;
background-clip: padding-box;
}
.card__title {
position: relative;
vertical-align: middle;
margin: 0;
padding: 15px 1.25rem 0;
line-height: 1;
font-size: 0.875rem;
}
.card__subtitle {
font-size: 0.75rem;
display: block;
}
.card__title--underline {
border-bottom: 1px solid #e6e6e6;
padding-bottom: 15px;
}
.card__block {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
.card__block + .card__block {
padding-top: 0;
}
.card__block--table {
padding: 1.25rem 0;
}
.card__block--list:not(:first-child) {
padding-top: 0;
}
.card__block--list:not(:last-child) {
padding-bottom: 0;
}
.card__body {
position: relative;
padding: 1.25rem;
}
.card__body .twitter-tweet,
.card__body .fb_iframe_widget,
.card__body iframe {
max-width: 100% !important;
width: 100% !important;
}
.card__nested-section {
margin-top: 0.625rem;
margin-right: -1.25rem;
margin-bottom: -1.25rem;
margin-left: -1.25rem;
padding: 1.25rem;
background: #f7f7f7;
border-top: 1px solid #e6e6e6;
}
.card__actionbar {
margin-top: -1.25rem;
padding: 1.25rem;
position: relative;
z-index: 2;
}
.card__actionbar:before, .card__actionbar:after {
content: " ";
display: table;
}
.card__actionbar:after {
clear: both;
}
.card__link {
font-size: 0.875rem;
margin-left: 24px;
float: right;
-webkit-transition: color .3s ease;
transition: color .3s ease;
text-transform: uppercase;
}
.card__text {
margin-top: 0;
}
.card__text:last-child {
margin-bottom: 0;
}
@media (min-width: 900px) {
.card__body {
padding: 2.5rem;
}
}
View source
- .card {
- -webkit-box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
- box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- margin-bottom: 0.75rem;
- background-clip: padding-box;
- }
-
- .card__title {
- position: relative;
- vertical-align: middle;
- margin: 0;
- padding: 15px 1.25rem 0;
- line-height: 1;
- font-size: 0.875rem;
- }
-
- .card__subtitle {
- font-size: 0.75rem;
- display: block;
- }
-
- .card__title--underline {
- border-bottom: 1px solid #e6e6e6;
- padding-bottom: 15px;
- }
-
- .card__block {
- position: relative;
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- padding: 1.25rem;
- }
-
- .card__block + .card__block {
- padding-top: 0;
- }
-
- .card__block--table {
- padding: 1.25rem 0;
- }
-
- .card__block--list:not(:first-child) {
- padding-top: 0;
- }
-
- .card__block--list:not(:last-child) {
- padding-bottom: 0;
- }
-
- .card__body {
- position: relative;
- padding: 1.25rem;
- }
-
- .card__body .twitter-tweet,
- .card__body .fb_iframe_widget,
- .card__body iframe {
- max-width: 100% !important;
- width: 100% !important;
- }
-
- .card__nested-section {
- margin-top: 0.625rem;
- margin-right: -1.25rem;
- margin-bottom: -1.25rem;
- margin-left: -1.25rem;
- padding: 1.25rem;
- background: #f7f7f7;
- border-top: 1px solid #e6e6e6;
- }
-
- .card__actionbar {
- margin-top: -1.25rem;
- padding: 1.25rem;
- position: relative;
- z-index: 2;
- }
-
- .card__actionbar:before, .card__actionbar:after {
- content: " ";
- display: table;
- }
-
- .card__actionbar:after {
- clear: both;
- }
-
- .card__link {
- font-size: 0.875rem;
- margin-left: 24px;
- float: right;
- -webkit-transition: color .3s ease;
- transition: color .3s ease;
- text-transform: uppercase;
- }
-
- .card__text {
- margin-top: 0;
- }
-
- .card__text:last-child {
- margin-bottom: 0;
- }
-
- @media (min-width: 900px) {
- .card__body {
- padding: 2.5rem;
- }
- }