Creating content similar to Atlassian Support
Asked by Brendan Freestone:

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:

<https://support.atlassian.com/jira-software-cloud/>


Answers:
author: Matt Reiner [K15t]
body: [@Brendan Freestone](/t5/user/viewprofilepage/user-id/1144573)

You could use the [Help Center theme](https://help.k15t.com/scroll-viewport/latest/server/the-help-center-theme-168363702.html), which creates cards like this automatically. You can see them in action on [our help site](https://help.k15t.com/).

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 macr](https://help.k15t.com/scroll-viewport/latest/server/use-the-redirect-macros-130122597.html)o on the home page of the space to wherever you'd like users to be sent.

comments: author: Brendan Freestone
body: 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.


author: Brendan Freestone
body: Actually I found it - when editing the theme, in theme properties settings

- spaceHomePage.topicType=tiles

Thank you for your help!


author: Ajay _view26_
body: [@Brendan Freestone](/t5/user/viewprofilepage/user-id/1144573) ,

We too use Scroll View Port for our [Help Documentation](https://help.view26.com/).

You would need to [customize](https://help.k15t.com/scroll-viewport/latest/server/get-started-with-theme-development-168363534.html) 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"\>  
\<section\>  
\<h1\>$repository.name\</h1\>  
$include.template("/partials/search_snippet.vm")  
\</section\>  
\</header\>  
##  
##========== 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'  
} )  
##========  
##  
## RECTANGLE CARDS  
##  
\<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}))  
#else  
#set( $imageName = 'default')  
#end  
## ------------------------------------  
\<img src="${theme.baseUrl}/assets/img/${imageName}.svg/" alt="..." class="img-fluid img-responsive"\>  
\</div\>  

\<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\>  
#end  
#end  
\</ul\>  
\<p style="text-align: center;"\>\<br\>\</p\>  
\</section\>  
\</div\>  
#end  
\</div\>  
## end card  
\</div\>  

<br />

<br />

\</div\>  
## ==== $page.content (Add later if required) =============  
\</div\>  
\</article\>

##  
##======== Footer =============================================  
##  
$include.template("/include/include-footer.vm")  
\</div\>

comments: author: Brendan Freestone
body: Thank you for the response.