Sha256: 0e5b5c66102aeda3f873a726035ed8a2edbdb1dc4043b7f5f971f0907aaeb6ac

Contents?: true

Size: 718 Bytes

Versions: 1007

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

1,007 entries across 1,007 versions & 2 rubygems

Version Path
playbook_ui-14.2.0.pre.alpha.PLAY15063619 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.2.0.pre.alpha.PLAY15063618 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.2.0.pre.alpha.PLAY15063618 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.3.0.pre.rc.0 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.3.0.pre.rc.0 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.1.0.pre.alpha.PLAY15063617 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.1.0.pre.alpha.PLAY15063617 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.1.0.pre.alpha.PLAY15063616 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.1.0.pre.alpha.PLAY15063616 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.1.0.pre.alpha.PLAY15063615 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.1.0.pre.alpha.PLAY15063615 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.1.0.pre.alpha.PLAY15063614 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.1.0.pre.alpha.PLAY15063614 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.1.0.pre.alpha.PLAY15063613 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.1.0.pre.alpha.PLAY15063613 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.1.0.pre.alpha.PLAY15063612 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.1.0.pre.alpha.PLAY15063612 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.1.0.pre.alpha.PLAY15063610 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui-14.1.0.pre.alpha.PLAY15063610 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
playbook_ui_docs-14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608 app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx