Avatar
General-purpose avatar; if a name is passed in the initials are auto-generated and the specified colors are used; if an image is used those are ignored
Call-to-Action
Specify the title, subtitle, and button text. Depending on what this button will do we can embed the click functionality either in the component or using jQuery.
Create Offers
This is horribly-named but for now I’m calling it Create Offers.
Data Point
Counts from 0 to the specified value over the duration specified; Add pre- & postfix values if needed
Expandable List
List of expandable items; below is just what it shows by default for demo purposes. Click Add Item to create a new list.
Icon Card
Icon defaults to “user-group” but can be selected; I just noticed this is missing the horizontal line at the top of the card. I’ll fix it shortly.
Image Card
Basic card panel containing an image; these are used in the Page Carousel but can be used anywhere.
Info Card
Just a card with some text and a button.
Page Carousel
Default view shown below; click Add Item to create your own. Right now uses Image Cards but we can reuse this carousel with any object.
Person Card
The horribly-named-soon-to-be-called-Flip Card; pretty self-explanatory I think.
Person Data
Just some basic info about a person that I’ve seen used in a few different places.
Resource Card
Specify a video URL or pick an image from the media library; if videoURL is specified it takes priority.
Section Heading
I still disagree that we should remove the uppercase title so I put a switch so you can demo it both ways then when they tell you to remove it you can say OK then once they aren’t looking, turn it back on.
Self-typing Text
Pretty self-explanatory
Testimonial Card
Specifiable image and card text.
Testimonial Container
Can be used in carousel mode or not; click Add Items to create list. Right now we’re using Testimonial Cards but again we can use this concept with anything.
Text Section
General-use text section; we don’t really need this but it’s more for convenience.
Toggle Switch
Specify the labels and panel ID for each option; wrap your content to show/hide in a div with id=<panelID>