--- layout: elements title: Elements --- {{> elements-sidebar}}

### ELEMENTS

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 Buttons

The default Friendkit buttons.

Simple Rounded Simple Rounded
`<!--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 Buttons

You can have buttons with solid color.

Solid Solid
`<!-- Solid Primary--> <a class="button is-solid primary-button">Solid</a> <!--Solid Accent--> <a class="button is-rounded is-solid accent-button">Solid</a>`

### Raised Buttons

Buttons can have a colored drop shadow when hovered.

Simple Rounded Simple Rounded Simple
`<!-- 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 Buttons

Phantom buttons show an outline on hover.

Simple Rounded
`<!-- 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

Reversed phantom buttons have a colored background on hover.

Simple Rounded
`<!-- 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>`

### Button Colors

Buttons can have different colors. Available classes are `primary-button`, `accent-button`, `green-button`, `blue-button`, `red-button`, `grey-button`, `dark-grey-button`.

Primary Accent Green Blue Red Grey Dark Grey

### Switches

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>`

### Animated Switch

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>`

### Radio Buttons

Material style radio buttons with colored drop shadows. Available classes are `is-primary`, `is-accent`, `is-blue`, `is-green`, `is-red`, `is-orange`.

Choice 1 Choice 2 Choice 3
Choice 4 Choice 5 Choice 6
`<!--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

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

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>`

### Default Inputs

Friendkit comes with default input to answer most use cases.

Simple Input
Loading Input
Rounded Input
Disabled Input
`<!--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>`

### Icon Inputs

You can add icons to input groups.

Icon Input
Icon Input
Icon Input
`<!--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>`

### Validation Inputs

Input wrappers have modifiers that you can use for frontend validation.

Email
Email
Email
`<!--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>`

### Dropdown

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>`

### Share Modal

A modal that can be used to share posts and content on someone's feed. Html code for that modal can be found in: `html/partials/pages/feed/modals/share-modal.html`.

Share Post

### User Photos Modal

A modal that can be used to view user photos and albums: `html/partials/pages/profile/timeline/modals/user-photos-modal.html`.

My Photos

### Photo Uploader Modal

A modal that can be used to upload photos and photo albums: `html/partials/pages/feed/modals/albums-modal.html`.

New Album

### Webcam Modal

A modal that can be used to go live: `html/partials/pages/feed/modals/videos-modal.html`.

New Album

### Onboarding Modals

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`.

Onboard Onboard

### Custom Lightbox UI

A modal that can be used to explain a feature to a user: `html/partials/pages/profile/timeline/modals/custom-profile-lightbox.html`.

Onboard

### Fancybox Example 1

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.

Open

### Fancybox Confirm Dialog

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.

Open

### Morphing Button

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.

Morph Button

### Fancybox Example 4

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.

View Product #2 #3

### Vivid Icons

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.

### Some Fancy Dress

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.

{{> albums-modal}} {{> share-modal}} {{> user-photos-modal}} {{> videos-modal}} {{> albums-help-modal}} {{> videos-help-modal}} {{> custom-profile-lightbox}}