+++
title = "Card"
description = "Display a bordered container with title area."
categories = ["experience"]
tags = []
html_attributes = []
custom_attributes = ["header", "text"]
snippets_used = ["card", "external", "button"]
+++

With `header` attribute and plain text:

```html
{{</* hackcss-card header="Title" text="Lorem ipsum dolor sit amet" /*/>}}
```

{{< hackcss-card header="Title" text="Lorem ipsum dolor sit amet" />}}

With `header` attribute and formatted text:

```html
{{</* hackcss-card header="Hacker Ipsum" >}}<samp>Haxx0r ipsum true class firewall continue bytes recursively grep <b>Linus Torvalds</b> gobble Trojan horse d00dz baz. Crack bang <mark>ssh for int buffer</mark> sql fork mailbomb gnu then client salt spoof. Server python error throw sudo fatal while echo dereference concurrently.</samp>{{< /hackcss-card */>}}
```

{{< hackcss-card header="Hacker Ipsum" >}}<samp>Haxx0r ipsum true class firewall continue bytes recursively grep <b>Linus Torvalds</b> gobble Trojan horse d00dz baz. Crack bang <mark>ssh for int buffer</mark> sql fork mailbomb gnu then client salt spoof. Server python error throw sudo fatal while echo dereference concurrently.</samp>{{< /hackcss-card >}}

With `header` attribute, [External](../external), [Button](../button) and HTML:

```html
{{</* hackcss-card header="DJI Mavic Air Quadcopter with Remote Controller - Arctic White" >}}
  <img src="/images/products/mavic-air.png">
  {{< external rel="next" href="https://go.habd.as/mavic-air" >}}
    {{< hackcss-button type="primary" text="View on Amazon" isblock="true" />}}
  {{< /external >}}
{{< /hackcss-card */>}}
```

{{< hackcss-card header="DJI Mavic Air Quadcopter with Remote Controller - Arctic White" >}}
  <img alt="Product image" src="data:image/png;base64,[encoded data, 157388 characters]">
  {{< external rel="next" href="https://go.habd.as/mavic-air" >}}
    {{< hackcss-button type="primary" text="View on Amazon" isblock="true" />}}
  {{< /external >}}
{{< /hackcss-card >}}
