Article 3 Card

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

Use Case

How To Get This Layout

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

Use case:

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>

Use case:

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>

Use case:

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.

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

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.