> 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

### Use Case

![Sample article incorporating a 3 Card Layout](/files/-MTn8YlPx0kBqrfeMoMA)

### 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](/files/-MTn8JY6MJosPHSO0PRl)

#### 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.](/files/-MTn8CEJQef3ZIPxvx6c)

#### 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](/files/-MTn83iU6PAd6l1bqTvn)

#### 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.

![](/files/-MTiWQtrxOo77C86KyIB)

#### &#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.

![](/files/-MTiY72UmlhjSJwvmn7f)

#### 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](/files/-MTiZjxdPQoJeiuiKjj_)

* 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;

![](/files/-MTkb8HApeENeUa6xaiw)

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)

![](/files/-MTkeFeWo53w0h4J-mDM)

#### **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.

![](/files/-MTkm5u4ecNyhX-n5x2S)

#### **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.

![](/files/-MTkqy6AIgucXOC7LYNm)

#### **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.

![](/files/-MTkvTRXvb5kq0U8Yfwq)

#### 10. Save your changes.