Card example

import React from 'react';

function useClassNames(...names: Array<string | undefined>) {
    return names.filter(Boolean).join(' ');
}

interface IClassNameProps {
    className?: string;
}

interface ILinkProps extends IClassNameProps {
    href: string;
}

const Link: React.FC<ILinkProps> = props => {
    const className = useClassNames('Link', props.className);
    return <a href={props.href} className={className}>{props.children}</a>;
};

interface ICardProps extends IClassNameProps {
    header: JSX.Element
}

const Card: React.FC<ICardProps> = props => {
    const className = useClassNames('Card', props.className);

    return (
        <div className={className}>
            <Link href="#" className="Card-HeaderLink">
                <h1>{props.header}</h1>
            </Link>
            {props.children}
        </div>
    );
};

interface ICardListProps extends IClassNameProps {
    items: Array<{ header: string, text: string }>
}

const CardList: React.FC<ICardListProps> = props => {
    const className = useClassNames('CardList', props.className);

    return (
        <div className={className}>
            {props.items.map(item => (
                <Card key={item.header} className="CardList-Item" header={item.header}>{item.text}</Card>
            ))}
        </div>
    );
};