Frames

<!-- 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 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 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")