Fabric UI Kit

All Components

A stunning UI kit of custom components, ready made template and pre built sections

Accordion

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Flush

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

Style

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

Alert with an example link

Alerts with Content

Badge

Regular

Primary Secondary Success Danger Warning Info Light Dark
Rounded

Primary Secondary Success Danger Warning Info Light Dark
Icons

Primary Secondary Success Danger Warning Info Light Dark
Style



Breadcrumb

Custom Dividers

Buttons

Color
Outline
Style
Rounded
Outline Rounded
Size


Right Icon
Left Icon
Social Buttons
States


Disabled Primary link

Button Groups

Checkboxes

Radio

With dropdown

Button Groups

Basic
With dropdown
Checkboxes
Radio
Vertical variation
Sizing

Cards

card img top
Success

July 15, 2021

Lorem ipsum doloret enim ad minim veniam quis.

Many desktop publishing packages and web page editors now use Lorem Ipsum as their default text.

Trending

"Lorem ipsum dolor consectetur sit amet, adipiscing elit magna aliqua"

Someone Famous
Trending

Quote of the day

"Lorem ipsum dolor consectetur sit amet, adipiscing elit magna aliqua"

Someone Famous

Card Heading

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card Heading

Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card Heading

Lorem ipsum dolor sit amet

Web Hosting
Lorem ipsum dolor
$999
Visual Design
Lorem ipsum dolor
$799
Priority Support
Lorem ipsum dolor
$299

Strategy

Lorem ipsum doloret sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Notification

2 mins ago

Lorem ipsum dolor sit amet elit, consectetur adipiscing ut, se do eiusmod tempor incidid ut lab dolore magna aliqua enim ad minim veniam.

UX
Research

Explore
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
Card title

With supporting text below as a natural lead-in to additional content.

Powerful technology

Lorem ipsum dolor sit amet elit, adipiscing, do eiusmod tempor incididunt ut eiusmod et dolor magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Scale BI platform with the cloud

img item 1
Technology

Lorem ipsum dolor sit adipiscing elit

img item 2

info

img item 2

Info

Featured
Card Heading

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

custom products for awesome teams

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

custom products for awesome teams

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Research, Design & Build

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Pricing Cards

Basic

$5

Simple yet powerful
  • Lorem ipsum dolor sit
  • Amet consectetur adipiscing
  • Sed do eiusmod tempor
  • Incididunt ut labore et
Best Value

Premium

$18

Simple yet powerful
  • Lorem ipsum dolor sit
  • Amet consectetur adipiscing
  • Sed do eiusmod tempor
  • Incididunt ut labore et

Ultimate

$30

Simple yet powerful
  • Lorem ipsum dolor sit
  • Amet consectetur adipiscing
  • Sed do eiusmod tempor
  • Incididunt ut labore et
Everywhere
Build custom charts

Lorem ipsum dolor venenatis lectus magna fringilla urna at porttitor rhoncus. An ipsum sit amet porttitor eget dolor at in. Vulputate eu eniam ut scelerisque felis imperdiet proin. At risus viverra viniam adipiscing at in. Gravida ute neque convallis a cras enia semper auctor neque.

Carousel

Fade Animation

Dropdowns

Footers

Forms

We'll never share your email with anyone else.
We'll never share your email with anyone else.

Floating Labels

Input Groups

@
@example.com
https://example.com/users/
$ .00
With textarea

Inputs

Checkboxes
Radios
Slider


Switches
File Upload

Form Validation

Looks good!
Looks good!
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Form Validation Tooltips

Looks good!
Looks good!
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.

List Groups

  • Current item
  • With badge 14
  • A third list item 2
  • A fourth item
  • And a fifth one
Flush
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  1. Subheading
    Cras justo odio
    14
  2. Subheading
    Cras justo odio
    14
  3. Subheading
    Cras justo odio
    14
Contract Management
Lorem ipsum dolor Kathy Lopez
2 hrs ago
Resources
Lorem ipsum dolor Amy Baker
6 hrs ago
Team meating
Lorem ipsum dolor Eric Harris
Yesterday
Kathy Lopez
Lorem ipsum dolor
Eric Harris
Lorem ipsum dolor
Amy Baker
Lorem ipsum dolor

Modal

Navs

Tabs

Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products. Progressively maintain extensive infomediaries via extensible niches. Dramatically disseminate standardized metrics after resource-leveling processes. Objectively pursue diverse catalysts for change for interoperable meta-services.

Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources. Proactively fabricate one-to-one materials via effective e-business. Completely synergize scalable e-commerce rather than high standards in e-services. Assertively iterate resource maximizing products after leading-edge intellectual capital.

Dynamically target high-payoff intellectual capital for customized technologies. Objectively integrate emerging core competencies before process-centric communities. Dramatically evisculate holistic innovation rather than client-centric data. Distinctively re-engineer revolutionary meta-services and premium architectures. Intrinsically incubate intuitive opportunities and real-time potentialities. Appropriately communicate one-to-one technology after plug-and-play networks.

Pills with Icon

Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products. Progressively maintain extensive infomediaries via extensible niches. Dramatically disseminate standardized metrics after resource-leveling processes. Objectively pursue diverse catalysts for change for interoperable meta-services.

Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources. Proactively fabricate one-to-one materials via effective e-business. Completely synergize scalable e-commerce rather than high standards in e-services. Assertively iterate resource maximizing products after leading-edge intellectual capital.

Dynamically target high-payoff intellectual capital for customized technologies. Objectively integrate emerging core competencies before process-centric communities. Dramatically evisculate holistic innovation rather than client-centric data. Distinctively re-engineer revolutionary meta-services and premium architectures. Intrinsically incubate intuitive opportunities and real-time potentialities. Appropriately communicate one-to-one technology after plug-and-play networks.

Tabs Style

Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products. Progressively maintain extensive infomediaries via extensible niches. Dramatically disseminate standardized metrics after resource-leveling processes. Objectively pursue diverse catalysts for change for interoperable meta-services.

Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources. Proactively fabricate one-to-one materials via effective e-business. Completely synergize scalable e-commerce rather than high standards in e-services. Assertively iterate resource maximizing products after leading-edge intellectual capital.

Dynamically target high-payoff intellectual capital for customized technologies. Objectively integrate emerging core competencies before process-centric communities. Dramatically evisculate holistic innovation rather than client-centric data. Distinctively re-engineer revolutionary meta-services and premium architectures. Intrinsically incubate intuitive opportunities and real-time potentialities. Appropriately communicate one-to-one technology after plug-and-play networks.

Appropriately empower dynamic leadership skills after business portals. Globally myocardinate interactive supply chains with distinctive quality vectors. Globally revolutionize global sources through interoperable services. Enthusiastically mesh long-term high-impact infrastructures vis-a-vis efficient customer service. Professionally fashion wireless leadership rather than prospective experiences. Energistically myocardinate clicks-and-mortar testing.

Pills Style

Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products. Progressively maintain extensive infomediaries via extensible niches. Dramatically disseminate standardized metrics after resource-leveling processes. Objectively pursue diverse catalysts for change for interoperable meta-services.

Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources. Proactively fabricate one-to-one materials via effective e-business. Completely synergize scalable e-commerce rather than high standards in e-services. Assertively iterate resource maximizing products after leading-edge intellectual capital.

Dynamically target high-payoff intellectual capital for customized technologies. Objectively integrate emerging core competencies before process-centric communities. Dramatically evisculate holistic innovation rather than client-centric data. Distinctively re-engineer revolutionary meta-services and premium architectures. Intrinsically incubate intuitive opportunities and real-time potentialities. Appropriately communicate one-to-one technology after plug-and-play networks.

Appropriately empower dynamic leadership skills after business portals. Globally myocardinate interactive supply chains with distinctive quality vectors. Globally revolutionize global sources through interoperable services. Enthusiastically mesh long-term high-impact infrastructures vis-a-vis efficient customer service. Professionally fashion wireless leadership rather than prospective experiences. Energistically myocardinate clicks-and-mortar testing.

Vertical Tabs

Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products. Progressively maintain extensive infomediaries via extensible niches. Dramatically disseminate standardized metrics after resource-leveling processes. Objectively pursue diverse catalysts for change for interoperable meta-services.

Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources. Proactively fabricate one-to-one materials via effective e-business. Completely synergize scalable e-commerce rather than high standards in e-services. Assertively iterate resource maximizing products after leading-edge intellectual capital.

Dynamically target high-payoff intellectual capital for customized technologies. Objectively integrate emerging core competencies before process-centric communities. Dramatically evisculate holistic innovation rather than client-centric data. Distinctively re-engineer revolutionary meta-services and premium architectures. Intrinsically incubate intuitive opportunities and real-time potentialities. Appropriately communicate one-to-one technology after plug-and-play networks.

Appropriately empower dynamic leadership skills after business portals. Globally myocardinate interactive supply chains with distinctive quality vectors. Globally revolutionize global sources through interoperable services. Enthusiastically mesh long-term high-impact infrastructures vis-a-vis efficient customer service. Professionally fashion wireless leadership rather than prospective experiences. Energistically myocardinate clicks-and-mortar testing.

Vertical Pills

Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products. Progressively maintain extensive infomediaries via extensible niches. Dramatically disseminate standardized metrics after resource-leveling processes. Objectively pursue diverse catalysts for change for interoperable meta-services.

Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources. Proactively fabricate one-to-one materials via effective e-business. Completely synergize scalable e-commerce rather than high standards in e-services. Assertively iterate resource maximizing products after leading-edge intellectual capital.

Dynamically target high-payoff intellectual capital for customized technologies. Objectively integrate emerging core competencies before process-centric communities. Dramatically evisculate holistic innovation rather than client-centric data. Distinctively re-engineer revolutionary meta-services and premium architectures. Intrinsically incubate intuitive opportunities and real-time potentialities. Appropriately communicate one-to-one technology after plug-and-play networks.

Appropriately empower dynamic leadership skills after business portals. Globally myocardinate interactive supply chains with distinctive quality vectors. Globally revolutionize global sources through interoperable services. Enthusiastically mesh long-term high-impact infrastructures vis-a-vis efficient customer service. Professionally fashion wireless leadership rather than prospective experiences. Energistically myocardinate clicks-and-mortar testing.

Offcanvas

Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas right
...
Offcanvas bottom
...

Pagination

Style

Sizes

Progress Bar








25%





Quote

Primary Blockquote

Primary title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Secondary Blockquote using bg-*

Secondary title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Success Blockquote

Success title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Info Blockquote

Info title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Warning Blockquote

Warning title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Danger Blockquote

Danger title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Sections

1

subscribe to our newsletter

Join over 6000 members and get exclusive tips straight to your inbox every week.

2

3

Simple, yet powerful features

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean sed adipiscing diam donec adipiscing. Gravida cum sociis natoque penatibus. Elit duis tristique sollicitudin. Condimentum mattis pellentesque id nibh tortor id aliquet lectus. Vel tempor. Enimeutis turpis egestas pretium aenean pharetra magna.

4

Its about success of your Business

First 15 days are free

Lorem ipsum dolor sit amet

Cancel anytime

Consectetur adipiscing elit

Data security

Duis aute irure dolor in reprehenderit

Team plan

Lorem ipsum dolor sit amet

5

...

How we improve user retention

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Last updated 3 months ago

6

Begin your free trial now

Get started

7

Lorem ipsum dolor amet

What can we do for your business?

Contact us

Spinners

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Spinner With Text

Loading...

Size

Loading...
Loading...
Loading...
Loading...

Scrollspy

@fat

Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

@mdo

Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.

one

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.

And some more placeholder content, for good measure.

Tables

Default
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Striped
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Accented
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Variants
Use contextual classes to color tables, table rows or individual cells.
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Toasts

Tooltips

Typography

Headings
Heading 1

Bootstrap heading

Heading 2

Bootstrap heading

Heading 3

Bootstrap heading

Heading 4

Bootstrap heading

Heading 5
Bootstrap heading
Heading 6
Bootstrap heading
Display
Display 1

Display heading

Display 2

Display heading

Display 3

Display heading

Display 4

Display heading

Display 5

Display heading

Display 6

Display heading

Paragraphs
Primary Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Secondary Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Success Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Info Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Warning Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Danger Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Muted Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus purus in massa tempor nec feugiat nisl. Et netus et malesuada fames ac turpis egestas.

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Header with small tag

Fancy display heading With faded secondary text

Blockquotes
Blockquotes source

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Text truncation
Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.