> 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/catalog-page-layout.md).

# Category Desc 3 Card

### Use Case

![](/files/-MKa6Knv_nvEk7c4ScC1)

### How To Get This Layout

#### **1. Copy the code snippet below**

```markup
<div class="row">
<p>Did he just throw my cat out of the window? Checkmate... Must go faster. I was part of something special. I was part of something special. You know what? It is beets. I've crashed into a beet truck. Yes, Yes, without the oops! God help us, we're in the hands of engineers.</p>

</div>
<!--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">Sites@GeorgiaTech</h3>
</div>
<div class="panel-body catalogItemBody"><img class="catalogItemImage" src="sitesatGT_logo_bw.png" alt="sites at Georgia Tech  logo" width="250" /><p>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.edu">Learn More</a></div>
</div>
</div>
<!--END OF PRODUCT ITEM--> <!--START OF PRODUCT ITEM-->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title catalogItemTitle">Plesk Web Hosting</h3>
</div>
<div class="panel-body catalogItemBody"><img class="catalogItemImage" src="plesk_logo_bw.svg" alt="plesk logo" /><p>You know what? It is beets. I've crashed into a beet truck. Yes, Yes, without the oops! It is beets. I've crashed into a beet truck.</p></div>
<div class="panel-footer catalogItemCTA"><a href="https://gatech.edu">Learn More</a></div>
</div>
</div>
<!--END OF PRODUCT ITEM--> <!--START OF PRODUCT ITEM-->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title catalogItemTitle">Dedicated Web Server</h3>
</div>
<div class="panel-body catalogItemBody"><img class="catalogItemImage" src="logo_dws_bw.svg" alt="plesk logo" /><p>You really think you can fly that thing? Yes, Yes, without the oops! Jaguar shark! So tell me - does it really exist?</p></div>
<div class="panel-footer catalogItemCTA"><a href="https://gatech.edu">Learn More</a></div>
</div>
</div>
<!--END OF PRODUCT ITEM--></div>
<!--END OF PRODUCT ROW-->
```

#### 2. Paste it into your article's HTML source code

![](/files/-MKa9MWX2aD3AaCZAmNj)

#### 3. Edit your general description

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

![](/files/-MNZRo2xomeiVlrvmxvA)

&#x20;

#### 4. Edit the card titles

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

![](/files/-MNZonOfUhp3pSjwZ1sG)

#### 5. Edit the card icon

Create your icon per the specifications below.

* SVG (preferred) or PNG format&#x20;
* Grayscale color mode preferred (black & white)
* Dimensions: 250px wide X 145px height
* Whitespace: horizontal - 20px, vertical 20px
* Alignment: Centered

![](/files/-MN_DaRB7mKEkBin2Rvn)

{% hint style="info" %}
If you need assistance with creative/logo/iconography assets, please submit a request to the Website Development & Support team.&#x20;
{% endhint %}

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. Add text into the Alt Text (Required) and Tooltip (optional) fields.&#x20;

![](/files/-MNZfbDLlgoPfXzKWl32)

Set the Alignment to (not set) and the dimensions to 250 width / 145 height. Click Save.

![](/files/-MNZt3grFC0a5DWerj-5)

#### 6. Edit the short description

Ideally, this should not exceed 135 characters. Additional content should be saved for the sub-page if your audience would like to learn more. Double-click the placeholder text and begin typing or pasting.&#x20;

![](/files/-MN_-1Exm9I_uuU5cxAU)

#### 7. Update the Call to Action (CTA)

The CTA should be specific and concise. Click the placeholder CTA and select the insert link tool.

* **Type:** URL if the destination is a webpage or Attachment if the destination is a downloadable file (e.g. PDF)
* **URL:** Use the HTTPS protocol when possible. If sending the user to another page within services.gatech.edu, use the relative path (i.e. everything after [https://gatech.service-now.com](https://gatech.service-now.com/))
* **Text**: The CTA that your audience will see (e.g. "Order Pizza").
* **Target:** If the destination is an external website, select *New Window*, otherwise, leave it as *None*.

![](/files/-MN_0YKCSC13hlMbdQxS)

### Create an Additional Row

To create an additional row of cards, copy the code below and paste the code at the bottom of the existing code in the source.

```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">Sites@GeorgiaTech</h3>
</div>
<div class="panel-body catalogItemBody"><img class="catalogItemImage" src="sitesatGT_logo_bw.png" alt="sites at Georgia Tech  logo" width="250" /><p>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.edu">Learn More</a></div>
</div>
</div>
<!--END OF PRODUCT ITEM--> <!--START OF PRODUCT ITEM-->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title catalogItemTitle">Plesk Web Hosting</h3>
</div>
<div class="panel-body catalogItemBody"><img class="catalogItemImage" src="plesk_logo_bw.svg" alt="plesk logo" /><p>You know what? It is beets. I've crashed into a beet truck. Yes, Yes, without the oops! It is beets. I've crashed into a beet truck.</p></div>
<div class="panel-footer catalogItemCTA"><a href="https://gatech.edu">Learn More</a></div>
</div>
</div>
<!--END OF PRODUCT ITEM--> <!--START OF PRODUCT ITEM-->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title catalogItemTitle">Dedicated Web Server</h3>
</div>
<div class="panel-body catalogItemBody"><img class="catalogItemImage" src="logo_dws_bw.svg" alt="plesk logo" /><p>You really think you can fly that thing? Yes, Yes, without the oops! Jaguar shark! So tell me - does it really exist?</p></div>
<div class="panel-footer catalogItemCTA"><a href="https://gatech.edu">Learn More</a></div>
</div>
</div>
<!--END OF PRODUCT ITEM--></div>
<!--END OF PRODUCT ROW-->
```

At the bottom of your source code, you'll find \<!--END OF PRODUCT ROW-->. In the next line, paste the code that you copied above. If you need an additional row, you'll paste the same code at the bottom again.

![](/files/-MN_b2xALiZnofcyzK2Y)