Wraps any content in a phone form-factor frame. The phone attribute selects the device model and automatically sets the screen’s width, height, max-width, and max-height to that model’s logical CSS resolution. The top chrome renders the appropriate notch style (wide notch, Dynamic Island pill, or punch-hole) and the bottom chrome shows the home indicator.
Attributes
| Attribute | Type | Default | Description |
|---|
phone | PhoneModel | iphone16pro | Device model. Determines screen dimensions and notch style. |
Phone models
| Key | Label | Screen (CSS px) | Notch | Year |
|---|
iphone12 | iPhone 12 | 390 × 844 | Wide notch | 2020 |
iphone12mini | iPhone 12 mini | 360 × 780 | Wide notch | 2020 |
iphone12promax | iPhone 12 Pro Max | 428 × 926 | Wide notch | 2020 |
iphone13 | iPhone 13 | 390 × 844 | Wide notch | 2021 |
iphone13mini | iPhone 13 mini | 375 × 812 | Wide notch | 2021 |
iphone14 | iPhone 14 | 390 × 844 | Wide notch | 2022 |
iphone14pro | iPhone 14 Pro | 393 × 852 | Dynamic Island | 2022 |
iphone14promax | iPhone 14 Pro Max | 430 × 932 | Dynamic Island | 2022 |
iphone15 | iPhone 15 | 393 × 852 | Dynamic Island | 2023 |
iphone15promax | iPhone 15 Pro Max | 430 × 932 | Dynamic Island | 2023 |
iphone16 | iPhone 16 | 393 × 852 | Dynamic Island | 2024 |
iphone16pro | iPhone 16 Pro | 402 × 874 | Dynamic Island | 2024 |
iphone16promax | iPhone 16 Pro Max | 440 × 956 | Dynamic Island | 2024 |
galaxys21 | Galaxy S21 | 360 × 800 | Punch-hole | 2021 |
galaxys21ultra | Galaxy S21 Ultra | 384 × 854 | Punch-hole | 2021 |
galaxys22 | Galaxy S22 | 360 × 780 | Punch-hole | 2022 |
galaxys22ultra | Galaxy S22 Ultra | 390 × 844 | Punch-hole | 2022 |
galaxys23 | Galaxy S23 | 360 × 780 | Punch-hole | 2023 |
galaxys23ultra | Galaxy S23 Ultra | 390 × 845 | Punch-hole | 2023 |
galaxys24 | Galaxy S24 | 360 × 780 | Punch-hole | 2024 |
galaxys24ultra | Galaxy S24 Ultra | 390 × 845 | Punch-hole | 2024 |
pixel6 | Pixel 6 | 411 × 914 | Punch-hole | 2021 |
pixel7 | Pixel 7 | 412 × 915 | Punch-hole | 2022 |
pixel8 | Pixel 8 | 411 × 914 | Punch-hole | 2023 |
pixel9 | Pixel 9 | 412 × 915 | Punch-hole | 2024 |
pixel11 | Pixel 11 | 412 × 920 | Punch-hole | 2025 |