const header = props.header ?? <></>; const body = props.body ?? <></>; const footer = props.footer ?? <></>; const CardContainer = styled.div` display: flex; flex-direction: column; background: #fff; border: 1px solid #ECEEF0; box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); border-radius: 8px; `; const CardHeader = styled.div` display: flex; flex-direction: row; justify-content: center; align-items: center; padding: .5em 0px; gap: .675em; background: #FFF9ED; flex: none; order: 0; align-self: stretch; flex-grow: 0; `; const CardBody = styled.div` display: flex; flex-direction: column; align-items: flex-start; padding: 1.5em 1.5em 1em; gap: .9em; flex: none; order: 0; align-self: stretch; flex-grow: 0; `; const CardFooter = styled.div` display: flex; flex-direction: row; align-items: flex-start; padding: 1.5em; gap: 1em; border-top: 1px solid #ECEEF0; flex: none; order: 1; align-self: stretch; flex-grow: 0; `; return ( <CardContainer> <CardHeader> {header} </CardHeader> <CardBody> {body} </CardBody> <CardFooter> {footer} </CardFooter> </CardContainer> );