@pnx-mixtape/mxds 0.0.1

package/src/Component/Callout/Callout.stories.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./twig/callout-story.twig"
+import "./callout.css"
+import { Callout as CalloutType, HeadingTypes } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<CalloutType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    title: {
+      title: "Callout heading",
+      as: HeadingTypes.TWO,
+    },
+    content: "Some callout content.",
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  argTypes: {
+    // @ts-expect-error The controls follow the shape
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+  },
+}
+
+export default meta
+type Story = StoryObj<CalloutType>
+
+export const Callout: Story = {}

package/src/Component/Callout/callout.css

@@ -0,0 +1,7 @@
+@layer components {
+  .callout {
+    padding-inline-start: var(--line-gap, var(--gap));
+    border-inline-start: var(--line-width, 6px) solid
+      var(--line-colour, var(--colour-primary));
+  }
+}

package/src/Component/Callout/callout.twig

@@ -0,0 +1,10 @@
+{% set classes = [
+  'callout',
+  'vertical-flow'
+] %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<div{{ attributes }}>
+  {{ title }}
+  {{ content }}
+</div>

package/src/Component/Callout/twig/callout-story.twig

@@ -0,0 +1,11 @@
+{% extends "../callout.twig" %}
+{% if title %}
+  {% set title %}
+    {% include "@mixtape/Atom/Heading/heading.twig" with { title: title.title, as: title.as } only %}
+  {% endset %}
+{% endif %}
+{% if content %}
+  {% set content %}
+    <p>{{ content }}</p>
+  {% endset %}
+{% endif %}

package/src/Component/Card/CHANGELOG.md

@@ -0,0 +1,187 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.0.1](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@2.0.0-alpha.0...@pnx-mixtape/mxds/card@2.0.1) (2024-05-21)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+# [2.0.0](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@2.0.0-alpha.0...@pnx-mixtape/mxds/card@2.0.0) (2024-05-21)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+# [2.0.0-alpha.0](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@1.3.1...@pnx-mixtape/mxds/card@2.0.0-alpha.0) (2024-05-21)
+
+# [2.0.0](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@1.3.1...@pnx-mixtape/mxds/card@2.0.0) (2024-04-21)
+
+### Code Refactoring
+
+- **layout:** use css grid for section with breakout grid areas ([e1b4fad](https://github.com/previousnext/mixtape/commit/e1b4fad7266bd335157f38439dfbf182be1d3596))
+
+### BREAKING CHANGES
+
+- **layout:** section**content class is removed, page**content class replaced with grid--sidebar
+  and page\_\_sidebar class needs to be an aside element
+
+## [1.3.1](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@1.3.0...@pnx-mixtape/mxds/card@1.3.1) (2023-11-17)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+# [1.3.0](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@1.2.0...@pnx-mixtape/mxds/card@1.3.0) (2023-10-11)
+
+### Features
+
+- fluid typography based on scale and container query units ([d688464](https://github.com/previousnext/mixtape/commit/d688464af88b095607145eba714d8d5df90ca51f))
+
+# [1.2.0](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@1.1.1...@pnx-mixtape/mxds/card@1.2.0) (2023-09-14)
+
+### Bug Fixes
+
+- **card:** card layout flexibility ([605c358](https://github.com/previousnext/mixtape/commit/605c358a32a2f713519cf527aba1fb378d2eab77))
+- **card:** fix aspect ratio ([d69377d](https://github.com/previousnext/mixtape/commit/d69377d2e1a851e08b92629d13aafb42a15a2b7c))
+
+### Features
+
+- **drop-menu:** add drop menu component ([23d327e](https://github.com/previousnext/mixtape/commit/23d327ee934bf7ecc4b3d67f6a2f3e833870b8ec))
+
+## [1.1.1](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@1.1.0...@pnx-mixtape/mxds/card@1.1.1) (2023-07-21)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+# [1.1.0](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@1.0.1...@pnx-mixtape/mxds/card@1.1.0) (2023-06-22)
+
+### Bug Fixes
+
+- **card:** support card inside container-grid ([99969a9](https://github.com/previousnext/mixtape/commit/99969a96ff5368d4d85617f832e298b5976a84fd))
+
+### Features
+
+- **card:** use [@container](https://github.com/container) queries instead of lanscape modifier class ([e1e4157](https://github.com/previousnext/mixtape/commit/e1e41576c87b9c22e03eae506ff71bf8cbbdc076))
+
+## [1.0.1](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@1.0.0...@pnx-mixtape/mxds/card@1.0.1) (2022-12-01)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+# [1.0.0](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@1.0.0-alpha.1...@pnx-mixtape/mxds/card@1.0.0) (2022-12-01)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+# [1.0.0-alpha.1](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@1.0.0-alpha.0...@pnx-mixtape/mxds/card@1.0.0-alpha.1) (2022-12-01)
+
+### Bug Fixes
+
+- **cards:** fix list width ([9b2de53](https://github.com/previousnext/mixtape/commit/9b2de536f4ecaf1de262a77777260b5b9c55eb5e))
+- **card:** simplify layout and lazy load ([1783681](https://github.com/previousnext/mixtape/commit/1783681229822f92e01c2bf99595ab902050e66e))
+
+### Code Refactoring
+
+- **card:** refactor to use global constants ([0e355c6](https://github.com/previousnext/mixtape/commit/0e355c6deacf3f31b948cf30c0527d93903646b5))
+
+### Features
+
+- **card:** loading pulse skeleton for images ([552164f](https://github.com/previousnext/mixtape/commit/552164f0e2886a234fa0ab9fc6052e5ea8169cb3))
+
+### Performance Improvements
+
+- update browserslist ([d8d2495](https://github.com/previousnext/mixtape/commit/d8d2495ad71aa62941ea7069d236ad9b3fce066e))
+
+### BREAKING CHANGES
+
+- **card:** removes \_vars.scss and all namespaced variables for global ones.
+
+# [1.0.0-alpha.0](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@0.3.3...@pnx-mixtape/mxds/card@1.0.0-alpha.0) (2022-06-10)
+
+### Features
+
+- **react:** content card clickable ([e73e6fe](https://github.com/previousnext/mixtape/commit/e73e6fe09ef223d7c4c2dffdef01f9efbcd718d9))
+- rtl direction support with logical properties ([42aa42f](https://github.com/previousnext/mixtape/commit/42aa42f995052f6ee780a82304a0d72658fd40aa))
+
+## [0.3.3](https://github.com/previousnext/mixtape/compare/@pnx-mixtape/mxds/card@0.3.2...@pnx-mixtape/mxds/card@0.3.3) (2022-01-06)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.3.2](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.3.1...@pnx-mixtape/mxds/card@0.3.2) (2021-07-07)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.3.1](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.3.0...@pnx-mixtape/mxds/card@0.3.1) (2021-03-30)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+# [0.3.0](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.2.8...@pnx-mixtape/mxds/card@0.3.0) (2021-03-02)
+
+### Features
+
+- **base:** move vertical flow into utility class to be more selective ([38d87ea](http://github.com/previousnext/mixtape/tree/master/packages/card/commit/38d87ea764ed92e179aedf6e5909cd49b150f573))
+
+### BREAKING CHANGES
+
+- **base:** typographic elements have no margins unless the immediate parent gets the
+  .vertical-flow class
+
+## [0.2.8](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.2.7...@pnx-mixtape/mxds/card@0.2.8) (2020-11-19)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.2.7](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.2.6...@pnx-mixtape/mxds/card@0.2.7) (2020-11-12)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.2.6](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.2.5...@pnx-mixtape/mxds/card@0.2.6) (2020-11-12)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.2.5](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.2.4...@pnx-mixtape/mxds/card@0.2.5) (2020-10-16)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.2.4](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.2.3...@pnx-mixtape/mxds/card@0.2.4) (2020-08-14)
+
+### Bug Fixes
+
+- **card:** fix width overriding flex grid size in IE11 ([8c49177](http://github.com/previousnext/mixtape/tree/master/packages/card/commit/8c4917726a1e54aa3ade0e693a513cdb1395b5ea))
+
+## [0.2.3](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.2.2...@pnx-mixtape/mxds/card@0.2.3) (2020-08-13)
+
+### Bug Fixes
+
+- **all:** grid alignment fixes ([cf2a1ec](http://github.com/previousnext/mixtape/tree/master/packages/card/commit/cf2a1ec1edb7ddbf0e027004ec92da70ab2e4be8))
+
+## [0.2.2](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.2.1...@pnx-mixtape/mxds/card@0.2.2) (2020-08-12)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.2.1](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.2.0...@pnx-mixtape/mxds/card@0.2.1) (2020-08-05)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+# [0.2.0](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.1.12...@pnx-mixtape/mxds/card@0.2.0) (2020-08-05)
+
+### Features
+
+- **card:** adds linked card-template ([#184](http://github.com/previousnext/mixtape/tree/master/packages/card/issues/184)) ([cfaae14](http://github.com/previousnext/mixtape/tree/master/packages/card/commit/cfaae147833185b2dae34282a156da7c3662b0d8))
+
+## [0.1.12](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.1.11...@pnx-mixtape/mxds/card@0.1.12) (2020-08-04)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.1.11](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.1.10...@pnx-mixtape/mxds/card@0.1.11) (2020-07-17)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.1.10](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.1.9...@pnx-mixtape/mxds/card@0.1.10) (2020-06-26)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.1.9](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.1.8...@pnx-mixtape/mxds/card@0.1.9) (2020-06-26)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.1.8](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.1.7...@pnx-mixtape/mxds/card@0.1.8) (2020-06-25)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card
+
+## [0.1.7](http://github.com/previousnext/mixtape/tree/master/packages/card/compare/@pnx-mixtape/mxds/card@0.1.6...@pnx-mixtape/mxds/card@0.1.7) (2020-06-12)
+
+**Note:** Version bump only for package @pnx-mixtape/mxds/card

package/src/Component/Card/Card.stories.ts

@@ -0,0 +1,106 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./twig/story-card.twig"
+import "./card.css"
+import "../Tag/tag.css"
+import "../LinkList/link-list.css"
+import {
+  Card as CardType,
+  CardModifier,
+  HeadingTypes,
+  TagTypes,
+} from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
+
+const meta: Meta<CardType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    image: {
+      src: "https://picsum.photos/id/56/558/418?grayscale",
+      alt: "Blurry bubbles",
+    },
+    title: {
+      title: "Card title",
+      as: HeadingTypes.THREE,
+    },
+    link: {
+      href: "#",
+      title: "Find out more",
+    },
+    content:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  argTypes: {
+    modifiers: {
+      options: Object.values(CardModifier),
+      control: "multi-select",
+    },
+    // @ts-expect-error The controls follow the shape
+    "image.src": { control: "text" },
+    "image.alt": { control: "text" },
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+    "link.href": { control: "text" },
+    "link.title": { control: "text" },
+  },
+}
+
+export default meta
+type Story = StoryObj<CardType>
+
+export const Card: Story = {}
+
+export const Date: Story = {
+  args: {
+    date: "25 May 2025",
+  },
+}
+
+export const Tags: Story = {
+  args: {
+    tags: {
+      items: ["Music", "News"],
+      type: TagTypes.TEXT,
+    },
+  },
+}
+
+export const LinkList: Story = {
+  args: {
+    link: null,
+    linkList: {
+      items: [
+        {
+          title: "Link one",
+          href: "#",
+        },
+        {
+          title: "Link two",
+          href: "#",
+        },
+        {
+          title: "Link three",
+          href: "#",
+        },
+      ],
+    },
+  },
+}
+
+export const Icon: Story = {
+  args: {
+    icon: {
+      icon: Icons.HEART,
+    },
+    image: null,
+  },
+}
+
+export const NoImage: Story = {
+  args: {
+    image: null,
+  },
+}

package/src/Component/Card/Card.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Card"
+import Link from "../../Atom/Link/Link"
+import Text from "../../Atom/Text/Text"
+import Media from "../../Atom/Media/Media"
+import "./card.css"
+import { AsTags, HeadingLevels, HeadingStyles, LinkStyles } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    children: { table: { disable: true } },
+    image: { table: { disable: true } },
+    headingLevel: { options: Object.values(HeadingLevels) },
+    headingModifier: { options: Object.values(HeadingStyles) },
+    as: { options: Object.values(AsTags) },
+  },
+  args: {
+    title: "Key feature or Section Name",
+    children: (
+      <>
+        <Text>
+          A short description to help explain enough about the subject matter to
+          encourage visitors to learn more.
+        </Text>
+        <Link modifier={LinkStyles.MORE} to="http://example.com">
+          Learn More
+        </Link>
+      </>
+    ),
+    image: <Media src="https://picsum.photos/id/56/558/418?grayscale" alt="" />,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Component>
+
+export const Card: Story = {}
+export const Linked: Story = {
+  args: {
+    clickable: true,
+  },
+}
+export const Right: Story = {
+  args: {
+    right: true,
+    headingLevel: HeadingLevels.TWO,
+  },
+}

package/src/Component/Card/Card.tsx

@@ -0,0 +1,56 @@
+import { JSX, ReactNode, PropsWithChildren } from "react"
+import classNames from "classnames"
+import Heading from "../../Atom/Heading/Heading"
+import { AsTags, HeadingStyles } from "../../enums"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+
+type CardProps = PropsWithChildren & {
+  title: string
+  image?: ReactNode
+  intro?: ReactNode
+  right?: boolean
+  clickable?: boolean
+  headingLevel?: HeadingTypes
+  headingModifier?: HeadingStyles
+  as?: AsTags
+}
+
+const Card = ({
+  title,
+  children,
+  right = null,
+  clickable = false,
+  image = null,
+  intro = null,
+  headingLevel = HeadingTypes.THREE,
+  headingModifier = null,
+  as = AsTags.DIV,
+}: CardProps): JSX.Element => {
+  const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
+  return (
+    <Tag className="container">
+      <article
+        className={classNames("card", {
+          "card--right": right,
+          "card--clickable": clickable,
+        })}
+      >
+        {image && (
+          <figure className={classNames("card__media", "stack")}>
+            <div className="skeleton skeleton--bg"></div>
+            {image}
+          </figure>
+        )}
+        <div className={classNames("card__content", "vertical-flow")}>
+          {intro}
+          <Heading as={headingLevel} modifier={headingModifier}>
+            {title}
+          </Heading>
+          {children}
+        </div>
+      </article>
+    </Tag>
+  )
+}
+
+export default Card

package/src/Component/Card/README.md

@@ -0,0 +1,21 @@
+# Card
+
+### How to use
+
+**CSS**
+
+`@import @pnx-mixtape/mxds/card.css';`
+
+**HTML**
+
+```html
+<div class="card">
+  <figure class="card__media">
+    <img src="https://via.placeholder.com/788x556" alt="Descriptive text" />
+  </figure>
+  <div class="card__content">
+    <h3>Title</h3>
+    <p>Body content</p>
+  </div>
+</div>
+```

package/src/Component/Card/__snapshots__/Card.stories.ts.snap

@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Card Card smoke-test 1`] = `
+<div class="container">
+  <article class="card ">
+    <figure class="card__media">
+      <picture>
+        <img src="https://picsum.photos/id/56/558/418?grayscale"
+             alt
+        >
+      </picture>
+    </figure>
+    <div class="card__content vertical-flow-flex">
+      <h3 class=" ">
+        Card title
+      </h3>
+      <div class="text--lede">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </div>
+      <a class="link--more "
+         href="#"
+      >
+        Find out more
+      </a>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Components/Card Date smoke-test 1`] = `
+<div class="container">
+  <article class="card ">
+    <figure class="card__media">
+      <picture>
+        <img src="https://picsum.photos/id/56/558/418?grayscale"
+             alt
+        >
+      </picture>
+    </figure>
+    <div class="card__content vertical-flow-flex">
+      <div class="text--small">
+        25 May 2025
+      </div>
+      <h3 class=" ">
+        Card title
+      </h3>
+      <div class="text--lede">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </div>
+      <a class="link--more "
+         href="#"
+      >
+        Find out more
+      </a>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Components/Card Icon smoke-test 1`] = `
+<div class="container">
+  <article class="card ">
+    <div class="card__icon">
+      <span class="icon icon--heart-selected ">
+      </span>
+    </div>
+    <div class="card__content vertical-flow-flex">
+      <h3 class=" ">
+        Card title
+      </h3>
+      <div class="text--lede">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </div>
+      <a class="link--more "
+         href="#"
+      >
+        Find out more
+      </a>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Components/Card LinkList smoke-test 1`] = `
+<div class="container">
+  <article class="card ">
+    <figure class="card__media">
+      <picture>
+        <img src="https://picsum.photos/id/56/558/418?grayscale"
+             alt
+        >
+      </picture>
+    </figure>
+    <div class="card__content vertical-flow-flex">
+      <h3 class=" ">
+        Card title
+      </h3>
+      <div class="text--lede">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </div>
+      <ul class="link-list">
+        <li>
+          <a href="#"
+             class="icon icon--chevron-right"
+          >
+            Link one
+          </a>
+        </li>
+        <li>
+          <a href="#"
+             class="icon icon--chevron-right"
+          >
+            Link two
+          </a>
+        </li>
+        <li>
+          <a href="#"
+             class="icon icon--chevron-right"
+          >
+            Link three
+          </a>
+        </li>
+      </ul>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Components/Card NoImage smoke-test 1`] = `
+<div class="container">
+  <article class="card ">
+    <div class="card__content vertical-flow-flex">
+      <h3 class=" ">
+        Card title
+      </h3>
+      <div class="text--lede">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </div>
+      <a class="link--more "
+         href="#"
+      >
+        Find out more
+      </a>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Components/Card Tags smoke-test 1`] = `
+<div class="container">
+  <article class="card ">
+    <figure class="card__media">
+      <picture>
+        <img src="https://picsum.photos/id/56/558/418?grayscale"
+             alt
+        >
+      </picture>
+    </figure>
+    <div class="card__content vertical-flow-flex">
+      <h3 class=" ">
+        Card title
+      </h3>
+      <ul class="tags">
+        <li>
+          <span class="tag">
+            hello
+          </span>
+        </li>
+        <li>
+          <span class="tag">
+            news
+          </span>
+        </li>
+      </ul>
+      <div class="text--lede">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </div>
+      <a class="link--more "
+         href="#"
+      >
+        Find out more
+      </a>
+    </div>
+  </article>
+</div>
+`;