.png)
Overview:
The {deck} and {card} macros are both part of the Composition Plugin by Customware. When used together they create a tabbed panel which is ideal for separating out blocks of related content.
The {card} macro defines the content of each card within a deck and provides card specific settings such as:
- The text (or other wiki content, such as images) to display on the tab associated with the content
- The keyboard shortcut (access key) used to display the card
This tutorial is primarily concerned with the {card} macro, there is a related tutorial on the deck macro which may also be of use.
Parameters:
The {card} macro parameters define the label that is displayed on the tab within a deck of cards, as well as the CSS class to be used when rendering the card whether the should be the default one displayed or not.
{deck:id=myDeck}
{card:label=card1}
Content
{card}
{card:label=card2|default=true}
Content
{card}
{deck}
Parameters:
| Parameter | Required | Default | Notes |
|---|---|---|---|
| label |  |
The label displayed in the tab for this card. | |
| default |  |
Whether the card should be the default one displayed or not | |
| accessKey | |
The keyboard shortcut for the tab. Usually 1-9. |
Examples
Hints and Tips
Only use these macros where they are really needed as they can sometimes make a web page look a little cluttered.
When using these macros, remember that printouts will only include whichever card (ie. tab) is selected within each deck on a page.
Try not to nest decks of cards within each other (as seen in our examples). While it can be tempting to have a deck of sections with each section containing a deck of topics and each topic containing a deck of sub-topics, it can be very confusing for the end user if they are presented with such a structure - it's easy to loose track of where you are in relation to the other content. Instead, you should consider using the cloak macro for the inner content.
Frequently Asked Questions
| Q | I've set a default tab, but it's not shown by default? | |
|---|---|---|
| A | The default tab will only be shown when you first visit a page. When you select any tab, it's "remembered" (using cookies) for subsequent visits. By default, the cookie that remembers which tabs were selected will expire after 7 days - for more information, please see the composition-setup macro. | adaptavist |
Comments (16)
May 24, 2007
netoCiety says:
any idea how this works out in combination with the anchor macro? For example I ...any idea how this works out in combination with the anchor macro? For example I want to link into the 3rd tab of the cards from another page? Thanks
Jun 25, 2008
Becket Hackett says:
Was this answered of line? We would also like to be able to anchor to different...Was this answered of line? We would also like to be able to anchor to different cards?
Aug 01, 2008
Thom W Gray says:
Ditto to the same question. I would like to be able to create a link from a sour...Ditto to the same question. I would like to be able to create a link from a source page that takes the user to a specific tab on the destination page. Is that possible? If so, how is this done?
Thanks in advance ...
Aug 07, 2008
Bruno Blaise says:
Hello, I'm interested as well by the same feature. I have a page with 3 tabs. ...Hello,
I'm interested as well by the same feature.
I have a page with 3 tabs. In another page, I want show a link tothe second tab of my first page.
How can I do it? The tabs are not named.
Thanks,
Bruno
Aug 25, 2008
Jeff Wilbert says:
I'm in the same boat, and would like to know how, if it is even possible. If not...I'm in the same boat, and would like to know how, if it is even possible. If not, wow it would be a GREAT addition!
Jul 31, 2008
George So says:
When I try to use the deck and card concept in a nested fashion (similar to what...When I try to use the deck and card concept in a nested fashion (similar to what is done in the example). The lower level tabs disappear when I move my mouse over the top level tabs. The only difference between my application and the example is that I put the lower layer tabs in a panel within a column. Any idea how to workaround this issue.
Aug 25, 2008
Jeff Wilbert says:
You can nest decks in the below fashion. I discovered it by accident, however ha...You can nest decks in the below fashion. I discovered it by accident, however have used it MANY times and have never experienced any issues. The trick is when closing the card or deck, you need to specify which. For example to close a card named tab15, you need to give the command card:tab15, surrounded by squiggly brackets of course. See below for a larger example. Hope this helps!
{deck:id=mydeck} {card:label=tab1} tab1 content goes here {card:tab1} {card:label=tab2} tab2 content goes here {deck:id=nesteddeck} {card:label=tab2sub1} tab2 subtab 1 content goes here {card:tab2sub1} {card:label=tab2sub2} tab2 subtab 2 content goes here {card:tab2sub2} {deck:nesteddeck} {card:tab2} {card:label=tab3} tab3 content goes here {card:tab3} {deck:mydeck}Nov 17, 2009
Peter Milakovich says:
That works great. Thanks! Has anyone figured out how to make the nested deck e...That works great. Thanks!
Has anyone figured out how to make the nested deck extend to the right border of the parent deck? I always end up with a white buffer zone between the right side of my nested deck, and the parent deck. I've tried changing the deck width in the comp setup macro, but no luck.
Dec 29, 2009
Matt Doar says:
Interestingly the card macro appears to produce invisible tabs in Chrome on a Ma...Interestingly the card macro appears to produce invisible tabs in Chrome on a Mac, e.g. http://confluence.atlassian.com/display/DEVNET/Plugin+Wishlist
Mar 02, 2010
Robyn Lawrence says:
We have recently installed Adaptavist Theme Builder (4.0.1) to go with our Atlas...We have recently installed Adaptavist Theme Builder (4.0.1) to go with our Atlassian Confluence 3.1.1 installation. It did not come with the Layout Macros like the card, deck, cloak, float macros.
Are these macros redundant now? Also on your Availablity tab it says:
This macro is usually pre-installed with Builder accounts. If you wish to install it on your own Confluence install, please download it from the RandomBits Website.
The RandomBits web-site is no longer operating. Could you tell me about these macros for our installation.
Is this something you just do know with custom css, so there is not a fancy macro that does this tabbing and div (float:right) type of work.
Thanks,
Robyn
Jan 17, 2011
Akilan Ramesan says:
Hi, we are using Confluence Wiki version 2.9 does card-deck macro work in the P...Hi, we are using Confluence Wiki version 2.9
does card-deck macro work in the Page template?
We have the following requirement in the Page template?
1. Create a form using the variable list
2. Prepare a form using the variable list inside the card-deck combination
While trying to create a page from the template, the form appears in the template
whereas the card-deck macro does not appear in the template version.
If I select Insert Variables, the second step goes to page edit mode and all variables within the card-deck macro disappear
The requirement is to create a form with variables inside the card-deck macro as well.
Is this a bug, limitation ?
Thanks in advance.
The portion of the code is given below
{composition-setup:defaults} {composition-setup} {deck:id=deck_1} {card:label=People} ||Account Manager| @Acc_Mngr|textarea(10x10)@ | ||Sales| @Sales|textarea(10x10)@ | ||Client| @Client|textarea(10x10)@ | ||Engineering Manager| @Engg_Mngr|textarea(10x10)@ | ||Consultant| @Consultant|textarea(10x10)@ | ||Project Manager| @Proj_Mngr|textarea(10x10)@ | ||Lead Manager| @Lead_Mngr|textarea(10x10)@ | ||Integration Manager| @Integ_Mngr|textarea(10x10)@ | ||Application Manager| @App_Mngr|textarea(10x10)@ | ||Modelling Manager| @Modlg_Mngr|textarea(10x10)@ | ||Others| @Others|textarea(10x10)@ | {card} {card:label=Address Book} || Role || Name || Company || Title || Email || Telephone || Mobile/Cell || Location || Address || ||Account Manager| @Acc_Mngr|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | ||Sales| @Sales|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | ||Client| @Client|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | ||Engineering Manager| @Engg_Mngr|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | ||Consultant| @Consultant|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | ||Project Manager| @Proj_Mngr|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | ||Lead Manager| @Lead_Mngr|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | ||Integration Manager| @Integ_Mngr|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | ||Application Manager| @App_Mngr|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | ||Modelling Manager| @Modlg_Mngr|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | ||Others| @Others|textarea(10x10)@ | <Company> | <Title> | <Use format [mailto:e.mail@domain.com]> | <Telephone> | <Mobile> | <Location> | <Address> | {card} {deck}Oct 19, 2010
James Pun says:
I am using the card and deck macro and the tab looks wonderful. Being a novice u...I am using the card and deck macro and the tab looks wonderful. Being a novice user I was wondering how I can get the expected outcome with the below-mentioned code I have to-date. I have no intention of having the contents withing the code. I am intending to have the home page of a particular space displayed. In other words, if user is to click the tab called "My Company", it takes the user to a Confluence Space Home Page. Subsequently, when user clicks on James Blog tab, it takes me to a another page within Confluence.
{composition-setup}{composition-setup} {deck:id=myDeck} {card:label=My Company} {card} {card:label=James Blog} {card} {deck}Any comments and assistance here is much appreciated.
Thanking you in advance.
Dec 16, 2010
Klaus Feldmann says:
you would not use card macro to do so, you would do it with any kind of linking ...you would not use card macro to do so, you would do it with any kind of linking unless you want the pages to appear within the body of a card and if that is the thing you are looking for, you might want to try out I-frame within this site.
Jan 14, 2011
Frank says:
Situation: Every page has two cards(two languages). Problem: Is there a way to s...Situation: Every page has two cards(two languages).
Problem: Is there a way to set at the start the default language so the user can navigate through the pages staying on the same card (same language)?
Jan 18, 2011
Rian Murphy says:
How about: vertical tabs? I want to create a tab for each of the 12 or so depart...How about: vertical tabs?
I want to create a tab for each of the 12 or so departments in our company directory. If I create a card for each department, the tabs string off the page on the right. If I could put the tabs in a column on the left, however, it'd work fine. Could this be done with alternate CSS, or something like that?
Thanks in advance, R.M.
Jan 18, 2011
Samael Bate says:
I like the idea. This macro is part of the Composition Plugin by CustomWare so ...I like the idea. This macro is part of the Composition Plugin by CustomWare so any feature requests should be made to them.
Of course, we could do some custom work for you based on your requirements. If this is something that interests you please use the contact us page.