Sha256: 0e5b5c66102aeda3f873a726035ed8a2edbdb1dc4043b7f5f971f0907aaeb6ac

Contents?: true

Size: 718 Bytes

Versions: 948

Compression:

Stored size: 718 Bytes

Contents

import React from 'react'
import {
    Overlay,
    Card,
    Flex,
    FlexItem,
} from 'playbook-ui'

const InlineCardsExample = () => {
    return (
        <Flex
            columnGap="lg"
            orientation="row"
            overflowX="auto"
        >
            {Array.from({ length: 15 }, (_, index) => (
                <FlexItem key={index}>
                    <Card>{"Card Content"}</Card>
                </FlexItem>
            ))}
        </Flex>
    )
}

const OverlayMultiDirectional = () => (
    <>
        <Overlay
            color="card_light"
            layout={{"x": "xl"}}
        >
            <InlineCardsExample />
        </Overlay>
    </>
)

export default OverlayMultiDirectional

Version data entries

948 entries across 948 versions & 2 rubygems

Version Path
playbook_ui-14.11.0.pre.rc.17 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.11.0 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.11.0.pre.rc.16 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.11.0.pre.rc.16 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.10.0.pre.alpha.play16825301 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.10.0.pre.alpha.play16825301 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.11.0.pre.rc.15 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.11.0.pre.rc.15 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.11.0.pre.rc.14 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.11.0.pre.rc.14 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.11.0.pre.rc.13 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.11.0.pre.rc.13 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.11.0.pre.rc.12 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.11.0.pre.rc.12 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5274 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5274 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.10.0.pre.alpha.play1465attempt25272 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.10.0.pre.alpha.play1465attempt25272 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.10.0.pre.alpha.play16825244 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.10.0.pre.alpha.play16825244 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx