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
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
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.
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.
Last updated