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.
