gadmin
Version:
Free Bootstrap 4 Gentelella inspired admin template
68 lines (67 loc) • 13.8 kB
JSON
[
{
"title": "Alerts",
"link": "alerts",
"html": "<div class=\"alert alert-primary\" role=\"alert\">This is a primary alert—check it out!</div> <div class=\"alert alert-secondary\" role=\"alert\">This is a secondary alert—check it out!</div> <div class=\"alert alert-success\" role=\"alert\">This is a success alert—check it out!</div> <div class=\"alert alert-danger\" role=\"alert\">This is a danger alert—check it out!</div> <div class=\"alert alert-warning\" role=\"alert\">This is a warning alert—check it out!</div> <div class=\"alert alert-info\" role=\"alert\">This is a info alert—check it out!</div> <div class=\"alert alert-light\" role=\"alert\">This is a light alert—check it out!</div> <div class=\"alert alert-dark\" role=\"alert\">This is a dark alert—check it out!</div>"
},
{
"title": "Badges",
"link": "badge",
"html": "<span class=\"badge badge-primary\">Primary</span> <span class=\"badge badge-secondary\">Secondary</span> <span class=\"badge badge-success\">Success</span> <span class=\"badge badge-danger\">Danger</span> <span class=\"badge badge-warning\">Warning</span> <span class=\"badge badge-info\">Info</span> <span class=\"badge badge-light\">Light</span> <span class=\"badge badge-dark\">Dark</span>"
},
{
"title": "Breadcrumbs",
"link": "breadcrumb",
"html": "<nav aria-label=\"breadcrumb\"> <ol class=\"breadcrumb\"> <li class=\"breadcrumb-item active\" aria-current=\"page\">Home</li> </ol> </nav> <nav aria-label=\"breadcrumb\"> <ol class=\"breadcrumb\"> <li class=\"breadcrumb-item\"> <a href=\"#\">Home</a> </li> <li class=\"breadcrumb-item active\" aria-current=\"page\">Library</li> </ol> </nav> <nav aria-label=\"breadcrumb\"> <ol class=\"breadcrumb\"> <li class=\"breadcrumb-item\"> <a href=\"#\">Home</a> </li> <li class=\"breadcrumb-item\"> <a href=\"#\">Library</a> </li> <li class=\"breadcrumb-item active\" aria-current=\"page\">Data</li> </ol> </nav>"
},
{
"title": "Buttons",
"link": "buttons",
"html": "<button type=\"button\" class=\"btn btn-primary\">Primary</button> <button type=\"button\" class=\"btn btn-secondary\">Secondary</button> <button type=\"button\" class=\"btn btn-success\">Success</button> <button type=\"button\" class=\"btn btn-danger\">Danger</button> <button type=\"button\" class=\"btn btn-warning\">Warning</button> <button type=\"button\" class=\"btn btn-info\">Info</button> <button type=\"button\" class=\"btn btn-light\">Light</button> <button type=\"button\" class=\"btn btn-dark\">Dark</button> <button type=\"button\" class=\"btn btn-link\">Link</button>"
},
{
"title": "Button group",
"link": "button-group",
"html": "<div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\"> <button type=\"button\" class=\"btn btn-secondary\">Left</button> <button type=\"button\" class=\"btn btn-secondary\">Middle</button> <button type=\"button\" class=\"btn btn-secondary\">Right</button> </div>"
},
{
"title": "Cards",
"link": "card",
"html": "<div class=\"card\" style=\"width: 18rem;\"> <img class=\"card-img-top\" data-src=\"holder.js/100px180/\" alt=\"100%x180\" style=\"height: 180px; width: 100%; display: block;\" src=\"data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1672cde27ba%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1672cde27ba%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.6%22%3E%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\" data-holder-rendered=\"true\"> <div class=\"card-body\"> <h5 class=\"card-title\">Card title</h5> <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href=\"#\" class=\"btn btn-primary\">Go somewhere</a> </div> </div>"
},
{
"title": "Carousel",
"link": "carousel",
"html": "<div id=\"carouselExampleControls\" class=\"carousel slide\" data-ride=\"carousel\"> <div class=\"carousel-inner\"> <div class=\"carousel-item active carousel-item-left\"> <svg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w-100\" width=\"800\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\" role=\"img\" aria-label=\"Placeholder: First slide\"> <title>Placeholder</title> <rect width=\"100%\" height=\"100%\" fill=\"#777\"> </rect> <text x=\"50%\" y=\"50%\" fill=\"#555\" dy=\".3em\">First slide</text> </svg> </div> <div class=\"carousel-item carousel-item-next carousel-item-left\"> <svg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w-100\" width=\"800\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\" role=\"img\" aria-label=\"Placeholder: Second slide\"> <title>Placeholder</title> <rect width=\"100%\" height=\"100%\" fill=\"#666\"> </rect> <text x=\"50%\" y=\"50%\" fill=\"#444\" dy=\".3em\">Second slide</text> </svg> </div> <div class=\"carousel-item\"> <svg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w-100\" width=\"800\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\" role=\"img\" aria-label=\"Placeholder: Third slide\"> <title>Placeholder</title> <rect width=\"100%\" height=\"100%\" fill=\"#555\"> </rect> <text x=\"50%\" y=\"50%\" fill=\"#333\" dy=\".3em\">Third slide</text> </svg> </div> </div> <a class=\"carousel-control-prev\" href=\"#carouselExampleControls\" role=\"button\" data-slide=\"prev\"> <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"> </span> <span class=\"sr-only\">Previous</span> </a> <a class=\"carousel-control-next\" href=\"#carouselExampleControls\" role=\"button\" data-slide=\"next\"> <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"> </span> <span class=\"sr-only\">Next</span> </a> </div>"
},
{
"title": "Collapse",
"link": "collapse",
"html": "<p> <a class=\"btn btn-primary\" data-toggle=\"collapse\" href=\"#collapseExample\" role=\"button\" aria-expanded=\"false\" aria-controls=\"collapseExample\"> Link with href </a> <button class=\"btn btn-primary\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapseExample\" aria-expanded=\"false\" aria-controls=\"collapseExample\"> Button with data-target </button> </p> <div class=\"collapse\" id=\"collapseExample\"> <div class=\"card card-body\"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div>"
},
{
"title": "Dropdowns",
"link": "dropdowns",
"html": "<div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Primary</button> <div class=\"dropdown-menu\"> <a class=\"dropdown-item\" href=\"#\">Action</a> <a class=\"dropdown-item\" href=\"#\">Another action</a> <a class=\"dropdown-item\" href=\"#\">Something else here</a> <div class=\"dropdown-divider\"> </div> <a class=\"dropdown-item\" href=\"#\">Separated link</a> </div> </div> <!-- /btn-group --> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Secondary</button> <div class=\"dropdown-menu\"> <a class=\"dropdown-item\" href=\"#\">Action</a> <a class=\"dropdown-item\" href=\"#\">Another action</a> <a class=\"dropdown-item\" href=\"#\">Something else here</a> <div class=\"dropdown-divider\"> </div> <a class=\"dropdown-item\" href=\"#\">Separated link</a> </div> </div> <!-- /btn-group --> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-success dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Success</button> <div class=\"dropdown-menu\"> <a class=\"dropdown-item\" href=\"#\">Action</a> <a class=\"dropdown-item\" href=\"#\">Another action</a> <a class=\"dropdown-item\" href=\"#\">Something else here</a> <div class=\"dropdown-divider\"> </div> <a class=\"dropdown-item\" href=\"#\">Separated link</a> </div> </div> <!-- /btn-group --> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-info dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Info</button> <div class=\"dropdown-menu\"> <a class=\"dropdown-item\" href=\"#\">Action</a> <a class=\"dropdown-item\" href=\"#\">Another action</a> <a class=\"dropdown-item\" href=\"#\">Something else here</a> <div class=\"dropdown-divider\"> </div> <a class=\"dropdown-item\" href=\"#\">Separated link</a> </div> </div> <!-- /btn-group --> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-warning dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Warning</button> <div class=\"dropdown-menu\"> <a class=\"dropdown-item\" href=\"#\">Action</a> <a class=\"dropdown-item\" href=\"#\">Another action</a> <a class=\"dropdown-item\" href=\"#\">Something else here</a> <div class=\"dropdown-divider\"> </div> <a class=\"dropdown-item\" href=\"#\">Separated link</a> </div> </div> <!-- /btn-group --> <div class=\"btn-group\"> <button type=\"button\" class=\"btn btn-danger dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Danger</button> <div class=\"dropdown-menu\"> <a class=\"dropdown-item\" href=\"#\">Action</a> <a class=\"dropdown-item\" href=\"#\">Another action</a> <a class=\"dropdown-item\" href=\"#\">Something else here</a> <div class=\"dropdown-divider\"> </div> <a class=\"dropdown-item\" href=\"#\">Separated link</a> </div> </div> <!-- /btn-group -->"
},
{
"title": "Forms",
"link": "forms",
"html": "<form data-op-form-id=\"0\"> <div class=\"form-group\"> <label for=\"exampleInputEmail1\">Email address</label> <com-1password-op-button id=\"com-1password-op-button\" data-op-target=\"0\" data-state=\"locked\" class=\"op-large\" style=\" margin-left: 706.21875px !important; margin-top: 39px !important; background-image: url(chrome-extension://aeblfdkhhhdcdjpifhhbdiojplfjncoa/images/icons/app_icon-light_bg-color-locked-16.svg) !important; \"></com-1password-op-button><input type=\"email\" class=\"form-control\" id=\"exampleInputEmail1\" aria-describedby=\"emailHelp\" placeholder=\"Enter email\" data-op-id=\"0\"> <small id=\"emailHelp\" class=\"form-text text-muted\">We'll never share your email with anyone else.</small> </div> <div class=\"form-group\"> <label for=\"exampleInputPassword1\">Password</label> <input type=\"password\" class=\"form-control\" id=\"exampleInputPassword1\" placeholder=\"Password\"> </div> <div class=\"form-group form-check\"> <input type=\"checkbox\" class=\"form-check-input\" id=\"exampleCheck1\"> <label class=\"form-check-label\" for=\"exampleCheck1\">Check me out</label> </div> <button type=\"submit\" class=\"btn btn-primary\">Submit</button> </form>"
},
{
"title": "Input group",
"link": "input-group",
"html": "<div class=\"input-group mb-3\"> <div class=\"input-group-prepend\"> <span class=\"input-group-text\" id=\"basic-addon1\">@</span> </div> <input type=\"text\" class=\"form-control\" placeholder=\"Username\" aria-label=\"Username\" aria-describedby=\"basic-addon1\"> </div> <div class=\"input-group mb-3\"> <input type=\"text\" class=\"form-control\" placeholder=\"Recipient's username\" aria-label=\"Recipient's username\" aria-describedby=\"basic-addon2\"> <div class=\"input-group-append\"> <span class=\"input-group-text\" id=\"basic-addon2\">@example.com</span> </div> </div> <label for=\"basic-url\">Your vanity URL</label> <div class=\"input-group mb-3\"> <div class=\"input-group-prepend\"> <span class=\"input-group-text\" id=\"basic-addon3\">https://example.com/users/</span> </div> <input type=\"text\" class=\"form-control\" id=\"basic-url\" aria-describedby=\"basic-addon3\"> </div> <div class=\"input-group mb-3\"> <div class=\"input-group-prepend\"> <span class=\"input-group-text\">$</span> </div> <input type=\"text\" class=\"form-control\" aria-label=\"Amount (to the nearest dollar)\"> <div class=\"input-group-append\"> <span class=\"input-group-text\">.00</span> </div> </div> <div class=\"input-group\"> <div class=\"input-group-prepend\"> <span class=\"input-group-text\">With textarea</span> </div> <textarea class=\"form-control\" aria-label=\"With textarea\"> </textarea> </div>"
},
{
"title": "Jumbotron",
"link": "jumbotron",
"html": "<div class=\"jumbotron\"> <h1 class=\"display-4\">Hello, world!</h1> <p class=\"lead\">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class=\"my-4\"> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <a class=\"btn btn-primary btn-lg\" href=\"#\" role=\"button\">Learn more</a> </div>"
},
{
"title": "List group",
"link": "list-group",
"html": "<ul class=\"list-group\"> <li class=\"list-group-item\">Cras justo odio</li> <li class=\"list-group-item\">Dapibus ac facilisis in</li> <li class=\"list-group-item\">Morbi leo risus</li> <li class=\"list-group-item\">Porta ac consectetur ac</li> <li class=\"list-group-item\">Vestibulum at eros</li> </ul>"
}
]