function Card(props) {
    const { id, className, style, actions, children, footer, title, icon, isLoading } = props;
    const hasHeader = icon || title || actions;
    const showFooter = !!(footer && !isLoading);

    return (
        <StyledContainer id={id} className={className} style={style} hasHeader={hasHeader}>
            <Header actions={actions} title={title} icon={icon} />

            <CardBoddy isLoading={isLoading}>{children}</CardBoddy>

            <RenderIf isTrue={showFooter}>
                <StyledFooter>{footer}</StyledFooter>
            </RenderIf>
        </StyledContainer>
    );
}
Cards are used to apply a container around a
related grouping of information.
@category Layout