When working with React-Toolbox, I encountered an issue with aligning Card elements horizontally. I attempted using display: inline-block, which successfully separated them into three distinct cards as desired. However, they did not align next to one another.
import { Card, CardText } from "react-toolbox/lib/card";
const ThemedCard = ({
className,
bodyTitle,
bodyText = "",
pageColor,
actions = {}
}) => {
return (
<div>
<TextBlock
style={{
padding: "1rem 0 3rem",
fontSize: "3.5rem"
}}
component={Text}
>
{bodyText}
</TextBlock>
<h2>{bodyText}</h2>
<Card
{...{ className }}
style={{ width: "350px", display: "inline-block" }}
>
<CardText>
{bodyTitle ? <Title>{bodyTitle}</Title> : null}
{objectToArray(actions).map(action => {
return (
<div>
<ButtonLink {...action} to={urlResolver(action.to)} />
<br />
<br />
</div>
);
})}
</CardText>
</Card>
<Card
{...{ className }}
style={{ width: "350px", display: "inline-block" }}
>
<CardText>
{bodyTitle ? <Title>{bodyTitle}</Title> : null}
{objectToArray(actions).map(action => {
return (
<div>
<ButtonLink {...action} to={urlResolver(action.to)} />
<br />
<br />
</div>
);
})}
</CardText>
</Card>
<Card
{...{ className }}
style={{ width: "350px", display: "inline-block" }}
>
<CardText>
{bodyTitle ? <Title>{bodyTitle}</Title> : null}
{objectToArray(actions).map(action => {
return (
<div>
<ButtonLink {...action} to={urlResolver(action.to)} />
<br />
<br />
</div>
);
})}
</CardText>
</Card>
</div>
);
};