> For the complete documentation index, see [llms.txt](https://kmdesign.services.gatech.edu/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kmdesign.services.gatech.edu/patterns/3-card-layout/card-layouts-in-kb-articles.md).

# Article 3 Card

Do you need a row of product cards in your knowledge article?

### Use Case

![Sample article incorporating a 3 Card Layout](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTn8O0wcOjXwC91MUf1%2F-MTn8YlPx0kBqrfeMoMA%2FScreen%20Shot%202021-02-17%20at%2010.19.10%20PM.png?alt=media\&token=c1fda020-236a-4f2f-858e-ba956dfddb85)

### How To Get This Layout

#### 1. Copy the appropriate code snippet below, depending on how many cards you would like in a single row.

{% tabs %}
{% tab title="3 Cards in a row" %}

#### Use case:

![3 Card Layout with three cards in the row](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTn7r1gIlPYLU0DINSL%2F-MTn8JY6MJosPHSO0PRl%2FScreen%20Shot%202021-02-17%20at%2010.13.55%20PM.png?alt=media\&token=56e0a833-ed22-4119-9d5c-f59a1185d489)

#### Code Snippet

```markup
<!--START OF PRODUCT ROW-->
<div class="row"><!--START OF PRODUCT ITEM-->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title catalogItemTitle">Jurassic Park</h3>
</div>
<div class="panel-body gt-kba-3CLayout-card"><img style="align: baseline;" src="Contributor_Template_KBA%20_3_Card_Layout_200x112_Guidelines.svg" alt="3 card icon template for article" width="200" height="112" align="baseline" /><br />
<p>So you two dig up, dig up dinosaurs? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don&rsquo;t eat the tourists.</p>
</div>
<div class="panel-footer catalogItemCTA"><a href="https://gatech.service-now.com/technology?id=kb_article_view&amp;sysparm_article=KB0026607" target="_blank" rel="noopener" title="Learn More">View Jurassic Park Movie</a></div>
</div>
</div>
<!--START OF PRODUCT ITEM-->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title catalogItemTitle">Independence Day</h3>
</div>
<div class="panel-body gt-kba-3CLayout-card"><img style="align: baseline;" src="Contributor_Template_KBA%20_3_Card_Layout_200x112_Guidelines.svg" alt="3 card icon template for article" width="200" height="112" align="baseline" /><br />
<p>We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore!</p>
</div>
<div class="panel-footer catalogItemCTA"><a href="http://lawn.gatech.edu/gtother" target="_blank" rel="noopener" title="Learn More">Watch the ID movie</a></div>
</div>
</div>
<!--START OF PRODUCT ITEM-->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title catalogItemTitle">The Life Aquatic</h3>
</div>
<div class="panel-body gt-kba-3CLayout-card"><img style="align: baseline;" src="Contributor_Template_KBA%20_3_Card_Layout_200x112_Guidelines.svg" alt="3 card icon template for article" width="200" height="112" align="baseline" /><br />
<p>Wh-what is-h-how did you get my espresso machine? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager?</p>
</div>
<div class="panel-footer catalogItemCTA"><a href="http://lawn.gatech.edu/gtvisitor" target="_blank" rel="noopener" title="Learn More">More on The Life Aquatic</a></div>
</div>
</div>
</div>
```

{% endtab %}

{% tab title="2 Cards in a row" %}

#### Use case:

![3 Card Layout with two cards in the row.](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTn7r1gIlPYLU0DINSL%2F-MTn8CEJQef3ZIPxvx6c%2FScreen%20Shot%202021-02-17%20at%2010.14.08%20PM.png?alt=media\&token=d13165de-7c69-4a5b-90a7-7ab69fd66768)

#### Code Snippet

```markup
<!--START OF PRODUCT ROW-->
<div class="row"><!--START OF PRODUCT ITEM-->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title catalogItemTitle">Jurassic Park</h3>
</div>
<div class="panel-body gt-kba-3CLayout-card"><img style="align: baseline;" src="Contributor_Template_KBA%20_3_Card_Layout_200x112_Guidelines.svg" alt="3 card icon template for article" width="200" height="112" align="baseline" /><br />
<p>So you two dig up, dig up dinosaurs? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don&rsquo;t eat the tourists.</p>
</div>
<div class="panel-footer catalogItemCTA"><a href="https://gatech.service-now.com/technology?id=kb_article_view&amp;sysparm_article=KB0026607" target="_blank" rel="noopener" title="Learn More">View Jurassic Park Movie</a></div>
</div>
</div>
<!--START OF PRODUCT ITEM-->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title catalogItemTitle">Independence Day</h3>
</div>
<div class="panel-body gt-kba-3CLayout-card"><img style="align: baseline;" src="Contributor_Template_KBA%20_3_Card_Layout_200x112_Guidelines.svg" alt="3 card icon template for article" width="200" height="112" align="baseline" /><br />
<p>We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore!</p>
</div>
<div class="panel-footer catalogItemCTA"><a href="http://lawn.gatech.edu/gtother" target="_blank" rel="noopener" title="Learn More">Watch the ID movie</a></div>
</div>
</div>
</div>
```

{% endtab %}

{% tab title="1 Card in a row" %}

#### Use case:

![3 Card Layout with only one card in the row](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTn7r1gIlPYLU0DINSL%2F-MTn83iU6PAd6l1bqTvn%2FScreen%20Shot%202021-02-17%20at%2010.14.26%20PM.png?alt=media\&token=829b735b-4887-466b-90eb-1354cea5dc17)

#### Code Snippet

```markup
<!--START OF PRODUCT ROW-->
<div class="row"><!--START OF PRODUCT ITEM-->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title catalogItemTitle">Jurassic Park</h3>
</div>
<div class="panel-body gt-kba-3CLayout-card"><img style="align: baseline;" src="Contributor_Template_KBA%20_3_Card_Layout_200x112_Guidelines.svg" alt="3 card icon template for article" width="200" height="112" align="baseline" /><br />
<p>So you two dig up, dig up dinosaurs? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don&rsquo;t eat the tourists.</p>
</div>
<div class="panel-footer catalogItemCTA"><a href="https://gatech.service-now.com/technology?id=kb_article_view&amp;sysparm_article=KB0026607" target="_blank" rel="noopener" title="Learn More">View Jurassic Park Movie</a></div>
</div>
</div>
</div>
```

{% endtab %}
{% endtabs %}

#### 2. Paste the code snippet into your article's HTML source code, just beneath your existing code.

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTbHWavyIKssvQQCCCX%2F-MTiWQtrxOo77C86KyIB%2F3card-KBA-Layout-Paste%20Code.gif?alt=media\&token=1f50ea85-544b-4d4a-aca6-b3de9ed0d6c5)

#### &#x20;3. Edit your card titles <a href="#id-3-edit-your-general-description" id="id-3-edit-your-general-description"></a>

Double-click (or triple-click) the placeholder title. Once it is highlighted in light-blue, you may begin to type or paste your new card title.

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTbHWavyIKssvQQCCCX%2F-MTiY72UmlhjSJwvmn7f%2F3card-KBA-Layout-Replace%20Titles.gif?alt=media\&token=0c1b4fe4-4005-4b42-a2d0-3a602bc92988)

#### 4. Prepare your imagery to replace the default placeholders.

In most cases, your imagery will be a logo or icon. Create your icon per the specifications below (template available). If you're using a photo, please be sure that it is size to the specifications below and [optimized for web](/components/images.md).

![Your icon should not exceed the 150x92 white footprint](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTbHWavyIKssvQQCCCX%2F-MTiZjxdPQoJeiuiKjj_%2F3%20Card%20Icon%20Template%20200x112_16-9%20AR-01.svg?alt=media\&token=ceecaafc-6f1f-42e7-a650-59ef769c9ca8)

* Format SVG (preferred for logos & iconography), PNG, JPG
* Grayscale color mode preferred (black & white)
* Dimensions: 200px wide X 112px height
* Padding: horizontal - 25px, vertical 10px

{% file src="/files/-MTiabtEC-9Y8ogEnPm8" %}
Download the Icon Template - .AI File
{% endfile %}

{% hint style="info" %}
If you need assistance with creative/logo/iconography assets, please [submit a request to the Website Development & Support team](/requesting-help-coming-soon.md)
{% endhint %}

#### **5. Replace the placeholder images**

Click the placeholder icon. Once highlighted in light-blue, select the image tool, and select "Attachment" as the type. Select the paperclip to upload your new image.&#x20;

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTk_SoBMIflCnQWbolV%2F-MTkb8HApeENeUa6xaiw%2FKBA%20-%203%20card%20-%20upload%20icon.gif?alt=media\&token=bf6ae45c-551b-4731-8cc9-84d030722166)

Set the image configurations to those below and select "Save".

* Add a description into the [Alt Text (Required)](/writing-for-accessibility.md) and Tooltip (optional) fields.
* Alignment: Baseline (default)
* Border Thickness: (blank)
* Spacing: Horizontal (blank), Vertical (blank)
* Size: Width (200), Height (112)

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTkcyFJCU3BYXIHWsLf%2F-MTkeFeWo53w0h4J-mDM%2FKBA%20-%203%20card%20-%20icon%20spec%20settings%20\(1\).gif?alt=media\&token=e45f1161-ecd2-4ccb-9891-d1743c3ef34c)

#### **6. Edit your short descriptions**

This should be a SHORT description of your content (145 characters MAX). If you exceed 145 characters (5 lines of text), your text will be truncated with an ellipsis. Double-click (or triple-click) the placeholder copy. Once it is highlighted in light-blue, you may begin to type or paste your new card description.

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTkcyFJCU3BYXIHWsLf%2F-MTkm5u4ecNyhX-n5x2S%2F3%20card%20layout%20replace%20description.gif?alt=media\&token=2a4d460a-eec2-45da-9dd6-e4b08a46fc81)

#### **7. Edit your call-to-action (CTA)**

Your CTA should be short and specific. Follow the [links best practices](/components/links.md). If you don't have a CTA, you can delete the placeholder.

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTkcyFJCU3BYXIHWsLf%2F-MTkqy6AIgucXOC7LYNm%2Fupdating%20CTA%20\(1\).gif?alt=media\&token=df4c1382-c846-42f7-8a63-c4a064c366af)

#### **8. Repeat Steps 3–7 for any remaining cards.**

#### **9. Add more rows of cards (optional).**

To add more rows of cards, repeat the process from Step 1.

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MTkcyFJCU3BYXIHWsLf%2F-MTkvTRXvb5kq0U8Yfwq%2Fpasting%20a%20new%20row.gif?alt=media\&token=00d880ab-77a4-4e07-8c4c-6e005834534c)

#### 10. Save your changes.