# Category Desc 3 Card

### Use Case

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MKa5VOAwkL7YMa4i79G%2F-MKa6Knv_nvEk7c4ScC1%2FScreen%20Shot%202020-10-26%20at%202.13.01%20PM.png?alt=media\&token=54dadc93-28f8-48d8-b93c-75b9a7c2621e)

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

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MKa6pGhyoul8-GG0s_5%2F-MKa9MWX2aD3AaCZAmNj%2Farticle-catalog-code-paste_102620a.gif?alt=media\&token=4013e555-efb6-4676-a9cb-e705c43f9caa)

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

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MNZP8Rytywre1yMOrnG%2F-MNZRo2xomeiVlrvmxvA%2Fchrome-capture.gif?alt=media\&token=97d8cf11-9744-4e61-910d-311e3306159e)

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

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MNZP8Rytywre1yMOrnG%2F-MNZonOfUhp3pSjwZ1sG%2Fchrome-capture%20\(3\).gif?alt=media\&token=351c171a-089b-4e35-ba64-2434274c4ac5)

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

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MN_DOHVMDJ2YsNgvMis%2F-MN_DaRB7mKEkBin2Rvn%2FScreen%20Shot%202020-12-02%20at%203.52.15%20PM.png?alt=media\&token=1261ebab-7451-46a1-8310-f5f4f757c137)

{% 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;

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MNZP8Rytywre1yMOrnG%2F-MNZfbDLlgoPfXzKWl32%2Fchrome-capture%20\(2\).gif?alt=media\&token=a576ecab-7147-455f-bce9-b607f10fec21)

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

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MNZP8Rytywre1yMOrnG%2F-MNZt3grFC0a5DWerj-5%2Fchrome-capture%20\(4\).gif?alt=media\&token=67c81316-d509-4588-90e3-cd39c6e0380c)

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

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MNZP8Rytywre1yMOrnG%2F-MN_-1Exm9I_uuU5cxAU%2Fchrome-capture%20\(7\).gif?alt=media\&token=cdd9077c-adce-477e-aeb5-00aa8eea0e83)

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

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MNZP8Rytywre1yMOrnG%2F-MN_0YKCSC13hlMbdQxS%2Fchrome-capture%20\(8\).gif?alt=media\&token=58960170-7623-4296-adfe-f22f93933de6)

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

![](https://3834524275-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8L7pd9MFiA8_rutARh%2F-MN_DOHVMDJ2YsNgvMis%2F-MN_b2xALiZnofcyzK2Y%2Fchrome-capture%20\(9\).gif?alt=media\&token=c987921c-803e-4ada-a0b6-3ea74f293cbf)