diff --git a/components/src/components/atoms/Card/Card.tsx b/components/src/components/atoms/Card/Card.tsx index 3d018f2e..85b8e736 100644 --- a/components/src/components/atoms/Card/Card.tsx +++ b/components/src/components/atoms/Card/Card.tsx @@ -26,6 +26,20 @@ const Container = styled.div<{ $variant: Props['variant'] }>( `, ) +const Divider = styled.div<{ $variant: Props['variant'] }>( + ({ theme, $variant }) => css` + width: calc(100% + 2 * ${theme.space['4']}); + height: 1px; + background: ${theme.colors.border}; + margin: 0 -${theme.space['4']}; + ${$variant === 'desktop' && + css` + margin: 0 -${theme.space['6']}; + width: calc(100% + 2 * ${theme.space['6']}); + `} + `, +) + type NativeDivProps = React.HTMLAttributes export const Card = ({ title, variant, children, ...props }: Props) => { @@ -38,3 +52,4 @@ export const Card = ({ title, variant, children, ...props }: Props) => { } Card.displayName = 'Card' +Card.Divider = Divider diff --git a/docs/src/reference/mdx/atoms/Card.docs.mdx b/docs/src/reference/mdx/atoms/Card.docs.mdx index 550ff93a..5ff64b93 100644 --- a/docs/src/reference/mdx/atoms/Card.docs.mdx +++ b/docs/src/reference/mdx/atoms/Card.docs.mdx @@ -56,3 +56,30 @@ import { Card } from '@ensdomains/thorin' ``` + +## Divider + +```tsx live=true + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + +```