A non exhaustive list of UI elements that you can use when building your project with Friendkit. More will be added as new theme updates are released. Friendkit being a Bulma.io based theme, you can use components directly from Bulma. You can read the documentation if you're not familiar with it.
<!--Simple-->
<a class="button is-solid primary-button raised">Primary</a>
<!--Rounded-->
<a class="button is-rounded">Rounded</a>
<!--Loading-->
<a class="button is-loading">Simple</a>
<!--Loading-->
<a class="button is-rounded is-loading">Rounded</a>
<!-- Solid Primary-->
<a class="button is-solid primary-button">Solid</a>
<!--Solid Accent-->
<a class="button is-rounded is-solid accent-button">Solid</a>
<!-- Solid Primary Raised-->
<a class="button is-solid primary-button raised">Raised</a>
<!--Solid Accent Raised-->
<a class="button is-rounded is-solid accent-button raised">Raised</a>
<!-- Phantom Primary-->
<a class="button is-phantom primary-button">Raised</a>
<!--Phantom Accent-->
<a class="button is-rounded is-phantom accent-button">Raised</a>
<!-- Reversed Phantom Primary-->
<a class="button is-phantom primary-button">Simple</a>
<!-- Reversed Phantom Accent-->
<a class="button is-rounded is-phantom accent-button">Rounded</a>
Switches can have different colors. Available classes are
is-primary, is-accent, is-blue,
is-red.
<!--Default-->
<label class="f-switch">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
<!--Primary-->
<label class="f-switch is-primary">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
<!--Accent-->
<label class="f-switch is-accent">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
<!--Red-->
<label class="f-switch is-red">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
<!--Blue-->
<label class="f-switch is-blue">
<input type="checkbox" class="is-switch" checked>
<i></i>
</label>
A playful looking animated switch
<!--Animated Switch-->
<label class="animated-toggle">
<input type="checkbox">
<span class="toggler">
<span class="dark">
<i data-feather="moon"></i>
</span>
<span class="light">
<i data-feather="sun"></i>
</span>
</span>
</label>
<!--Material Radio-->
<label class="material-radio">
<input type="radio" name="group-demo1" checked>
<span class="dot"></span>
<span class="radio-label">Choice 1</span>
</label>
<!--Material Radio-->
<label class="material-radio is-accent">
<input type="radio" name="group-demo1">
<span class="dot"></span>
<span class="radio-label">Choice 2</span>
</label>
<!--Material Radio-->
<label class="material-radio is-green">
<input type="radio" name="group-demo1">
<span class="dot"></span>
<span class="radio-label">Choice 3</span>
</label>
Round checkboxes can have different colors and are available in 2 sizes. Available classes are
is-primary, is-green, is-blue, is-green,
is-red, is-orange.
<!--Round Checkbox small-->
<div class="round-checkbox is-small is-red">
<div>
<input type="checkbox" id="checkbox-group-7" checked>
<label for="checkbox-group-7"></label>
</div>
</div>
<!--Round Checkbox-->
<div class="round-checkbox is-red">
<div>
<input type="checkbox" id="checkbox-group-8" checked>
<label for="checkbox-group-8"></label>
</div>
</div>
Basic checkboxes can have different colors and are available in 2 sizes. Available classes are
is-accent, is-green, is-blue, is-green,
is-red, is-orange.
<!--Basic Checkbox-->
<div class="basic-checkbox">
<input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" checked>
<label for="styled-checkbox-2"></label>
</div>
<!--Basic Checkbox-->
<div class="basic-checkbox is-accent">
<input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" checked>
<label for="styled-checkbox-3"></label>
</div>
Friendkit comes with default input to answer most use cases.
<!--Simple Input-->
<div class="field">
<label>Simple Input</label>
<div class="control">
<input type="text" class="input">
</div>
</div>
<!--Loading Input-->
<div class="field">
<label>Loading Input</label>
<div class="control">
<input type="text" class="input">
</div>
</div>
<!--Rounded Input-->
<div class="field">
<label>Rounded Input</label>
<div class="control">
<input type="text" class="input is-rounded">
</div>
</div>
<!--Disabled Input-->
<div class="field">
<label>Disabled Input</label>
<div class="control">
<input type="text" class="input is-rounded" disabled>
</div>
</div>
You can add icons to input groups.
<!--Simple Input-->
<div class="field">
<label>Icon Input</label>
<div class="control has-icon">
<input type="text" class="input">
<div class="form-icon">
<i data-feather="search"></i>
</div>
</div>
</div>
<!--Loading Input-->
<div class="field">
<label>Icon Input</label>
<div class="control has-icon">
<input type="text" class="input is-rounded">
<div class="form-icon">
<i data-feather="search"></i>
</div>
</div>
</div>
<!--Disabled Input-->
<div class="field">
<label>Icon Input</label>
<div class="control has-icon">
<input type="text" class="input" disabled>
<div class="form-icon">
<i data-feather="search"></i>
</div>
</div>
</div>
Input wrappers have modifiers that you can use for frontend validation.
<!--Success Validation Input-->
<div class="field">
<label>Email</label>
<div class="control has-validation has-success">
<input type="text" class="input" />
<div class="error-icon">
<i data-feather="x"></i>
</div>
<div class="success-icon">
<i data-feather="check"></i>
</div>
</div>
</div>
<!--Error Validation Input-->
<div class="field">
<label>Email</label>
<div class="control has-validation has-error">
<input type="text" class="input" />
<div class="error-icon">
<i data-feather="x"></i>
</div>
<div class="success-icon">
<i data-feather="check"></i>
</div>
</div>
</div>
Friendkit basic dropdown menu that can be styled to fit your needs. You can use the is-accent class to modify the dropdown menu items color on hover.
<!--Basic Dropdown-->
<div class="dropdown is-spaced is-accent dropdown-trigger">
<div>
<div class="button">
<i data-feather="more-vertical"></i>
</div>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
<div class="media">
<i data-feather="life-buoy"></i>
<div class="media-content">
<h3>Help Center</h3>
<small>Access user guides and FAQs.</small>
</div>
</div>
</a>
<a class="dropdown-item">
<div class="media">
<i data-feather="headphones"></i>
<div class="media-content">
<h3>Talk</h3>
<small>Call the support team.</small>
</div>
</div>
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
<div class="media">
<i data-feather="x"></i>
<div class="media-content">
<h3>Hide</h3>
<small>I don't want to see this stuff anymore.</small>
</div>
</div>
</a>
</div>
</div>
</div>
A modal that can be used to view user photos and albums:
html/partials/pages/profile/timeline/modals/user-photos-modal.html.
A modal that can be used to upload photos and photo albums:
html/partials/pages/feed/modals/albums-modal.html.
A modal that can be used to go live:
html/partials/pages/feed/modals/videos-modal.html.
A modal that can be used to explain a feature to a user:
html/partials/pages/feed/modals/albums-help-modal.html and html/partials/pages/feed/modals/videos-help-modal.html.
A modal that can be used to explain a feature to a user:
html/partials/pages/profile/timeline/modals/custom-profile-lightbox.html.
Use the the Fancybox 3 plugin to create a beautiful lightbox with a customized layout. Read the plugin documentation for more examples and more info about usage. The license provided with Friendkit allows you to use it in one of your projects.
Use the the Fancybox 3 plugin to create a nice confirm / alert box. Read the plugin documentation for more examples and more info about usage. The license provided with Friendkit allows you to use it in one of your projects.
Use the the Fancybox 3 plugin to create a reusable morphing modal button. Read the plugin documentation for more examples and more info about usage. The license provided with Friendkit allows you to use it in one of your projects.
Use the the Fancybox 3 plugin to create a product quickview. Read the plugin documentation for more examples and more info about usage. The license provided with Friendkit allows you to use it in one of your projects.
A Ready to use Free and Open Source SVG Icons Pack JavaScript Library.Read the plugin documentation for more examples and more info about usage.
There should be a price tag and a brief description of the product.
Also, a form where customers could, for example, choose product size, color and quantity.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh eu nibh scelerisque malesuada. Morbi mollis eleifend turpis. Mauris consequat convallis volutpat. Integer quis erat vehicula, molestie nulla vel, sagittis odio. Quisque hendrerit eleifend magna, sit amet dictum odio condimentum a. Proin et ipsum venenatis, elementum sem convallis, pellentesque elit. Mauris congue velit porttitor dui condimentum porttitor. Aenean pretium suscipit ante in imperdiet.
Nam vitae suscipit metus, eget volutpat quam. Ut et sem nunc. Vivamus erat leo, auctor in neque non, malesuada consectetur neque. Ut ac purus est. Quisque molestie pharetra sem sit amet ornare. Nam eu felis in nisl lacinia iaculis. Pellentesque ut lobortis lacus. Etiam ut eros non dui ultrices imperdiet.
Ut pulvinar sem gravida porta ullamcorper. Pellentesque laoreet tellus eu egestas tempor. Ut nec lobortis nulla. Aenean tincidunt eu eros eget tincidunt. Vivamus ac lacinia mi, ut varius justo. Praesent eu ante vel velit iaculis aliquam sit amet vestibulum purus. Fusce molestie enim eros. Pellentesque justo sem, pharetra vel ligula non, euismod elementum tortor. Morbi dui ligula, rhoncus nec dignissim a, malesuada feugiat massa.
Cras non lobortis mauris. Maecenas id placerat est, ac lobortis nisi. Aenean dapibus arcu commodo magna tristique, et facilisis diam aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce a vestibulum erat, nec ornare libero. Proin aliquam, neque vel mattis euismod, tortor lacus tempus turpis, ac vulputate augue nisl eget sem. Integer in porttitor mauris.
Set a date for your album. You can always change it later.
Tag friends in this album. Tagged friends can see photos they are tagged in.
Css Ninja
Lorem ipsum sit dolor amet is a dummy text used by the typography industry and the web industry.
Lorem ipsum sit dolor amet is a dummy text used by the typography industry and the web industry.
Lorem ipsum sit dolor amet is a dummy text used by the typography industry and the web industry.
Lorem ipsum sit dolor amet is a dummy text used by the typography industry and the web industry.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros. Consectetur adipiscing elit. Proin ornare magna eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros. Consectetur adipiscing elit.
