Card - Kartička

Kartička

Otvoriť príklad na novej záložke

Horizontálna kartička

Code

Markup

<div class="idsk-card">
    <div class="idsk-card__image-wrapper">
      <img src="/assets/images/placeholder.png" alt="Nadpis kartičky">
    </div>
  <div class="idsk-card__content">
    <div class="idsk-card__heading">
      <h3>
          <a href="#" class="govuk-link" target=" _self ">Nadpis kartičky</a>
      </h3>
    </div>
    <div class="idsk-card__description">V tejto časti nájdete všetky podtrebné informácie spojené s používaním a vytvorením občianského preukazu s čipom</div>
      <p class="idsk-card__date-tags">
        <time datetime="1. 1. 2023">1. 1. 2023</time>
        <span>—</span>
              <span>
                  Tag 1
              </span>
                <span>|</span>
              <span>
                  Tag 2
              </span>
                <span>|</span>
              <span>
                  Tag 3
              </span>
      </p>
  </div>
</div>

Macro

{% from "govuk/components/card/macro.njk" import govukCard %}

{{ govukCard({
  title: "Nadpis kartičky",
  description:
    "V tejto časti nájdete všetky podtrebné informácie spojené s používaním a vytvorením občianského preukazu s čipom",
  imgSrc: "/assets/images/placeholder.png",
  internalLink: "#",
  date: "1. 1. 2023",
  tags: [
    {
      text: "Tag 1"
    },
    {
      text: "Tag 2"
    },
    {
      text: "Tag 3"
    }
  ]
}) }}

Kartička vertikálna

Otvoriť príklad na novej záložke

Vertikálna kartička

Code

Markup

<div class="idsk-card idsk-card--vertical">
    <div class="idsk-card__image-wrapper">
      <img src="/assets/images/placeholder.png" alt="Nadpis kartičky">
    </div>
  <div class="idsk-card__content">
    <div class="idsk-card__heading">
      <h3>
          <a href="#" class="govuk-link" target=" _self ">Nadpis kartičky</a>
      </h3>
    </div>
    <div class="idsk-card__description">V tejto časti nájdete všetky podtrebné informácie spojené s používaním a vytvorením občianského preukazu s čipom</div>
      <p class="idsk-card__date-tags">
        <time datetime="25. 02. 2018">25. 02. 2018</time>
        <span>—</span>
              <span>
                  Tag 1
              </span>
                <span>|</span>
              <span>
                  <a class="govuk-link" href="#2">
                    Tag 2
                  </a>
              </span>
      </p>
  </div>
</div>

Macro

{% from "govuk/components/card/macro.njk" import govukCard %}

{{ govukCard({
  isVertical: true,
  title: "Nadpis kartičky",
  description:
    "V tejto časti nájdete všetky podtrebné informácie spojené s používaním a vytvorením občianského preukazu s čipom",
  imgSrc: "/assets/images/placeholder.png",
  internalLink: "#",
  date: "25. 02. 2018",
  tags: [
    {
      text: "Tag 1"
    },
    {
      text: "Tag 2",
      href: "#2"
    }
  ]
}) }}

Kartička horizontálna bez obrázku

Otvoriť príklad na novej záložke

Horizontálna kartička bez obrázku

Code

Markup

<div class="idsk-card">
  <div class="idsk-card__content">
    <div class="idsk-card__heading">
      <h3>
          Nadpis kartičky
      </h3>
    </div>
    <div class="idsk-card__description">V tejto časti nájdete všetky podtrebné informácie spojené s používaním a vytvorením občianského preukazu s čipom</div>
      <p class="idsk-card__date-tags">
        <time datetime="25. 02. 2018">25. 02. 2018</time>
        <span>—</span>
              <span>
                  Tag 1
              </span>
                <span>|</span>
              <span>
                  Tag 2
              </span>
      </p>
  </div>
</div>

Macro

{% from "govuk/components/card/macro.njk" import govukCard %}

{{ govukCard({
  title: "Nadpis kartičky",
  description:
    "V tejto časti nájdete všetky podtrebné informácie spojené s používaním a vytvorením občianského preukazu s čipom",
  date: "25. 02. 2018",
  tags: [
    {
      text: "Tag 1"
    },
    {
      text: "Tag 2"
    }
  ]
}) }}