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.

Use case:

3 Card Layout with three cards in the row

Code Snippet

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

Previous3 Card LayoutNextCategory Desc 3 Card

Last updated

Was this helpful?