Card

 <div class="gi-card gi-card-vertical gi-card-inset-body">
  <div class="gi-card-image">
    <a href="">
      <img src="https://placeholderjs.com/400x300" alt="" />
    </a>
  </div>
  <div class="gi-card-content gi-card-inset-body">
    <div class="gi-card-header">
      <div class="gi-card-heading">
        <div class="gi-card-title">Card Title</div>
        <div class="gi-text-sm gi-card-subheading">Subheading</div>
      </div>
      <div class="gi-card-tag">
        <strong class="gi-tag gi-tag-info">New</strong>
      </div>
    </div>
    <div class="gi-card-paragraph">
      <p class="gi-text-sm">This is card.</p>
    </div>
    <div class="gi-card-action">
      <button
        type="button"
        data-testid="govieButton-default-secondary-medium-notDisabled"
        data-element="button-container"
        data-module="gieds-button"
        class="gi-btn gi-btn-secondary gi-btn-regular"
      >
        Button
      </button>
    </div>
  </div>
</div>

  {{ govieCard({
    "type": "vertical",
    "title": "Card Title",
    "subTitle": "Subheading",
    "inset": "body",
    "media": {
      "type": 'image',
      "config": {
        "src": "https://placeholderjs.com/400x300"
      }
    },
    "content": "This is card.",
    "tag": {
      "text": "New",
      "type": "info"
    },
    "action": {
      "type": "button",
      "content": "Button",
      "variant": "secondary"
    }
  }) }}

import { Card } from '@govie-ds/react';

<Card
  action={{
    children: 'Button',
    type: 'button',
    variant: 'secondary'
  }}
  content="This is card."
  media={{
    type: 'image',
    config: {
      src: "https://placeholderjs.com/400x300"
    }
  }}
  inset="body"
  subTitle="Subheading"
  tag={{
    text: 'New',
    type: 'info'
  }}
  title="Card Title"
  type="vertical"
/>

 <div class="gi-card gi-card-horizontal gi-card-inset-body">
  <div class="gi-card-image">
    <a href="">
      <img src="https://placeholderjs.com/400x300" alt="" />
    </a>
  </div>

  <div class="gi-card-content gi-card-inset-body">
    <div class="gi-card-header">
      <div class="gi-card-heading">
        <div class="gi-card-title">Card Title</div>
        <div class="gi-text-sm gi-card-subheading">Subheading</div>
      </div>
      <div class="gi-card-tag">
        <strong class="gi-tag gi-tag-info">New</strong>
      </div>
    </div>

    <div class="gi-card-paragraph">
      <p class="gi-text-sm">This is card.</p>
    </div>

    <div class="gi-card-action">
      <button
        type="button"
        data-testid="govieButton-default-secondary-medium-notDisabled"
        data-element="button-container"
        data-module="gieds-button"
        class="gi-btn gi-btn-secondary gi-btn-regular"
      >
        Button
      </button>
    </div>
  </div>

</div>

  {{ govieCard({
    "type": "horizontal",
    "title": "Card Title",
    "subTitle": "Subheading",
    "inset": "body",
    "media": {
      "type": 'image',
      "config": {
        "src": "https://placeholderjs.com/400x300"
      }
    }
    "content": "This is card.",
    "tag": {
      "text": "New",
      "type": "info"
    },
    "action": {
      "type": "button",
      "content": "Button",
      "variant": "secondary"
    }
  }) }}

import { Card } from '@govie-ds/react';

<Card
  action={{
    children: 'Button',
    type: 'button',
    variant: 'secondary'
  }}
  content="This is card."
  media={{
    type: 'image',
    config: {
      src: "https://placeholderjs.com/400x300"
    }
  }}
  inset="body"
  subTitle="Subheading"
  tag={{
    text: 'New',
    type: 'info'
  }}
  title="Card Title"
  type="horizontal"
/>