cardstacks.md

{% from "userGuide/components/advanced.md" import slot_info_trigger %}

Card Stack

The Card Stack component allows you to display a collection of information in the form of a cards layout. The cardstack component acts as the container for card components each containing the content you want to show.

A cardstack component is used in conjunction with one or more card components.

• cardstack: Wrapper used to hold cards and their content.
• card: Card contains the information to display.

Each card contains tag and keyword field:

• Keywords: Adds to the search space but does not allow users to filter them manually. Add keywords when the content have different known aliases.
• Tags: Adds to the search space and also provides readers a way to filter the cards according to the selected tags. Add tags to categorise the content.

The search feature searches the card components of cardstack by header, body text, tags, and keywords specified within each card component.

Specifying them can help improve searchability of the cardstack component!

For example, if a card is about "Machine Learning," you might tag it as AI and Data Science and add keywords like ML and Artificial Intelligence to improve searchability.

html Success is not final, failure is not fatal: it is the courage to continue that counts In the middle of every difficulty lies opportunity Do what you can, with what you have, where you are Your time is limited, so don’t waste it living someone else’s life Success is not final, failure is not fatal: it is the courage to continue that counts In the middle of every difficulty lies opportunity Do what you can, with what you have, where you are Your time is limited, so don’t waste it living someone else’s life

As shown in the above example,

• a card can be given a header attribute (optional).
• tags can be added to cards using the tag attribute, which can then be used to filter cards.
• the searchable attribute can be used to make the Card Stack searchable based on card content, tags, and headers.

In the example given below, a Card Stack is used to show a list of questions and answers, by including question components inside card components.

html Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html) 96 19 40 811 Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs. It is ok to combine valid values for different inputs. No more than one invalid test input should be in a given test case. All invalid test inputs must be tested together.

If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled correctly by the SUT. This is because most SUTs return an error message upon encountering the first invalid input.

How do you figure out which inputs are wrong? (or correct)

The example above also illustrates how to use the keywords attribute to specify additional search terms for a card.

Custom Tag Order and Colors

You can customize the order and colors of tags by using a <tags> element inside the cardstack:

html Success is not final, failure is not fatal: it is the courage to continue that counts In the middle of every difficulty lies opportunity Do what you can, with what you have, where you are Your time is limited, so don't waste it living someone else's life

You can also use Bootstrap color names instead of hex colors:

html Success is not final, failure is not fatal: it is the courage to continue that counts In the middle of every difficulty lies opportunity Do what you can, with what you have, where you are

The <tags> element allows you to:

• Specify the order in which tags appear in the filter badges
• Assign custom colors to each tag using either:
  • Hex format (e.g., #28a745)
  • Bootstrap color names (e.g., success, danger, primary, warning, info, secondary, light, dark)
• Any tags used in cards but not defined in <tags> will appear after the defined tags with default colors

Disabling Tag Counts

By default, tag badges display a count showing how many cards have that tag. You can disable this count display using the disable-tag-count attribute:

html Success is not final, failure is not fatal: it is the courage to continue that counts In the middle of every difficulty lies opportunity Do what you can, with what you have, where you are Your time is limited, so don't waste it living someone else's life

With disable-tag-count enabled, tag badges will only show the tag name and selection indicator, without the numerical count.

Options

cardstack:

Name	Type	Default	Description
blocks	String	2	Number of card columns per row. Supports: 1, 2, 3, 4, 6
searchable	Boolean	false	Whether the card stack is searchable.
show-select-all	Boolean	true	Whether the select all tag button appears. (false by default if total tags ≤ 3)
disable-tag-count	Boolean	false	Whether to hide the tag count badges. By default, counts are shown.

tags (optional): A container element inside cardstack to define tag ordering and colors.

tag (inside tags element):

Name	Type	Default	Description
name	String	(required)	The name of the tag (must match tags used in cards).
color	String	(auto)	Custom color for the tag. Supports hex format (e.g., #28a745) or Bootstrap color names (e.g., success, danger, primary). If not specified, uses default Bootstrap color scheme.

card:

Name	Type	Default	Description
tag	String	null	Tags of each card component. Each unique tag should be separated by a ,. Tags are added to the search field.
header	String	null	Header of each card component. Supports the use of inline markdown elements.
keywords	String	null	Keywords of each card component. Each unique keyword should be separated by a ,. Keywords are added to the search field.
disabled	Boolean	false	Disable card. This removes visibility of the card and makes it unsearchable.

<cardstack searchable blocks="2">
    <card header="**Basic Card** :rocket:" tag="Basic Card" keywords="Basic">
        This is a basic card.<br>
        Click on this <trigger for="modal:triggerBait" trigger="click">trigger!</trigger>.
        <modal header="**You clicked on a Trigger!** :rocket:" id="modal:triggerBait">
          <md>You have just triggered a modal controlled by a trigger called trigger! :rofl:</md>
        </modal>
    </card>
    <card header="A *markdown* header" tag="Markdown, header, Cool" keywords="">
        You can apply markdown to headers and body elements!
        <box type="warning">
        <md>>**Like** *this* [cool](#cardstacks) `text` :cool:</md>
        </box>
    </card>
    <card header="Card with Image" keywords="Super duper cool" tag="Image, Cool">
      <annotate src="../../images/annotateSampleImage.png" height="500" alt="Sample Image">
        <a-point x="2%" y="13%" content="I am annotated" header="Annotated point"  opacity="0.2" size="20"/>
      </annotate>
    </card>
    <card header="Disabled card" tag="Disabled" keywords="Disabled" disabled>
      This card is disabled and will not show
    </card>
    <card header="An **interesting** question" tag="Question, Markdown" keywords="">
      <question type="checkbox" header="Which of the following is correct?" hint="Think out of the box! :fas-box:">
        <pic src="{{baseUrl}}/images/math-question.jpg" alt="math question image" height="200" class="d-block mx-auto">
        <small><md>Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)</md>
        </small>
        </pic>
        <q-option correct reason="Multiply the numbers on the left together and add the leftmost number!">
          96
        </q-option>
        <q-option reason="Under normal circumstances, this would be correct.">
          19
        </q-option>
        <q-option correct reason="Simply add the running sum of the results as well!">
          40
        </q-option>
        <q-option>
          811
        </q-option>
      </question>
    </card>
</cardstack>

This is a basic card.
Click on this trigger!. You have just triggered a modal controlled by a trigger called trigger! 🤣 You can apply markdown to headers and body elements! >**Like** *this* [cool](#cardstacks) `text` 🆒 This card is disabled and will not show Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html) 96 19 40 811