- Choose a content area where you'd like to use Card View.
- Create an item in that content area. Give it the name "Card Script". Using this name will allow the script to hide that item.
- Use the HTML mode editor to set the item's content to the following code snippet.
<script src="https://cdn.jsdelivr.net/gh/mmcr/BlackboardCardView/bbcardview.js" type="text/javascript"></script>To change how cards are displayed, put the following options into the description field of the content item in question. Each option should be placed on its own line, ideally wrapped in a <p> tag by the Blackboard WYSIWYG editor. These "configuration" lines will be invisible when Blackboard edit mode is turned off.
Card Wrapper Class: [ inset | striped ]
Provides styling for the block element that contains the content item cards. While this needs to be placed in the description of a particular content item, it applies to all cards.
Card Label: textual content for label
The text provided here will be placed in small gray text above the actual name of the content item.
Card Image: URL for the image
The image at this URL will appear at the top of the content item card, above the content item's name and label.
Card Attic: [ YES ]
The attic is a header that appears at the very top of the card. Optionally, it can be drawn overtop the card itself. While other options control how the attic looks as well as its content, this option needs to be specified to enable the attic.
Card Attic Text: text to appear in the attic
This places the specified text in the card's attic.
Card Attic Icon: Font Awesome class names for the desired icon
Card View enabled the Font Awesome icon library. To include an icon in the attic, provide its Font Awesome class names. E.g.
fal fa-folder-open. Note that any icons included will have a 1/2 rem right margin to space it from attic text.
Card Attic Class: [ overlay-dark ]
The options specified here controls how the card's attic is displayed. The "overlay-dark" option places the attic on top of the card image, with a translucent black background. Text color is automatically set to white.
Card Attic Style: valid CSS style code
Anything specified here is applied directly to the attic element, allowing control of its display through raw CSS.