diff --git a/src/prototypes/no-cover/example/example.scss b/src/prototypes/no-cover/example/example.scss new file mode 100644 index 000000000..938b69da4 --- /dev/null +++ b/src/prototypes/no-cover/example/example.scss @@ -0,0 +1,73 @@ +@use '../../../compiled/tokens/scss/aspect-ratio'; +@use '../../../compiled/tokens/scss/breakpoint'; +@use '../../../compiled/tokens/scss/brightness'; +@use '../../../compiled/tokens/scss/color'; +@use '../../../compiled/tokens/scss/ease'; +@use '../../../compiled/tokens/scss/size'; +@use '../../../compiled/tokens/scss/transition'; +@use '../../../mixins/border-radius'; +@use '../../../mixins/fluid'; +@use '../../../mixins/focus'; +@use '../../../mixins/headings'; +@use '../../../mixins/media-query'; +@use '../../../mixins/ms'; +@use '../../../mixins/spacing'; +@use '../../../mixins/theme'; + +/// we won't need either of these defined when the prototype css is added to card.scss + +/// We add more space between the cover and text elements simply because it +/// feels better visually. +/// +/// @type Number +/// @access private + +$_cover-gap: ms.step(1, 1rem); + +/// We can't use `grid-gap` exclusively due to some containers only being +/// present some of the time, so we re-use this value to define the space +/// between chunks of content. +/// +/// @type Number +/// @access private + +$_content-gap: ms.step(-1, 1rem); + + +/** + * If there is no cover image, treat the header more like a cover image's + * container, with a matching aspect ratio and larger block end margin. +**/ + +.c-card:not(:has(.c-card__cover)) .c-card__header { + border-radius: size.$border-radius-medium; + gap: 0; + margin-block-end: $_cover-gap; + overflow: hidden; +} + +/** + * The heading is treated like a cover image. +**/ + +.c-card:not(:has(.c-card__cover)) .c-card__heading { + align-content: center; + aspect-ratio: aspect-ratio.$wide; + grid-area: cover; + padding: $_content-gap; +} + + +.c-card:not(:has(.c-card__cover)) .c-card__link { + transition: font-size transition.$prompt ease.$out; +} + +/** + * Matches the scale up on the cover image. Scale would be preferable for performance, + * however scaling either the heading or the link removes the effect of the entire + * card being a selectable target! +**/ + +.c-card:not(:has(.c-card__cover)):hover:not(:active) .c-card__link { + font-size: 1.025em; +} diff --git a/src/prototypes/no-cover/example/example.twig b/src/prototypes/no-cover/example/example.twig new file mode 100644 index 000000000..e1477b3b0 --- /dev/null +++ b/src/prototypes/no-cover/example/example.twig @@ -0,0 +1,869 @@ +
+
+ + +
+ + + + + + +
+ +
+

+ + Cookie Consent Management in 2026, Part 1: Overview + + +

+
+ +
+ + + + +
+ +
+

+ The threat of lawsuits has companies scrambling to get their cookie compliance house in order. Here are some of the things we've learned as we've helped our clients. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on March 18th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + + +
+ +
+

+ + How Do We Write About AI in Web Development? + + +

+
+ +
+ + + A helpful robot hands a wrench to an auto mechanic. + +
+ +
+

+ I love writing about the rapid pace of change in web development, so why am I struggling to write about how AI is affecting my career? +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Scott Vandehey

+ +
+

+ + Published on October 1st, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Improvements to Web for AI Should Benefit All Users + + +

+
+ +
+ + + + +
+ +
+

+ Proposed changes to the web platform to support AI should also support users and assistive technology whenever possible. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on June 15th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Ending Responsive Images + + +

+
+ +
+ + + + +
+ +
+

+ Mat Marquis isn't known for pulling his punches. And yet, Marquis stopped short when he declared The End of Responsive Images. Mat left responsive images on the ropes. I hope to finish them. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on June 11th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + How We Use CI to Check Code Standards on Every PR + + +

+
+ +
+ + + A cheerful-looking robot wearing a hard hat and holding a clipboard stands before a conveyor belt full of icons representing code changes, like a line inspector in a factory. + +
+ +
+

+ Automating your code checks ensures every contribution meets standards, reduces the review burden, and increases confidence in AI-generated code. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Scott Vandehey

+ +
+

+ + Published on May 5th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Most Cookie Consent Banners Don’t Check for Compliance + +

+
+ + +
+

+ As I’ve had more opportunities to work with cookie consent managers, I’ve come to the surprising realization that most of them (all of them?) fail to track if websites are in compliance with various privacy laws. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on April 16th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Weight Loss and the World Wide Web + + +

+
+ +
+ + + + +
+ +
+

+ On my successful journey with GLP-1 and my fruitless search to find a similar solution for the bloated mess the web has become. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on March 31st, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + More Projects Please + + +

+
+ +
+ + + + +
+ +
+

+ We’re actively seeking new UX design, UI design or hybrid creative/development challenges to solve. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Tyler Sticka

+ +
+

+ + Published on March 30th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + GPC Opt Out: UX Fails or Malicious Compliance? + + +

+
+ +
+ + + + +
+ +
+

+ As of Jan 1, the CCPA requires websites to confirm they are honoring Global Privacy Control (GPC) opt outs. Why are so many cookie banners complying with the new rule in ways certain to confuse users? +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on March 23rd, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Cookie Consent Management in 2026, Part 2: Technical Tips + + +

+
+ +
+ + + + +
+ +
+

+ Testing cookies consent compliance proved more difficult than I expected. Here are some tips and tricks I learned while conducting a cookie compliance audit. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on March 19th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Little Dummies: Simple FPO Content Helpers + + +

+
+ +
+ + + + +
+ +
+

+ Video, links and code samples from my rapid prototyping talk for the final Eleventy Meetup. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Tyler Sticka

+ +
+

+ + Published on March 12th, 2026 + + +

+ +
+
+
+ +
+ +
+
+ + + + +
+
diff --git a/src/prototypes/no-cover/no-cover.stories.js b/src/prototypes/no-cover/no-cover.stories.js new file mode 100644 index 000000000..2c67f4d79 --- /dev/null +++ b/src/prototypes/no-cover/no-cover.stories.js @@ -0,0 +1,14 @@ +import './example/example.scss'; +import examplePrototype from './example/example.twig'; + +const meta = { + title: 'Prototypes/Article with No Cover', + parameters: { + docs: { page: null }, + layout: 'fullscreen', + }, +}; + +export default meta; + +export const Example = () => examplePrototype({});