Article 3 Card

Do you need a row of product cards in your knowledge article?

Use Case

Sample article incorporating a 3 Card Layout

How To Get This Layout

1. Copy the appropriate code snippet below, depending on how many cards you would like in a single row.

3 Cards in a row

Use case:

3 Card Layout with three cards in the row

Code Snippet

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

2 Cards in a row

Use case:

3 Card Layout with two cards in the row.

Code Snippet

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

1 Card in a row

Use case:

3 Card Layout with only one card in the row

Code Snippet

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

2. Paste the code snippet into your article's HTML source code, just beneath your existing code.

3. Edit your 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 card title.

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.

Your icon should not exceed the 150x92 white footprint

• 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

243KB

3 Card Icon Template 200x112 - 16-9 aspect.ai

Download the Icon Template - .AI File

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

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.

Set the image configurations to those below and select "Save".

• Add a description into the Alt Text (Required) and Tooltip (optional) fields.
• Alignment: Baseline (default)

• Border Thickness: (blank)

• Spacing: Horizontal (blank), Vertical (blank)

• Size: Width (200), Height (112)

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.

7. Edit your call-to-action (CTA)

Your CTA should be short and specific. Follow the links best practices. If you don't have a CTA, you can delete the placeholder.

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.

10. Save your changes.