ActivityCard ============ A card designed for use in the activity panel. This is a very structured component, which expects at minimum a label and content. It can optionally also include a date, actions, an image, and a dropdown menu. ## How to use: ```jsx import { ActivityCard } from 'components/activity-card'; render: function() { return ( } date="2018-07-10T00:00:00Z" actions={ [ Action link, Action link 2 ] } > Insight content goes in this area here. It will probably be a couple of lines long and may include an accompanying image. We might consider color-coding the icon for quicker scanning. ); } ``` ## Props * `title`: A title for this card (required). * `subtitle`: An element rendered right under the title. * `children`: Content used in the body of the action card (required). * `actions`: A list of links or buttons shown in the footer of the card. * `date`: The timestamp associated with this activity. * `icon`: An icon or avatar used to identify this activity. Defaults to Gridicon "notice-outline". * `unread`: If this prop is present, the card has a small red bubble indicating an "unread" item. Defaults to false. ActivityCardPlaceholder ======================= This component is similar to `ActivityCard` in output, but renders no real content, just loading placeholders. This is also hidden from any interaction with screen readers using `aria-hidden`. ## How to use: ```jsx import { ActivityCardPlaceholder } from 'components/activity-card'; render: function() { return ( ); } ``` ## Props * `hasAction`: Boolean. If true, shows a placeholder block for an action. Default false. * `hasDate`: Boolean. If true, shows a placeholder block for the date. Default false. * `hasSubtitle`: Boolean. If true, shows a placeholder block for the subtitle. Default false. * `lines`: Number. How many lines of placeholder content we should show. Default 1.