Holy guacamole 1! You should check in on some of those fields below.

Auto close in 3 seconds! You should check in on some of those fields below.

Auto close in 10 seconds! You should check in on some of those fields below.

Holy guacamole 3! You should check in on some of those fields below.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Readmore Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus elementum sagittis vitae et leo duis. Magna etiam tempor orci eu lobortis elementum nibh tellus. Tortor at auctor urna nunc id cursus metus. Nulla facilisi nullam vehicula ipsum a arcu cursus. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Sit amet justo donec enim diam. Eget nunc lobortis mattis aliquam. Condimentum id venenatis a condimentum vitae sapien. Nunc congue nisi vitae suscipit tellus. Blandit volutpat maecenas volutpat blandit aliquam. Cum sociis natoque penatibus et magnis dis parturient montes. Justo laoreet sit amet cursus.

Dictum sit amet justo donec enim diam vulputate ut. Est placerat in egestas erat imperdiet sed euismod. Viverra maecenas accumsan lacus vel facilisis. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Libero enim sed faucibus turpis in eu. Interdum consectetur libero id faucibus nisl tincidunt. Sociis natoque penatibus et magnis dis parturient. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Dignissim sodales ut eu sem integer. Blandit massa enim nec dui. Egestas integer eget aliquet nibh praesent tristique. Tellus at urna condimentum mattis pellentesque id. Dui ut ornare lectus sit amet est placerat. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Risus commodo viverra maecenas accumsan lacus vel.

This is just an example of content

      Active Page: 1
      Total data: 60
      Per page: 15

Row

Row No Gutters

Row Align Items End

Row Justify Content Center

Row Align Content Center

Dividers

            
              <is-divider></is-divider>
              <is-divider text="you are awesome" align-text="left" color="primary"></is-divider>
              <is-divider text="really?" align-text="center" color="success"/></is-divider>
              <is-divider text="always has been ;)" align-text="right" color="error"/></is-divider>

Button

Disabled

Open Modal

Link

Link Disabled

              
                <is-button type="button">Button</is-button>
                <is-button type="button" color="primary" disabled>Disabled</is-button>
                <is-button type="button" onClick="openModal()" color="primary">Open Modal</is-button>
                <is-button href="https://www.google.com" color="secondary" target="_blank">Link</is-button>
                <is-button href="https://www.google.com" color="secondary" target="_blank" disabled>Link Disabled</is-button>

                <is-button type="reset">Reset</is-button>
                <is-button color="success" type="submit">Submit</is-button>

Default

Primary

Success

Warning

Error

              
                <is-button>Default</is-button>
                <is-button color="primary">Primary</is-button>
                <is-button color="success">Success</is-button>
                <is-button color="warning">Warning</is-button>
                <is-button color="error">Error</is-button>

Small

Default

Medium

Large

              
                <is-button size="small">Small</is-button>
                <is-button>Default</is-button>
                <is-button size="medium">Medium</is-button>
                <is-button size="large">Large</is-button>

Default

Medium

              
                <is-button color="primary">Default</is-button>
                <is-button color="secondary" display="fullwidth">Medium</is-button>

Round

Small Round

Large Round

              
                <is-button color="success">Round</is-button>
                <is-button color="warning" shape="round">Small Round</is-button>
                <is-button color="primary" shape="round" size="large">Large Round</is-button>