@workday/canvas-kit-docs/dist/es6/mdx/style-props/examples/Layout.js

Documentation components of Canvas Kit components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Flex } from '@workday/canvas-kit-react/layout';
const baseStyles = {
    color: 'blackPepper500',
    margin: 'xxs',
    padding: 'xs',
    justifyContent: 'center',
    alignItems: 'flex-start',
};
export const Layout = () => (_jsxs(Flex, { alignItems: "flex-end", children: [_jsx(Flex, { backgroundColor: "cinnamon300", display: "inline-flex", height: "xl", width: "xxxl", ...baseStyles, children: "40 x 80" }), _jsx(Flex, { backgroundColor: "sourLemon300", display: "inline-flex", height: "xxl", width: "xxxl", ...baseStyles, children: "64 x 80" }), _jsx(Flex, { backgroundColor: "blueberry300", display: "inline-flex", height: "xxxl", width: "xxxl", ...baseStyles, children: "80 x 80" })] }));