Django Phone Component

Mockup Phone wraps content in a stylised phone outline for showing mobile UI in context. Use it on landing pages or in documentation to demonstrate responsive components.

Basic Phone Mockup

Preview

Hello!

Code

<div class="w-full max-w-md mx-auto">
  <c-lb.mockup-phone class="w-full">
    <c-lb.mockup-phone.camera />
    <c-lb.mockup-phone.display class="text-white grid place-content-center bg-neutral-900">
        Hello!
      </c-lb.mockup-phone.display>
  </c-lb.mockup-phone>
</div>

With Image

Preview

Code

<div class="w-full max-w-md mx-auto">
  <c-lb.mockup-phone class="w-full">
    <c-lb.mockup-phone.camera />
    <c-lb.mockup-phone.display img="https://img.daisyui.com/images/stock/453966.webp" alt="wallpaper" />
  </c-lb.mockup-phone>
</div>

API Reference

`c-lb.mockup-phone`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply

Slot Name	Description
default	Phone display content

`c-lb.mockup-phone.camera`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply

`c-lb.mockup-phone.display`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
img	string	-	No	Image URL to display (renders an img tag instead of slot content)
alt	string	-	No	Alt text for the image

Slot Name	Description
default	Display content (used when img is not set)