Skip to content

Instantly share code, notes, and snippets.

@colorful-tones

colorful-tones/cards.html

Last active July 16, 2024 15:12
Show Gist options
  • Save colorful-tones/ca5e15cc811d7c8b9d42b233dad99afc to your computer and use it in GitHub Desktop.
Save colorful-tones/ca5e15cc811d7c8b9d42b233dad99afc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cards.html
<!-- wp:group {"tagName":"section","metadata":{"name":"Cards","categories":["text","about"],"patternName":"twentytwentyfour/cards-4"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"16rem"}} -->
<section class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--30)"><!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMDg2NTYxLWltYWdlLWt3dnk1Y2l1LmpwZw.jpg","dimRatio":70,"customOverlayColor":"#515151","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002danimated-default","style":{"border":{"radius":"12px"},"color":[]},"layout":{"type":"default"}} -->
<article class="wp-block-cover is-style-card--animated-default" style="border-radius:12px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim" style="background-color:#515151"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMDg2NTYxLWltYWdlLWt3dnk1Y2l1LmpwZw.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"24rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:24rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"border":{"radius":"6px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"12px","right":"12px"}},"typography":{"fontSize":"13px","lineHeight":"1"}},"backgroundColor":"black","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-black-background-color has-text-color has-background has-link-color" style="border-radius:6px;padding-top:6px;padding-right:12px;padding-bottom:6px;padding-left:12px;font-size:13px;line-height:1"><!-- wp:paragraph -->
<p>Studio</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2"}},"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size" style="line-height:1.2"><a href="#">Tales from the Engineers</a></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} -->
<p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">Step inside the studio and hear what happens behind the scenes.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></article>
<!-- /wp:cover -->
<!-- wp:cover {"url":"https://ids.si.edu/ids/deliveryService?id=NMAAHC-2014_139_2a_002","dimRatio":70,"customOverlayColor":"#515151","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002danimated-default","style":{"border":{"radius":"12px"}},"layout":{"type":"default"}} -->
<article class="wp-block-cover is-style-card--animated-default" style="border-radius:12px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim" style="background-color:#515151"></span><img class="wp-block-cover__image-background" alt="" src="https://ids.si.edu/ids/deliveryService?id=NMAAHC-2014_139_2a_002" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"24rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:24rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"border":{"radius":"6px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"12px","right":"12px"}},"typography":{"fontSize":"13px","lineHeight":"1"},"color":{"background":"#253cae"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="border-radius:6px;background-color:#253cae;padding-top:6px;padding-right:12px;padding-bottom:6px;padding-left:12px;font-size:13px;line-height:1"><!-- wp:paragraph -->
<p>Gear</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2"}},"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size" style="line-height:1.2"><a href="#">Equipment Overload: Explore Minimalism</a></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} -->
<p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">Too many options != creative empowerment.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></article>
<!-- /wp:cover -->
<!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3B4NzE0MDgzLWltYWdlLWt3dnhoOXg5LmpwZw.jpg","dimRatio":70,"customOverlayColor":"#515151","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002danimated-default","style":{"border":{"radius":"12px"}},"layout":{"type":"default"}} -->
<article class="wp-block-cover is-style-card--animated-default" style="border-radius:12px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim" style="background-color:#515151"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3B4NzE0MDgzLWltYWdlLWt3dnhoOXg5LmpwZw.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"24rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:24rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"border":{"radius":"6px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"12px","right":"12px"}},"typography":{"fontSize":"13px","lineHeight":"1"},"color":{"background":"#3d6d0d"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="border-radius:6px;background-color:#3d6d0d;padding-top:6px;padding-right:12px;padding-bottom:6px;padding-left:12px;font-size:13px;line-height:1"><!-- wp:paragraph -->
<p>Training</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2"}},"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size" style="line-height:1.2"><a href="#">Sound Design for Everyone</a></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} -->
<p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">Build unique sounds and learn the foundations of sound synthesis.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></article>
<!-- /wp:cover -->
<!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMzY0Nzg5LWltYWdlLWt3eXFsbndnLmpwZw.jpg","dimRatio":70,"customOverlayColor":"#515151","isUserOverlayColor":true,"tagName":"article","metadata":{"name":"Card"},"className":"is-style-card\u002d\u002danimated-default","style":{"border":{"radius":"12px"}},"layout":{"type":"default"}} -->
<article class="wp-block-cover is-style-card--animated-default" style="border-radius:12px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim" style="background-color:#515151"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHgxMzY0Nzg5LWltYWdlLWt3eXFsbndnLmpwZw.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"metadata":{"name":"Card Stack"},"style":{"background":{"backgroundSize":"cover"},"dimensions":{"minHeight":"24rem"},"elements":{"link":{"color":{"text":"var:preset|color|base-2"}},"heading":{"color":{"text":"var:preset|color|base-2"}}}},"textColor":"base-2","layout":{"type":"flex","orientation":"vertical","justifyContent":"left","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group has-base-2-color has-text-color has-link-color" style="min-height:24rem"><!-- wp:group {"metadata":{"name":"Card Label"},"style":{"border":{"radius":"6px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"10px","right":"10px"}},"typography":{"fontSize":"13px","lineHeight":"1"},"color":{"background":"#253cae"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-text-color has-background has-link-color" style="border-radius:6px;background-color:#253cae;padding-top:6px;padding-right:10px;padding-bottom:6px;padding-left:10px;font-size:13px;line-height:1"><!-- wp:paragraph -->
<p>Gear</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"metadata":{"name":"Card Content"},"layout":{"type":"constrained","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"layout":{"columnSpan":1,"rowSpan":1},"typography":{"lineHeight":"1.2"}},"fontSize":"large"} -->
<h3 class="wp-block-heading has-large-font-size" style="line-height:1.2"><a href="#">Syn-copining</a></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"fontSize":"normal"} -->
<p class="has-normal-font-size" style="margin-top:var(--wp--preset--spacing--20)">With a wide array of VCOs, VCAs, and hybrid synthesis models.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></article>
<!-- /wp:cover --></section>
<!-- /wp:group -->
Raw
functions.php
<?php
register_block_style(
'core/cover',
array(
'name' => 'card--animated-default',
'label' => __( 'Card (Animated, default)', 'themeslug' ),
'inline_style' => '
.is-style-card--animated-default {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
position: relative;
transition: box-shadow 0.5s ease;
}
.is-style-card--animated-default:focus-within,
.is-style-card--animated-default:hover {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.2), 0 8px 8px rgba(0, 0, 0, 0.2), 0 16px 16px rgba(0, 0, 0, 0.2);
}
.is-style-card--animated-default :where(.wp-block-group.wp-block-group-is-layout-constrained) {
position: static;
}
/* Make whole card clickable */
.is-style-card--animated-default :where(.wp-block-heading) a:after {
content: "";
inset: 0;
position: absolute;
z-index: 10;
}
/* Blur the Cover block background */
.is-style-card--animated-default :where(.wp-block-cover__background) {
filter: blur(0);
transition: filter 0.5s ease;
}
.is-style-card--animated-default:focus-within :where(.wp-block-cover__background),
.is-style-card--animated-default:hover :where(.wp-block-cover__background) {
filter: blur(5px);
}
/* Animate the Cover block image */
.is-style-card--animated-default :where(.wp-block-cover__image-background) {
filter: saturate(100%) brightness(100%);
transform: scale(1);
transition: all 0.35s ease;
will-change: filter, transform;
}
.is-style-card--animated-default:focus-within :where(.wp-block-cover__image-background),
.is-style-card--animated-default:hover :where(.wp-block-cover__image-background) {
filter: saturate(200%) brightness(40%);
transform: scale(1.05);
}
/* Animate label area */
.is-style-card--animated-default :where(.is-vertical) .wp-block-group:first-of-type {
opacity: 0;
transform: scale(0.95) translateX(-1rem);
transform-origin: center right;
transition: all 0.25s ease-out;
transition-delay: 0.2s;
}
.is-style-card--animated-default:focus-within :where(.is-vertical) .wp-block-group:first-of-type,
.is-style-card--animated-default:hover :where(.is-vertical) .wp-block-group:first-of-type {
opacity: 1;
transform: scale(1) translateX(0);
}
/* Animate content area */
.is-style-card--animated-default :where(.is-vertical) .wp-block-heading {
transform: translateY(3rem);
transition: all 0.25s ease-in;
}
.is-style-card--animated-default:focus-within :where(.is-vertical) .wp-block-heading,
.is-style-card--animated-default:hover :where(.is-vertical) .wp-block-heading {
transform: translateY(0);
}
.is-style-card--animated-default :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p {
opacity: 0;
transition: opacity 0.15s ease;
transition-delay: 0.2s;
}
.is-style-card--animated-default:focus-within :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p,
.is-style-card--animated-default:hover :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p {
opacity: 1;
}
',
)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment