Cards

Default

This card should be used as a wrapper (it comes with no content).

Awesome Space Mission

This is a text blablablalb

<div class="card">
	<!-- YOUR CONTENT -->
</div>

Preview Cards

These Cards show previews of given launches, there is a smaller version for the story based view and a bigger for the overview of all launches.

Small

Live

Ariane 5 ECA

24hrs

Ariane 5 ECA

<div class="row">
	<a 
		href="#" 
		style="background-image: url('your-image.jpg')"
		class="preview-card preview-card--small">

		<div class="preview-card__content">
			<span class="preview-card__content__timer--live">Live</span>
			<h3 class="preview-card__content__title">Ariane 5 ECA</h3>
		</div>
	</a>
	<a 
		href="#" 
		style="background-image: url('your-image.jpg')"
		class="preview-card preview-card--small">

		<div class="preview-card__content">
			<span class="preview-card__content__timer">24hrs</span>
			<h3 class="preview-card__content__title">Ariane 5 ECA</h3>
		</div>
	</a>
</div>

Notes

These Cards HAVE to be used inside of an flex-box container or else they are not working probably. to enable the Live indicator (little red cirlce) use the modifier --live on the preview-card__content__title class. Use your own css class or set the background image with inline styles.

Big

Ariane 5 ECA

2d 24hr 5m 1s

<div class="row">
	<a 
		href="#" 
		style="background-image: url('your-image.jpb')"
		class="preview-card preview-card--big">

		<div class="preview-card__content">
			<div class="preview-card__nav">
				<button class="btn preview-card__nav__item">
					<span class="icon btn__item btn__icon">
						<svg></svg>
					</span>
				</button>
				<button class="btn preview-card__nav__item">
					<span class="icon btn__item btn__icon">
						<svg></svg>
					</span>
				</button>
			</div>
			<h3 class="preview-card__content__title preview-card__content__title--center">Ariane 5 ECA</h3>
			<span class="preview-card__content__timer">2d 24hr 5m 1s</span>
		</div>
	</a>
</div>

Notes

Works the same way as the smaller version. This version also has a litte navigation to like and share launches.

SCSS

.card {
	width: 100%;
	background: #fff;
	border-radius: $default-radius;
	box-shadow: $box-shadow-2;
	padding: 20px;
}

$gap: 20px;

.preview-card {
	margin: $gap;
	background-position: center;
	background-size: cover;
	border-radius: $default-radius;
	position: relative;
	&:hover {
		text-decoration: none;
	}
	&--small {
		@include max-min-height-width(200px);
		@include media-breakpoint-down(sm) {
			@include max-min-height-width(150px);
		}
	}
	&--big {
		flex-basis: calc(50% - #{$gap*2});
		max-width: 300px;
		@include media-breakpoint-down(sm) {
			flex-basis: calc(50% - #{10px*2});
			margin: 10px;
		}
		@include media-breakpoint-down(xs) {
			flex-basis: calc(100%);
			margin: 10px auto;
		}
		&:before{
			content: '';
			float: left;
			padding-top: 100%;
		}
	}
	&:after {
		content: '';
		position: absolute;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		border-radius: $default-radius;
	}
	&__nav {
		display: flex;
		justify-content: flex-end;
		&__item {
			color: #fff;
			font-size: em(20);
		}
	}


	&__content {
		height: 100%;
		padding: 20px;
		position: relative;
		z-index: 2;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		@include media-breakpoint-down(sm) {
			padding: $default-radius;
		}

		&__title {
			font-family: $objectivity;
			font-size: em(20);
			margin-bottom: 0;
			@include media-breakpoint-down(sm) {
				font-size: em(18)
			}

			&--center {
				text-align: center;
			}
		}
		&__timer {
			font-size: em(18);
			@include media-breakpoint-down(sm) {
				font-size: em(16);
			}
			&--live {
				display: flex;
				align-items: center;
				&:before {
					content: '';
					width: 8px;
					height: 8px;
					border-radius: 100%;
					margin-right: 5px;
					background: $red;
				}
			}
		}
	}
}