Category Desc 3 Card

Are you using an article as your category description? Do you have multiple items or products that you'd like to separate into individual cards? The 3 Card Layout may be the solution for you.

Use Case

How To Get This Layout

1. Copy the code snippet below

<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

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.

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.

5. Edit the card icon

Create your icon per the specifications below.

• SVG (preferred) or PNG format

• Grayscale color mode preferred (black & white)

• Dimensions: 250px wide X 145px height

• Whitespace: horizontal - 20px, vertical 20px

• Alignment: Centered

If you need assistance with creative/logo/iconography assets, please submit a request to the Website Development & Support team.

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.

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

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.

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)
• 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.

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.

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