our changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today.
cards
text only card
<article class='card-dim card-shadow-xs pos-relative'>
<span class="material-icons pos-absolute tr-1 icon-secondary">
close
</span>
<header class='pd-md'>
<p class='txt-lg txt-600 txt-cap txt-primary'>
our changing planet
</p>
<p class='txt-cap txt-primary txt-md'>
by Kurt Wagner
</p>
</header>
<main>
<p class='card-txtw-md txt-off-primary txt-md pd-xs'>
Visit ten places on our planet that are undergoing the biggest changes today.
</p>
</main>
<footer class='pd-xs flx flx-maj-stretch'>
<div>
<button class='txt-md btn-solid bg-secondary txt-secondary txt-ucase pd-xs'>
buy
</button>
<button class='txt-md btn-txt txt-primary txt-ucase pd-xs'>
add to cart
</button>
</div>
<div class='flx flx-min-center'>
<span class="material-icons mg-right-xs icon-primary">
favorite_border
</span>
<span class="material-icons mg-right-xs icon-primary">
share
</span>
<span class="material-icons icon-primary">
more_vert
</span>
</div>
</footer>
</article>
basic card
our changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today.
<article class='card-dim card-shadow-xs pos-relative'>
<span class="material-icons pos-absolute tr-1 icon-primary">
close
</span>
<main>
<img src='../../assets/card-img.jpg' class='img-fit-cover' />
<header class='pd-xs'>
<p class='txt-lg txt-500 txt-cap txt-primary'>
our changing planet
</p>
<p class='txt-cap txt-primary txt-md'>
by Kurt Wagner
</p>
</header>
<p class='card-txtw-s txt-off-primary txt-md pd-xs'>
Visit ten places on our planet that are undergoing the biggest changes today.
</p>
</main>
<footer class='pd-xs flx flx-maj-stretch'>
<div>
<button class='txt-md btn-solid bg-secondary txt-secondary txt-ucase pd-xs'>
buy
</button>
<button class='txt-md btn-txt txt-primary txt-ucase pd-xs'>
add to cart
</button>
</div>
<div class='flx flx-min-center'>
<span class="material-icons mg-right-xs icon-primary">
favorite_border
</span>
<span class="material-icons mg-right-xs icon-primary">
share
</span>
<span class="material-icons icon-primary">
more_vert
</span>
</div>
</footer>
</article>
basic card
our changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today.
<article class='card-dim card-shadow-xs pos-relative'>
<span class="material-icons pos-absolute tr-1 icon-primary">
close
</span>
<main>
<img src='../../assets/card-img-2.jpg' class='img-fit-cover' />
<header class='pd-xs'>
<p class='txt-lg txt-500 txt-cap txt-primary'>
our changing planet
</p>
<p class='txt-cap txt-primary txt-md'>
by Kurt Wagner
</p>
</header>
<p class='card-txtw-md txt-off-primary txt-md pd-xs'>
Visit ten places on our planet that are undergoing the biggest changes today.
</p>
</main>
<footer class='pd-xs flx flx-maj-stretch'>
<div>
<button class='txt-md btn-solid bg-secondary txt-secondary txt-ucase pd-xs'>
buy
</button>
<button class='txt-md btn-txt txt-primary txt-ucase pd-xs'>
add to cart
</button>
</div>
<div class='flx flx-min-center'>
<span class="material-icons mg-right-xs icon-primary">
favorite_border
</span>
<span class="material-icons mg-right-xs icon-primary">
share
</span>
<span class="material-icons icon-primary">
more_vert
</span>
</div>
</footer>
</article>
text overlay card
our changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today.
<article class='card-dim card-shadow-xs pos-relative'>
<span class="material-icons pos-absolute tr-1 icon-primary">
close
</span>
<header class='pd-s pos-absolute t-0'>
<p class='txt-lg txt-500 txt-cap txt-primary'>
our changing planet
</p>
<p class='txt-cap txt-primary txt-md'>
by Kurt Wagner
</p>
</header>
<main>
<img src='../../assets/card-img.jpg' class='img-fit-cover' />
<p class='card-txtw-s txt-off-primary txt-md pd-xs'>
Visit ten places on our planet that are undergoing the biggest changes today.
</p>
</main>
<footer class='pd-xs flx flx-maj-stretch'>
<div>
<button class='txt-md btn-solid bg-secondary txt-secondary txt-ucase pd-xs'>
buy
</button>
<button class='txt-md btn-txt txt-primary txt-ucase pd-xs'>
add to cart
</button>
</div>
<div class='flx flx-min-center'>
<span class="material-icons mg-right-xs icon-primary">
favorite_border
</span>
<span class="material-icons mg-right-xs icon-primary">
share
</span>
<span class="material-icons icon-primary">
more_vert
</span>
</div>
</footer>
</article>
header first card
our changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today.
<article class='card-dim card-shadow-xs pos-relative'>
<span class="material-icons pos-absolute tr-1 icon-primary">
close
</span>
<main>
<img src='../../assets/card-img.jpg' class='img-fit-cover' />
<header class='flx-order-start pd-s'>
<p class='txt-lg txt-500 txt-cap txt-primary'>
our changing planet
</p>
<p class='txt-cap txt-primary txt-md'>
by Kurt Wagner
</p>
</header>
<p class='card-txtw-s txt-off-primary txt-md pd-xs'>
Visit ten places on our planet that are undergoing the biggest changes today.
</p>
</main>
<footer class='pd-xs flx flx-maj-stretch'>
<div>
<button class='txt-md btn-solid bg-secondary txt-secondary txt-ucase pd-xs'>
buy
</button>
<button class='txt-md btn-txt txt-primary txt-ucase pd-xs'>
add to cart
</button>
</div>
<div class='flx flx-min-center'>
<span class="material-icons mg-right-xs icon-primary">
favorite_border
</span>
<span class="material-icons mg-right-xs icon-primary">
share
</span>
<span class="material-icons icon-primary">
more_vert
</span>
</div>
</footer>
</article>
horizontal card
our changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today.
<>
<article class='card-dim card-shadow-xs pos-relative'>
<span class="material-icons pos-absolute tr-1 icon-primary">
close
</span>
<main>
<img src='../../assets/card-img.jpg' class='img-fit-cover' />
<div class='flx-grow-1 pd-s flx flx-column flx-maj-stretch'>
<div>
<p class='txt-lg txt-500 txt-cap txt-primary'>
our changing planet
</p>
<p class='txt-cap txt-primary txt-md'>
by Kurt Wagner
</p>
</div>
<p class='card-txtw-s txt-off-primary txt-md pd-xs'>
Visit ten places on our planet that are undergoing the biggest changes today.
</p>
<button class='txt-md btn-solid btn-width-full txt-secondary bg-secondary txt-ucase pd-xs mg-top-md'>
read
<button>
</div>
</main>
</article>
</>
card css
/* card box shadow */
.card-shadow-xs {
box-shadow: 0 0 4px -2px;
}
/* card container dimensions */
.card-dim {
width: max-content;
height: max-content;
}
/* card text widths */
.card-txtw-xs {
width: 20ch;
}
.card-txtw-s {
width: 30ch;
}
.card-txtw-md {
width: 40ch;
}