Wingman Components

In addition to Bootstrap, Wingman includes various custom CSS & JS components to enhance the functionality of your site
Pages
Components
Help
  • Accordion
    Formats default Bootstrap 4 Collapse as an accordion.
    Pane 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.

    Markup
    <div class="accordion" id="accordion-1" data-children=".accordion-item">
  <div class="accordion-item">
    <a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-1" aria-expanded="true" aria-controls="accordion-1">
      <h5>Pane 1</h5>
      <i class="h5 icon-chevron-small-right"></i>
    </a>
    <div id="accordion-panel-1" class="collapse show" role="tabpanel">
      <p>
        Pane 1 content
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-2" aria-expanded="false" aria-controls="accordion-1">
      <h5>Pane 2</h5>
      <i class="h5 icon-chevron-small-right"></i>
    </a>
    <div id="accordion-panel-2" class="collapse" role="tabpanel">
      <p>
        Pane 2 Content
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-3" aria-expanded="false" aria-controls="accordion-1">
      <h5>Pane 3</h5>
      <i class="h5 icon-chevron-small-right"></i>
    </a>
    <div id="accordion-panel-3" class="collapse" role="tabpanel">
      <p>
        Pane 3 Content
      </p>
    </div>
  </div>
</div>
  • Avatar
    A set of CSS classes to easily format avatar images.
    Image .avatar-xlg
    Image .avatar-lg
    Image .avatar
    Image .avatar-square
    Image .avatar-sm
    Image .avatar-xs
    Class Reference
    .avatar
    Apply to <img> to format as a round avatar
    .avatar-square
    Apply to .avatar to format avatar with squared edges instead of rounded
    .avatar-xs
    Apply to .avatar to decrease default size considerably
    .avatar-sm
    Apply to .avatar to decrease default size
    .avatar-lg
    Apply to .avatar to increase default size
    .avatar-xlg
    Apply to .avatar to increase default size considerably
  • Background Images
    A CSS class that turns any <img> into a background for the parent element.
    Image
    This element has an img.bg-image
    Class Reference
    .bg-image
    Apply to <img> to set image as the background for the parent element
    Caveats
    • Ensure the parent element has the position:relative; property set, as the Background Images feature uses absolute positioning.
  • Date Picker
    Using the Flatpickr library, turn any text input into an interactive date and time picker.
    Markup
    <input class="form-control" type="text" placeholder="Select a Date" data-flatpickr data-alt-input="true">

    For detailed instructions, please see plugins documentation.

  • Feature List
    A CSS and HTML component for formatting grid lists.
    • Feature List Item
    • Feature List Item
    • Feature List Item
    • Feature List Item
    • Feature List Item
    • Feature List Item
    Class Reference
    .feature-list
    Apply to <ul> to format child <li> items with space below
    .feature-list-sm
    Apply to .feature-list to decrease default space below each <li> item
    .feature-list-lg
    Apply to .feature-list to increase default space below each <li> item
    .feature-list-xlg
    Apply to .feature-list to increase default space below each <li> item considerably
  • Flickity Plugin
    Slider jQuery plugin with robust options, optimised for touch devices. View the Flickity Plugin site
    Slide item
    Slide item
    Slide item
    Slide item
    Markup
    <div class="main-carousel" data-flickity='{ "cellAlign": "center", "contain": true, "prevNextButtons": true, "pageDots":true, "wrapAround":true, "autoPlay":5000, "imagesLoaded":true }'>
  <div class="carousel-cell">
    ...
  </div>
  <div class="carousel-cell">
    ...
  </div>
  <div class="carousel-cell">
    ...
  </div>
</div>
  • Icons Entypo
    A suite of 411 carefully crafted premium pictograms by Daniel Bruce. View the Icons Entypo Plugin site
    Class Reference
    .icon-*
    Apply to <i> element with relevant class name

    Please see here  for a full class name reference to all available icons

  • Icons Socicon
    A suite of popular social media service icons. View the Icons Socicon Plugin site
    Class Reference
    .socicon-*
    Apply to <i> element with relevant class name

    Please see here  for a full class name reference to all available icons

  • jQuery Smart Wizard 4 Plugin
    Wizard jQuery plugin for creating stepped interfaces. Useful for onboarding, signups etc. View the jQuery Smart Wizard 4 Plugin site
    Step One Content
    Step Two Content
    Step Three Content
    Step Four Content
    Markup
    <div class="wizard">
  <ul class="nav nav-tabs text-center row mb-5">
    <li class="col-3"><a href="#first" class="step-circle step-circle-sm">1</a></li>
    <li class="col-3"><a href="#second" class="step-circle step-circle-sm">2</a></li>
    <li class="col-3"><a href="#third" class="step-circle step-circle-sm">3</a></li>
    <li class="col-3"><a href="#fourth" class="step-circle step-circle-sm">4</a></li>
  </ul><!--end of col-->
  <div class="tab-content">
    <div id="first">
      ...
    </div>
    <div id="second">
      ...
    </div>
    <div id="third">
      ...
    </div>
    <div id="fourth">
      ...
    </div>
  </div>
</div>
    Class Reference
    .wizard
    A wrapper element to contain .nav and .tab-content
    .sw-btn-next
    Apply to and element inside .tab-content to progress the wizard forward
    .sw-btn-prev
    Apply to and element inside .tab-content to progress the wizard backward
  • Steps
    A CSS component for creating rounded 'step' elements.
    1
    .step-circle
    2
    .step-circle-sm
    3
    .step-circle.bg-primary
    Class Reference
    .step-circle
    Apply to an element to format it as circular with centered text
    .step-circle-sm
    Apply to .step-circle to decrease the default size
    .bg-primary,danger,warning,success,info
    Apply to .step-circle to change background color
  • Scroll Monitor Plugin
    A simple and fast Javascript API to monitor elements as you scroll. View the Scroll Monitor Plugin site
    Class Reference
    .modal-header-borderless
    Apply to .modal-header to remove border and padding from bottom
  • Utilities - Height
    A set of CSS classes to set an element's height as a proportion of the viewport.
    This element has a minimum height of 10vh
    .height-10
    This element has a minimum height of 20vh
    .height-20
    Class Reference
    .height-10,20,30,40,50,60,70,80,90,100
    Apply to an element to set it's min-height value to in vh (viewport height) units.
  • Utilities - Opacity
    A set of CSS classes to set an element's opacity.
    .opacity-0
    .opacity-10
    .opacity-20
    .opacity-30
    .opacity-40
    .opacity-50
    .opacity-60
    .opacity-70
    .opacity-80
    .opacity-90
    .opacity-100
    Class Reference
    .opacity-0,10,20,30,40,50,60,70,80,90,100
    Apply to an element to set it's opacity value to in the corresponding value.
  • Utilities - Text Color
    A set of CSS classes to set an element's text color.
    blue .text-blue
    indigo .text-indigo
    purple .text-purple
    pink .text-pink
    red .text-red
    orange .text-orange
    yellow .text-yellow
    green .text-green
    teal .text-teal
    cyan .text-cyan
    Class Reference
    .text-blue,indigo,purple,pink,red,orange,yellow,green,teal,cyan
    Apply to an element to set it's color property to the corresponding value. The color values correspond to the default colors found in the variable.scss file
  • Utilities - Other
    Other utility classes used in Wingman.
    This card has the .shadow class
    Class Reference
    .shadow
    Apply to any element to add a box shadow effect
    .overflow-hidden
    Apply to any element to set overflow: hidden;
    .overflow-visible
    Apply to any element to set overflow: visible;
  • Video Cover
    A CSS and Javascript component to play videos with aesthetically pleasing image posters.
    Image
    Markup
    <div class="video-cover">
  <img alt="Image" src="..." class="bg-image" />
  <div class="video-play-icon">
    <i class="icon-controller-play"></i>
  </div>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" data-src="..." allowfullscreen></iframe>
  </div>
</div>
  • Zoom Plugin
    A simple, vanilla JS library for image zooming; as seen on Medium. View the Zoom Plugin site
    Image
    Class Reference
    [data-action="zoom"]
    Apply to an <img> to enable the Zoom lightbox feature

Start building feature-rich websites

Purchase Now