Boomla UI kit
Full-width blocks
Text
Gallery
Features
Testimonials
Team
Pricing
Call to action
Alert
Contact form
F.A.Q.
Info header
Breadcrumbs
Footer
Elements
Top menu
Left menu
Subpage list
Breadcrumbs
Button
Button group
Image shaper rectangle
Image shaper circle
Feature
Gallery
Slideshow
Testimonial v1
Testimonial v2
Icon
Social icon group
Text
Display text
List
Contact form
Alert
Separator
F.A.Q. (accordion)
Tabs
File attachments
Anchor
Meta tags
Google Analytics
Powered by Boomla
Layouts
Grid
Space
Horizontal container
Hero layout
Paper
Paper 2
Group
Background
Card
CSS Elems
Buttons
Buttons with icons
Buttons icons only
Input text
Select
Checkbox
Radio
File upload
Textarea
Range
Input group
Icons
Alert
Pagination
CSS Utils
Fonts
Colors
Shadows
Background pattern
Typography
With icon - inline
xs left
X-Small
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-xs-primaryAction') ?>"> <svg class="<?== c('btnIcon-xs mr-8') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> X-Small </button> <? c.flush(response); ?>
s left
Small
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-s-primaryAction') ?>"> <svg class="<?== c('btnIcon-s mr-8') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> Small </button> <? c.flush(response); ?>
m left
Medium
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-m-primaryAction') ?>"> <svg class="<?== c('btnIcon-m mr-8') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> Medium </button> <? c.flush(response); ?>
l left
Large
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-l-primaryAction') ?>"> <svg class="<?== c('btnIcon-l mr-8') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> Large </button> <? c.flush(response); ?>
xl left
X-Large
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-xl-primaryAction') ?>"> <svg class="<?== c('btnIcon-xl mr-12') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> X-Large </button> <? c.flush(response); ?>
xs right
X-Small
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-xs-primaryAction') ?>"> X-Small <svg class="<?== c('btnIcon-xs ml-8') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> <? c.flush(response); ?>
s right
Small
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-s-primaryAction') ?>"> Small <svg class="<?== c('btnIcon-s ml-8') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> <? c.flush(response); ?>
m right
Medium
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-m-primaryAction') ?>"> Medium <svg class="<?== c('btnIcon-m ml-8') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> <? c.flush(response); ?>
l right
Large
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-l-primaryAction') ?>"> Large <svg class="<?== c('btnIcon-l ml-8') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> <? c.flush(response); ?>
xl right
X-Large
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-xl-primaryAction') ?>"> X-Large <svg class="<?== c('btnIcon-xl ml-12') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> <? c.flush(response); ?>
With icon - block
block m left
Medium
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-m-primaryAction w-full') ?>"> <svg class="<?== c('btnIcon-m mr-8') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> Medium </button> <? c.flush(response); ?>
block m right
Medium
<? var c = require('/apps/utils/tailwindlang').init(f); ?> <button class="<?== c('btn-m-primaryAction w-full') ?>"> Medium <svg class="<?== c('btnIcon-m ml-8') ?>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> <? c.flush(response); ?>
powered by
Boomla