Deepyr Documentation

Card

Card Title

A card component has a figure, a body part, and inside body there are title and actions parts

Card(
  style: [Size.w96, BgUtil.base100, Effects.shadowSm],
  [
    Figure([img(src: 'image.png', alt: 'Shoes')]),
    CardBody([
      CardTitle([text('Card Title')]),
      p([text('A card component has a figure, a body part, and inside body there are title and actions parts')]),
      CardActions(
        style: [Alignment.justifyEnd],
        [
          Button([text('Buy Now')], style: [Button.primary]),
        ],
      ),
    ]),
  ],
),

Pricing Card

Premium

$29/mo

check High-resolution image generation
check Customizable style templates
check Batch processing capabilities
check AI-driven image enhancements
check Seamless cloud integration
check Real-time collaboration tools

Card(
  style: [Size.w96, BgUtil.base100, Effects.shadowSm],
  [
    CardBody([
      Badge([text('Most Popular')], style: [Badge.xs, Badge.warning]),
      div(classes: 'flex justify-between', [
        h2(classes: 'text-3xl font-bold', [text('Premium')]),
        span(classes: 'text-xl', [text('$29/mo')]),
      ]),
      ul(
        classes: 'mt-6 flex flex-col gap-2 text-xs',
        [
          li([
            Icon('check', style: [TextUtil.success, Size.w4, Size.h4, Spacing.me(2), Layout.inlineBlock]),
            span([text('High-resolution image generation')]),
          ]),
          // ... other list items ...
          li(
            classes: 'opacity-50',
            [
              Icon('check', style: [TextUtil.baseContent.on([Is.disabled]), Size.w4, Size.h4, Spacing.me(2), Layout.inlineBlock]),
              span(classes: 'line-through', [text('Seamless cloud integration')]),
            ]
          ),
        ]
      ),
      div(
        classes: 'mt-6',
        [
          Button([text('Subscribe')], style: [Button.primary, Button.block]),
        ]
      ),
    ]),
  ],
)

Card sizes

Xsmall Card

A card component has a figure, a body part...

Small Card

A card component has a figure, a body part...

Medium Card

A card component has a figure, a body part...

Large Card

A card component has a figure, a body part...

Xlarge Card

A card component has a figure, a body part...

div( // Wrapper for grid layout in preview
  classes: 'grid gap-6',
  [
    // Card - xs
    Card(
      style: [Card.xs, Size.w96, BgUtil.base100, Effects.shadowSm],
      [ /* CardBody with content */ ],
    ),
    // Card - sm
    Card(
      style: [Card.sm, Size.w96, BgUtil.base100, Effects.shadowSm],
      [ /* CardBody with content */ ],
    ),
    // Card - md (default)
    Card(
      style: [Card.md, Size.w96, BgUtil.base100, Effects.shadowSm],
      [ /* CardBody with content */ ],
    ),
    // Card - lg
    Card(
      style: [Card.lg, Size.w96, BgUtil.base100, Effects.shadowSm],
      [ /* CardBody with content */ ],
    ),
    // Card - xl
    Card(
      style: [Card.xl, Size.w96, BgUtil.base100, Effects.shadowSm],
      [ /* CardBody with content */ ],
    ),
  ]
),

Card with a card-border

Card Title

A card component has a figure, a body part...

Card(
  style: [Card.border, Size.w96, BgUtil.base100],
  [
    CardBody([
      CardTitle([text('Card Title')]),
      p([text('A card component has a figure, a body part...')]),
      CardActions(
        style: [Alignment.justifyEnd],
        [
          Button([text('Buy Now')], style: [Button.primary]),
        ],
      ),
    ]),
  ],
),

Card with a dash border

Card Title

A card component has a figure, a body part...

Card(
  style: [Card.dash, Size.w96, BgUtil.base100],
  [
    CardBody([
      CardTitle([text('Card Title')]),
      p([text('A card component has a figure, a body part...')]),
      CardActions(
        style: [Alignment.justifyEnd],
        [
          Button([text('Buy Now')], style: [Button.primary]),
        ],
      ),
    ]),
  ],
),

Card with badge

Card TitleNEW

A card component has a figure, a body part...

FashionProducts

Card(
  style: [Size.w96, BgUtil.base100, Effects.shadowSm],
  [
    Figure([img(src: 'image.png', alt: 'Shoes')]),
    CardBody([
      CardTitle([
        text('Card Title'),
        Badge([text('NEW')], style: [Badge.secondary]),
      ]),
      p([text('A card component has a figure, a body part...')]),
      CardActions(
        style: [Alignment.justifyEnd],
        [
          Badge([text('Fashion')], style: [Badge.outline]),
          Badge([text('Products')], style: [Badge.outline]),
        ],
      ),
    ]),
  ],
),

Card with bottom image

Card Title

A card component has a figure, a body part...

Card(
  style: [Size.w96, BgUtil.base100, Effects.shadowSm],
  [
    CardBody([
      CardTitle([text('Card Title')]),
      p([text('A card component has a figure, a body part...')]),
    ]),
    Figure([img(src: 'image.png', alt: 'Shoes')]),
  ],
),

Card with centered content and paddings

Card Title

A card component has a figure, a body part...

Card(
  style: [Size.w96, BgUtil.base100, Effects.shadowSm],
  [
    Figure(
      [img(src: 'image.png', alt: 'Shoes', classes: [Effects.roundedXl].toClasses()],
      style: [Spacing.px(10), Spacing.pt(10)],
    ),
    CardBody(
      [
        CardTitle([text('Card Title')]),
        p([text('A card component has a figure, a body part...')]),
        CardActions([
          Button([text('Buy Now')], style: [Button.primary]),
        ]),
      ],
      style: [Alignment.itemsCenter, TextUtil.center],
    ),
  ],
),

Card with image overlay

Card Title

A card component has a figure, a body part...

Card(
  style: [Card.imageFull, Size.w96, BgUtil.base100, Effects.shadowSm],
  [
    Figure([img(src: 'image.png', alt: 'Shoes')]),
    CardBody([
      CardTitle([text('Card Title')]),
      p([text('A card component has a figure, a body part...')]),
      CardActions(
        style: [Alignment.justifyEnd],
        [
          Button([text('Buy Now')], style: [Button.primary]),
        ],
      ),
    ]),
  ],
),

Card with no image

Card title!

A card component has a figure, a body part...

Card(
  style: [Size.w96, BgUtil.base100, Effects.shadowSm],
  [
    CardBody([
      CardTitle([text('Card title!')]),
      p([text('A card component has a figure, a body part...')]),
      CardActions(
        style: [Alignment.justifyEnd],
        [
          Button([text('Buy Now')], style: [Button.primary]),
        ],
      ),
    ]),
  ],
),

Card with custom color

Card title!

A card component has a figure, a body part...

Card(
  style: [Size.w96, BgUtil.primary, TextUtil.primaryContent],
  [
    CardBody([
      CardTitle([text('Card title!')]),
      p([text('A card component has a figure, a body part...')]),
      CardActions(
        style: [Alignment.justifyEnd],
        [
          Button([text('Buy Now')]),
        ],
      ),
    ]),
  ],
),

Centered card with neutral color

Cookies!

We are using cookies for no reason.

Card(
  style: [Size.w96, BgUtil.neutral, TextUtil.neutralContent],
  [
    CardBody(
      [
        CardTitle([text('Cookies!')]),
        p([text('We are using cookies for no reason.')]),
        CardActions(
          style: [Alignment.justifyEnd],
          [
            Button([text('Accept')], style: [Button.primary]),
            Button([text('Deny')], style: [Button.ghost]),
          ],
        ),
      ],
      style: [Alignment.itemsCenter, TextUtil.center],
    ),
  ],
),

Card with action on top

We are using cookies for no reason.

Card(
  style: [Size.w96, BgUtil.base100, Effects.shadowSm],
  [
    CardBody([
      CardActions(
        style: [Alignment.justifyEnd],
        [
          Button(
            [Icon('close', style: [TextUtil.lg])],
            style: [Button.square, Button.sm],
          ),
        ],
      ),
      p([text('We are using cookies for no reason.')]),
    ]),
  ],
),

Card with image on side

New movie is released!

Click the button to watch on Jetflix app.

Card(
  style: [Card.side, BgUtil.base100, Effects.shadowSm],
  [
    Figure([img(src: 'image.webp', alt: 'Movie')]),
    CardBody([
      CardTitle([text('New movie is released!')]),
      p([text('Click the button to watch on Jetflix app.')]),
      CardActions(
        style: [Alignment.justifyEnd],
        [
          Button([text('Watch')], style: [Button.primary]),
        ],
      ),
    ]),
  ],
),

Responsive card (vertical on small screen, horizontal on large screen)

New album is released!

Click the button to listen on Spotiwhy app.

Card(
  style: [
    BgUtil.base100,
    Effects.shadowSm,
    Card.side.at(Breakpoint.lg)
  ],
  [
    Figure([img(src: 'image.webp', alt: 'Album')]),
    CardBody([
      CardTitle([text('New album is released!')]),
      p([text('Click the button to listen on Spotiwhy app.')]),
      CardActions(
        style: [Alignment.justifyEnd],
        [
          Button([text('Listen')], style: [Button.primary]),
        ],
      ),
    ]),
  ],
),