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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kmdesign.services.gatech.edu/patterns/3-card-layout/catalog-page-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.