Frames
Devices' shapes that outline any type of content but most commonly images.
Around component
Phone
<!-- Phone frame -->
<div class="cs-frame-phone">
<div class="cs-frame-phone-status-bar text-light">
<span class="text-nowrap">9:41 AM</span>
<span class="text-nowrap text-right">
<i class="fe-wifi mr-2"></i>
<i class="fe-battery-charging"></i>
</span>
</div>
<div class="cs-frame-phone-body">
<img src="path-to-app-screenshot" alt="App screen" />
</div>
</div>
// Phone frame
.cs-frame-phone
.cs-frame-phone-status-bar.text-light
span.text-nowrap 9:41 AM
span.text-nowrap.text-right
i.fe-wifi.mr-2
i.fe-battery-charging
.cs-frame-phone-body
+image("path-to-app-screenshot", "App screen")
Browser
<!-- Browser frame -->
<div class="cs-frame-browser">
<div class="cs-frame-browser-toolbar">
<div class="text-nowrap mr-3">
<span class="cs-frame-browser-button bg-danger"></span>
<span class="cs-frame-browser-button bg-warning"></span>
<span class="cs-frame-browser-button bg-success"></span>
</div>
<span class="font-size-sm">https://example.com</span>
</div>
<div class="cs-frame-browser-body">
<img src="path-to-image" alt="Screenshot"/>
</div>
</div>
// Browser frame
.cs-frame-browser
.cs-frame-browser-toolbar
.text-nowrap.mr-3
span.cs-frame-browser-button.bg-danger
span.cs-frame-browser-button.bg-warning
span.cs-frame-browser-button.bg-success
span.font-size-sm https://example.com
.cs-frame-browser-body
+image("path-to-image", "Screenshot")
Carousel example
<!-- Carousel inside browser frame -->
<div class="cs-frame-browser cs-carousel">
<div class="cs-frame-browser-toolbar">
<div class="text-nowrap mr-3">
<span class="cs-frame-browser-button bg-danger"></span>
<span class="cs-frame-browser-button bg-warning"></span>
<span class="cs-frame-browser-button bg-success"></span>
</div>
<span class="cs-carousel-label font-size-sm">https://mobileapp.com</span>
</div>
<div class="cs-frame-browser-body">
<div class="cs-carousel-inner" data-carousel-options='{"mode": "gallery", "controls": false, "nav": false}'>
<div data-carousel-label="https://mobileapp.com">
<img src="path-to-first-image" class="rounded" alt="Screenshot"/>
</div>
<div data-carousel-label="https://bookingapp.com">
<img src="path-to-second-image" class="rounded" alt="Screenshot"/>
</div>
<div data-carousel-label="https://creativeagency.com">
<img src="path-to-third-image" class="rounded" alt="Screenshot"/>
</div>
</div>
</div>
<div class="cs-carousel-pager pt-4 text-nowrap text-center mt-2 mb-n2">
<button class="active" data-nav data-goto="1"></button>
<button data-nav data-goto="2"></button>
<button data-nav data-goto="3"></button>
</div>
</div>
// Carousel inside browser frame
.cs-frame-browser.cs-carousel
.cs-frame-browser-toolbar
.text-nowrap.mr-3
span.cs-frame-browser-button.bg-danger
span.cs-frame-browser-button.bg-warning
span.cs-frame-browser-button.bg-success
span.cs-carousel-label.font-size-sm https://mobileapp.com
.cs-frame-browser-body
.cs-carousel-inner(data-carousel-options="{"mode": "gallery", "controls": false, "nav": false}")
div(data-carousel-label="https://mobileapp.com")
+image("path-to-first-image", "Screenshot").rounded
div(data-carousel-label="https://bookingapp.com")
+image("path-to-second-image", "Screenshot").rounded
div(data-carousel-label="https://creativeagency.com")
+image("path-to-third-image", "Screenshot").rounded
.cs-carousel-pager.pt-4.text-nowrap.text-center.mt-2.mb-n2
button(data-nav data-goto="1").active
button(data-nav data-goto="2")
button(data-nav data-goto="3")