|
|
- +++
- title = "Card"
- description = "Display a bordered container with title area."
- categories = ["experience"]
- tags = []
- html_attributes = []
- custom_attributes = ["header", "text"]
- snippets_used = ["card", "external", "button"]
- [[copyright]]
- owner = "Josh Habdas"
- date = "2019"
- license = "agpl-3.0-or-later"
- +++
-
- 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,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAMAAADfDTFxAAAACXBIWXMAAAAAAAAAAQCEeRdzAAADAFBMVEUAAAD/AwD/EgAQDw//EQD/DQD/CwD/CAATEhL/CQD/CgAaGRn+CAAiISEhICD/CgAYFxchICAbGhr/CAD/CAASERH/CAASERESEBATERH/CQD/BwAREBEQEBA8Ojr/CQAzMjISERETDw9MTEwPDg8ODg5aWloREBH+DAAxMDB1dXU5OTk7OjpJSUkgICBBQUJBQUFEREQqKipVVVYwMDAwMDD/EABNTU0fHyD+EwAWFhZRUVFeXl43NzgJCQk/Pz8zMzMrKioKCQpycnJxcXFZWVlaWltOTk7/FgBaWlokJCQSEhOenp6RkZGIiIi9LyBhYWKLi4ttbW2Li4t8fHz/GwGlpaVtbW32NR6QkJCwsLD7Z1f/GADDw8Ozs7NtbW3Pz8+ampqgoKD/FgDBwcG5ubm+vr5dExCEhIQ+CwmQFw1NGBaCEw/yOCbCwsLFxcUSEhMVFRYZGRm/v74cHBzKysoeHh8QEBAICAkNDQ4hISEmJicEBAUBAQIjIyQoKCk1NTUqKislJSU3NzcKCgsuLi8sLC08PDxAQEA6OjozMzPNzc0+Pj4wMDEGBgcyMjKSkpJCQkLQ0NCUlJQ5OTlWVlaYmJhTU1Onp6dERERKSkpGRkZOTk5kZGRaWlpQUFBISEiLi4uurq5MTEzV1dVoaGi8vLzS0tKAgICVlZWkpKReXl6xsbGrq6uXl5dhYWF9fX2pqamDg4OPj4+ioqK2trZsbGycnJyfn596enpycnJvb2+6urqzs7OIiIh3d3fY2NiFhYa4uLgrIyQyJCN0dHU4MjI5JCNBNDM0MTFHMzNJJCNAIyMZEhJFPT08MjLb29tNMzJTJCNTMzJaMzIiLjRiNDMoNDpJU1dtNDIXHyNdJCMpHBwdKC3/vbRmJCNASU3/x740KysiExN6NTJxJSIyPkT/z8f/3NcYCAg5FRU8LCuNMSv/sqh/JyJNUlYtDQ1WPTyfOjLmRjS8PzJGLi2iLSL/ppz+/v7YOCXo6OhLFRTh4eH+h3r/mIzmvf6/X39DAAABAHRSTlMABQoGDhIXIAsbMxE7HxgsJzE6J0JGSmdWeVIkp7ZKWlmXiC7X40DKZXpYa47W86Tfv8Ri79tz7ueI83fcwfXwrJXrd9iunYifw93DmenB/vF1vZOt0bKT9tLB/b/u3+vk7N+u2OzHqufb/sJx2///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////FsSsOQAAEABJREFUeJzs3etvU1e+P/4j5UmkiAiQUKlEES29iNsAvYjRofQ2bVHn9HvU9ow6+laameqop5pHiW0cJ/Gm3tve8fYl3hinNo4vcQwmEAg0ISEJuZNIefB7Nn/OV0d98Fuftda+2AkUWkoceL+AkNCQ0uDm7c9nfdZa//ZvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALBB28HDf/rrp5+e3uo/BwAAwHOj9eDhz7+/3jU3Npw60bbVfxgAAIDnQcsOFr4DP/98f6BzRI1E3t611X8gAACAZ17763/65tuf71+93nlu+taVlaih/hkB7NbS2tKy1X8GAAB4trS9/qe//HNybnGgc5GF752bsxdn/vzyCzu3+o/VPFp2n/3ks8++Yv7y17/+9U9/Onz49YM72pDHAADw67UepPBdHxuOaysifCc//uTIbqz/urR9WKuszN6+NnD16s//+7//7//9L337+f63nx9u3eo/GgAAbEetB9/6639Oro8PZzRVUcK52YurCN9N7I2tD/b/zJJ3g2+/RAQDAMBjadmx/69fTcyPD8eT4YiiRk3TeOeT0/vbt/rP1YyO/rjWOcBr342+P7jVfzoAANg+2l//01cfz4+V4xoL33A0bRp/funFPQjfB3jryuJiZ/+/WAT//K+f71/v7+w/t7g4Pb20tDa92PH3w1gLBgCAR9D2+um/fMwrXzUSCUfNaPiPL72yZwdS5MFa/nRl8dq1K/eWJ+ZW5iYmJubYt9HRUfba6MTc3D9Po2cPAAAPR4u+Hy+Ml6ntHAmbpmmw8N2L8P0lLYf/fmW+UBoeG5mZX5mboxBm2UshzF7OrXyFgXEAAHggFr6ffvyPsXI8zSvftAjfnQjfR9Fy+B96VC8Mjw3NzK9TAlMGs/TlETw39/Fb+DQCAMAmqPL96h91bec3EL6P5cD7elQrDFcogVd4DTzK62DRip77KxbQAQCgHh93/sdYLWWqYuAq/Ic3Xt67C9tnHtOeE3o0maEaeGF9ZYKvBMv8pTb03Fc4NwwAAGwsfM9S+MbstjML3xd2YWjo19jNEliLWzWwCGCewFYbGs9pAADg30T4fvJupcjCNxQJp5Os8v3zPoTvb8AS2EzGy5WhBd6F5gFsJzCL4
- {{< external rel="next" href="https://go.habd.as/mavic-air" >}}
- {{< hackcss-button type="primary" text="View on Amazon" isblock="true" />}}
- {{< /external >}}
- {{< /hackcss-card >}}
|
