It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Creating content similar to Atlassian Support

Hi - I've started using Scroll Viewport app for my confluence, similar to Atlassian.

Does anyone know how to go about creating the cards on their homepage? Is it a plugin, shortcode? etc?


Talking about the 6 main boxes on this page:

2 answers

1 accepted

0 votes
Answer accepted

@Brendan Freestone


You could use the Help Center theme, which creates cards like this automatically. You can see them in action on our help site.

These cards are created for each space in your help center. If you'd like a tile that takes users somewhere other than a space in the help center, you could add a space with the information to generate the card and then add a redirect macro on the home page of the space to wherever you'd like users to be sent.

Hi Matt - that's perfect - but what content do you have on that homepage do generate  those cards?

My heirachy as two items at the top - and the page just displays an accordion rather than cards.

Like Matt Reiner _K15t_ likes this

Actually I found it - when editing the theme, in theme properties settings

- spaceHomePage.topicType=tiles



Thank you for your help!

Like Matt Reiner _K15t_ likes this
0 votes
Ajay Solutions Partner Mar 26, 2020

@Brendan Freestone ,

We too use Scroll View Port for our Help Documentation

You would need to customize the velocity template based on your styling . Attached is a reference code of our Home page which uses cards.


##========== Search section ================================
<header id="home_header" class="v26-home-header-search">
##========== Rest ===============================================
<div id="ht-wrap-container" class="sp-grid-float" style="background: #FAFBFC;">
##======== Tiles for each child pages with links ==============
<article class="ht-content">
<div id="main-content" class="wiki-content">
<div class="sp-grid-section">
<div class="sp-grid-cell sp-grid-100">
#set( $vp = "v26Pages")
#set( $map = {
"${vp}_default" :'default',
"${vp}_faqs" :'faq',
"${vp}_get_support" :'get-support',
"${vp}_getting_started" :'getting-started',
"${vp}_rest_api" :'rest-api',
"${vp}_setup_and_administer" :'setup-administer',
"${vp}_visualize_and_analyze" :'analyse-visualize',
"${vp}_publish_reports" :'viewing-insights-publish-reports'
} )
<div class="v26-row landing-page-tiles">
#foreach($item in $page.children)
<div id="second"class="v26-panel" style="width:400px">
<div style="padding: 15px 0;">

## --------- Set card image name ---------
#set( $indexName = $item.title.toLowerCase().replace(" ", "_"))
#set ($varName = "${vp}_${indexName}")

#set ($imageName = '')
#set ($str = '')
#set ($str = $map.get(${varName}))

#if((!!$str) && $str.length() >1)
#set ($imageName = $map.get(${varName}))
#set( $imageName = 'default')
## ------------------------------------
<img src="${theme.baseUrl}/assets/img/${imageName}.svg/" alt="..." class="img-fluid img-responsive">

<section class="panelContent" style="padding-left:25px;">
<h1><a href="$item.absoluteLink">$item.title</a></h1>
<ul style="list-style-type: none;padding: 0;">
#foreach($sub in $item.children)
## --- limit to 2 sub pages in case of FAQs ------------
#if(($item.title.toLowerCase() != 'faqs') || ( $item.title.toLowerCase() == 'faqs' && $velocityCount < 3))
<li><a href="$sub.absoluteLink">$sub.title </a></li>
<p style="text-align: center;"><br></p>
## end card

## ==== $page.content (Add later if required) =============

##======== Footer =============================================

Thank you for the response. 

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted in Confluence

Lessons and Learnings: Six Months of Working Remote [Discussion]

Hey there, folks! For most of us, the past six months- yes, you read that right- have been a journey. More people than ever before have pivoted to working remotely, and navigating being on-scre...

4,120 views 4 6
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you