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.
List 2x
 
 
 
Pick some
 
 
 Get Items Disable Select 1 Disable Select 2 
 
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. 
 
Read more
  
Important!
 
This is just an example of content
 
  
15
 
 
Active Page: 1
Total data: 60
Per page: 15
  
Row
  Item 1 Item 2 Item 3    
Row No Gutters
  Item 1 Item 2 Item 3    
Row Align Items End
  Item 1 Item 2 Item 3    
Row Justify Content Center
  Item 1 Item 2 Item 3    
Row Align Content Center
  Item 1 Item 2 Item 3    
 
 
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
  
 
 Button Disabled Open Modal Link Link Disabled  
 
 
 
Form Example
  Reset Submit 
 
 
 
              <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>
            
 
 
 
 
   
 
 
Breadcrumb
  
 
Introduction
  Home Hot News Anti-Asian Violence And Discrimination  
 
              <is-breadcrumb>
  <is-breadcrumb-item href="https://is-web-component.isnur.com/" target="_blank">Home</is-breadcrumb-item>
  <is-breadcrumb-item href="/hot-news">Hot News</is-breadcrumb-item>
  <is-breadcrumb-item active="true">Anti-Asian Violence And Discrimination</is-breadcrumb-item>
</is-breadcrumb>
            
 
 
  
 
Align
 
  Home Hot News Anti-Asian Violence And Discrimination  
 
  Home Hot News Anti-Asian Violence And Discrimination  
 
  Home Hot News Anti-Asian Violence And Discrimination  
 
 
              <is-breadcrumb>
  <is-breadcrumb-item href="https://is-web-component.isnur.com/" target="_blank">Home</is-breadcrumb-item>
  <is-breadcrumb-item href="/hot-news">Hot News</is-breadcrumb-item>
  <is-breadcrumb-item active="true">Anti-Asian Violence And Discrimination</is-breadcrumb-item>
</is-breadcrumb>

<is-breadcrumb align="center">
  <is-breadcrumb-item href="https://is-web-component.isnur.com/" target="_blank">Home</is-breadcrumb-item>
  <is-breadcrumb-item href="/hot-news">Hot News</is-breadcrumb-item>
  <is-breadcrumb-item active="true">Anti-Asian Violence And Discrimination</is-breadcrumb-item>
</is-breadcrumb>

<is-breadcrumb align="right">
  <is-breadcrumb-item href="https://is-web-component.isnur.com/" target="_blank">Home</is-breadcrumb-item>
  <is-breadcrumb-item href="/hot-news">Hot News</is-breadcrumb-item>
  <is-breadcrumb-item active="true">Anti-Asian Violence And Discrimination</is-breadcrumb-item>
</is-breadcrumb>
            
 
 
  
 
Sizes
 
  Home Hot News Anti-Asian Violence And Discrimination  
 
  Home Hot News Anti-Asian Violence And Discrimination  
 
  Home Hot News Anti-Asian Violence And Discrimination  
 
 
              <is-breadcrumb size="small">
  <is-breadcrumb-item href="https://is-web-component.isnur.com/" target="_blank">Home</is-breadcrumb-item>
  <is-breadcrumb-item href="/hot-news">Hot News</is-breadcrumb-item>
  <is-breadcrumb-item active="true">Anti-Asian Violence And Discrimination</is-breadcrumb-item>
</is-breadcrumb>

<is-breadcrumb size="medium">
  <is-breadcrumb-item href="https://is-web-component.isnur.com/" target="_blank">Home</is-breadcrumb-item>
  <is-breadcrumb-item href="/hot-news">Hot News</is-breadcrumb-item>
  <is-breadcrumb-item active="true">Anti-Asian Violence And Discrimination</is-breadcrumb-item>
</is-breadcrumb>

<is-breadcrumb size="large">
  <is-breadcrumb-item href="https://is-web-component.isnur.com/" target="_blank">Home</is-breadcrumb-item>
  <is-breadcrumb-item href="/hot-news">Hot News</is-breadcrumb-item>
  <is-breadcrumb-item active="true">Anti-Asian Violence And Discrimination</is-breadcrumb-item>
</is-breadcrumb>
            
 
 
  
 
Separators
 
  Home Hot News Anti-Asian Violence And Discrimination  
 
  Home Hot News Anti-Asian Violence And Discrimination  
 
  Home Hot News Anti-Asian Violence And Discrimination  
 
 
              <is-breadcrumb separator="slash">
  <is-breadcrumb-item href="https://is-web-component.isnur.com/" target="_blank">Home</is-breadcrumb-item>
  <is-breadcrumb-item href="/hot-news">Hot News</is-breadcrumb-item>
  <is-breadcrumb-item active="true">Anti-Asian Violence And Discrimination</is-breadcrumb-item>
</is-breadcrumb>

<is-breadcrumb separator="dot" align="medium">
  <is-breadcrumb-item href="https://is-web-component.isnur.com/" target="_blank">Home</is-breadcrumb-item>
  <is-breadcrumb-item href="/hot-news">Hot News</is-breadcrumb-item>
  <is-breadcrumb-item active="true">Anti-Asian Violence And Discrimination</is-breadcrumb-item>
</is-breadcrumb>

<is-breadcrumb separator="arrow" align="large">
  <is-breadcrumb-item href="https://is-web-component.isnur.com/" target="_blank">Home</is-breadcrumb-item>
  <is-breadcrumb-item href="/hot-news">Hot News</is-breadcrumb-item>
  <is-breadcrumb-item active="true">Anti-Asian Violence And Discrimination</is-breadcrumb-item>
</is-breadcrumb>
            
 
 
 
 
   
 
Card
  
 
Introduction
 
 
   
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
   Lorem Lorem   
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
    
Street Fighter
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
 
 
            <is-card>
  <is-card-body>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi ...</div>
  </is-card-body>
</is-card>

<is-card>
  <is-card-header>
    <is-card-title>Lorem Lorem</is-card-title>
  </is-card-header>

  <is-card-body>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi ...</div>
  </is-card-body>
</is-card>

<is-card>
  <is-card-image src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusant ...?</div>
  </is-card-body>
</is-card>
          
 
 
  
 
Colors
 
 You can use a color attribute to change current card background color,
          exists colors are: `primary`, `secondary`, `success`, `error`, `dark`, `white`, and `default` 
 
 
   
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
   Lorem Lorem   
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
    
Street Fighter
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
 
 
            <is-card color="primary">
  <is-card-body>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi ...</div>
  </is-card-body>
</is-card>

<is-card color="secondary">
  <is-card-header>
    <is-card-title>Lorem Lorem</is-card-title>
  </is-card-header>

  <is-card-body>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi ...</div>
  </is-card-body>
</is-card>

<is-card color="success">
  <is-card-image src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusant ...?</div>
  </is-card-body>
</is-card>
          
 
 
  
 
Images
 
 You can use a ratio attribute to change size of image,
          ratios are supported: `1x1`, `5x4`, `5x3`, `3x2`, `16x9`, `2x1`, `3x1` 
 
 
    
Street Fighter
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
    
Street Fighter
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
    
Street Fighter wow
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
 
 
            <is-card>
  <is-card-image src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter</div>
    <div>Lorem ipsum dolor sit amet, consectetur ..., vitae?</div>
  </is-card-body>
</is-card>

<is-card>
  <is-card-image ratio="3x2" src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter</div>
    <div>Lorem ipsum dolor sit amet, consectetur ..., vitae?</div>
  </is-card-body>
</is-card>

<is-card>
  <is-card-image ratio="2x1" src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter</div>
    <div>Lorem ipsum dolor sit amet, consectetur ..., vitae?</div>
  </is-card-body>
</is-card>
          
 
  
Images: Object Fit
 
 You can use a `object` attribute to specify how image should be resized.
          objects are supported: `fill`, `cover`, `contain`, `scale-down`, `none` 
 
 
    
Street Fighter wow
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
    
Street Fighter wow
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
    
Street Fighter wow
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
 
 
            <is-card>
  <is-card-image object="fill" ratio="2x1" src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter wow</div>
    <div>Lorem ipsum dolor sit amet, consectetur ..., vitae?</div>
  </is-card-body>
</is-card>

<is-card>
  <is-card-image object="cover" ratio="2x1" src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter wow</div>
    <div>Lorem ipsum dolor sit amet, consectetur ..., vitae?</div>
  </is-card-body>
</is-card>

<is-card>
  <is-card-image object="contain" ratio="2x1" src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter wow</div>
    <div>Lorem ipsum dolor sit amet, consectetur ..., vitae?</div>
  </is-card-body>
</is-card>
          
 
 
  
 
Link
 
 add href attribute to make card support click and open / redirect to new location. 
 
 
    
Street Fighter
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
    
Street Fighter
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
    
Street Fighter
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aut, beatae dolorum
                  fuga
                  ipsum iusto nemo, nostrum placeat quo reiciendis reprehenderit sed similique soluta tenetur ut veniam
                  veritatis, vitae?
   
 
 
 
            <is-card href="/home">
  <is-card-image src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusant ...?</div>
  </is-card-body>
</is-card>

<is-card href="https://is-web-component.isnur.com/">
  <is-card-image src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusant ...?</div>
  </is-card-body>
</is-card>

<is-card href="https://is-web-component.isnur.com/" target="_blank">
  <is-card-image src="https://i.pinimg.com/originals/bd/5a/7a/bd5a7af0f81b086477d25fb1be6a76f8.jpg">
  </is-card-image>

  <is-card-body>
    <div class="h2">Street Fighter</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusant ...?</div>
  </is-card-body>
</is-card>