@coreui/ajax

<template> <div class="animated fadeIn"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="card"> <div class="card-header"> Card title </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card"> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> <div class="card-footer">Card footer</div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card"> <div class="card-header"> <i class="fa fa-check"></i>Card with icon </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card"> <div class="card-header"> Card with switch <label class="switch switch-sm switch-text switch-info float-xs-right mb-0"> <input type="checkbox" class="switch-input"> <span class="switch-label" data-on="On" data-off="Off"></span> <span class="switch-handle"></span> </label> </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card"> <div class="card-header"> Card with label <span class="tag tag-success float-xs-right">Success</span> </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card"> <div class="card-header"> Card with label <span class="tag tag-pill tag-danger float-xs-right">42</span> </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  </div>  <div class="row"> <div class="col-sm-6 col-md-4"> <div class="card card-outline-primary"> <div class="card-header"> Card outline </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-outline-secondary"> <div class="card-header"> Card outline </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-outline-success"> <div class="card-header"> Card outline </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-outline-info"> <div class="card-header"> Card outline </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-outline-warning"> <div class="card-header"> Card outline </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-outline-danger"> <div class="card-header"> Card outline </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  </div>  <div class="row"> <div class="col-sm-6 col-md-4"> <div class="card card-accent-primary"> <div class="card-header"> Card with accent </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-accent-secondary"> <div class="card-header"> Card with accent </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-accent-success"> <div class="card-header"> Card with accent </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-accent-info"> <div class="card-header"> Card with accent </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-accent-warning"> <div class="card-header"> Card with accent </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-accent-danger"> <div class="card-header"> Card with accent </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  </div>  <div class="row"> <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-primary text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-success text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-info text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-warning text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-danger text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-primary text-xs-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> </blockquote> </div> </div> </div>  </div>  <div class="row"> <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-primary"> <div class="card-header"> Card title </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-success"> <div class="card-header"> Card title </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-info"> <div class="card-header"> Card title </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-warning"> <div class="card-header"> Card title </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  <div class="col-sm-6 col-md-4"> <div class="card card-inverse card-danger"> <div class="card-header"> Card title </div> <div class="card-block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </div>  </div>  </div> </template>