Card

 <div class="gi-card gi-card-vertical">
  <div class="gi-card-image">
    <a href="">
      <img src="https://placeholderjs.com/400x300" alt="Card Title" />
    </a>
  </div>
  <div class="gi-card-content gi-card-content-inset">
    <div class="gi-card-header">
      <div class="gi-card-heading">
        <div class="gi-card-title !gi-mb-2">Card Title</div>
        <div class="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
        data-element="button-container"
        data-module="gieds-button"
        data-testid="govieButton-default-secondary-medium-notDisabled"
        class="gi-btn gi-btn-secondary gi-btn-regular"
      >
        Button
      </button>
    </div>
  </div>
</div>

  {{ govieCard({
    "type": "vertical",
    "title": "Card Title",
    "subTitle": "Subheading",
    "inset": "body",
    "img": "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."
  img="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">
    <div class="gi-card-image">
      <a href="">
        <img src="https://placeholderjs.com/400x300" alt="Card Title" />
      </a>
    </div>

    <div class="gi-card-content gi-card-content-inset">
      <div class="gi-card-header">
        <div class="gi-card-heading">
           <div class="gi-card-heading">
            <div class="gi-card-title !gi-mb-2">Card Title</div>
            <div class="gi-card-subheading">Subheading</div>
          </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
          data-element="button-container"
          data-module="gieds-button"
          data-testid="govieButton-default-secondary-medium-notDisabled"
          class="gi-btn gi-btn-secondary gi-btn-regular"
        >
          Button
        </button>
      </div>
    </div>
  </div>

  {{ govieCard({
    "type": "horizontal",
    "title": "Card Title",
    "subTitle": "Subheading",
    "inset": "body",
    "img": "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."
  img="https://placeholderjs.com/400x300"
  inset="body"
  subTitle="Subheading"
  tag={{
    text: 'New',
    type: 'info'
  }}
  title="Card Title"
  type="horizontal"
/>