今天要來建立資訊卡片，基本上我們分成下面幾個：

• Card
• CardHeader
• CardBody
• CardFooter

Card

import React from 'react';
import styled from 'styled-jss';

const StyledCard = styled('div')(({ theme, style }) => ({
    width: '100%',
    position: 'relative',
    borderRadius: theme.radius,
    marginBottom: theme.getSpacing(2),
    backgroundColor: theme.colors.white,
    border: `1px solid ${theme.colors.grey1}`,
    ...style
}))

const Card = ({ children, ...props }) => {
    return <StyledCard {...props}>{children}</StyledCard>
}

export default Card;

CardHeader

import React from 'react';
import propTypes from 'prop-types';
import styled from 'styled-jss';

const StyledCardHeader = styled('div')({
    padding: ({theme}) => `${theme.getSpacing(2)}px ${theme.getSpacing(4)}px`,
    borderBottom: ({theme}) => `1px solid ${theme.colors.grey1}`,
    '& > h1, & > p': {
        margin: 0
    }
});

const Card = ({ title, subtitle, ...props }) => {
    return (
        <StyledCardHeader {...props}>
            <h1>{title}</h1>
            <p>{subtitle}</p>
        </StyledCardHeader>
    )
}

Card.propTypes = {
    title: propTypes.string,
    subtitle: propTypes.string,
}

Card.defaultProps = {
    title: '',
    subtitle: '',
}

export default Card;

CardBody

import React from 'react';
import styled from 'styled-jss';

const StyledCardBody = styled('div')(({ theme }) => ({
    width: '100%',
    padding: `${theme.getSpacing(2)}px ${theme.getSpacing(4)}px`,
}));

const CardBody = ({ children, ...props }) => {
    return (
        <StyledCardBody {...props}>
           {children}
        </StyledCardBody>
    )
}

export default CardBody;

CardFooter

import React from 'react';
import styled from 'styled-jss';

const StyledCardFooter = styled('div')(({ theme }) => ({
    borderTop: `1px solid ${theme.colors.grey1}`,
    padding: `${theme.getSpacing(2)}px ${theme.getSpacing(4)}px`,
}));

const CardFooter = ({ children, ...props }) => {
    return (
        <StyledCardFooter {...props}>
            {children}
        </StyledCardFooter>
    )
}

export default CardFooter;

結果如下：