<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h3
>
Onsen UI CSS Component
Material List with Checkboxes
</
h3
>
<
ul
class
=
"list list--material"
>
<
li
class
=
"list-item list-item--material"
>
<
div
class="list-item__left
list-item--material__left">
<
label
class
=
"checkbox checkbox--material"
>
<
input
type
=
"checkbox"
id
=
"cb"
class="checkbox__input
checkbox--material__input">
<
div
class="checkbox__checkmark
checkbox--material__checkmark">
</
div
>
</
label
>
</
div
>
<
label
for
=
"cb"
class="list-item__center
list-item--material__center">
<
div
class="list-item__title
list-item--material__title">
GeeksforGeeks
</
div
>
<
div
class="list-item__subtitle
list-item--material__subtitle">
This is subtitle 1
</
div
>
</
label
>
</
li
>
<
li
class
=
"list-item list-item--material"
>
<
div
class="list-item__left
list-item--material__left">
<
label
class
=
"checkbox checkbox--material"
>
<
input
type
=
"checkbox"
id
=
"cb2"
class="checkbox__input
checkbox--material__input"
checked disabled>
<
div
class="checkbox__checkmark
checkbox--material__checkmark">
</
div
>
</
label
>
</
div
>
<
label
for
=
"cb2"
class="list-item__center
list-item--material__center">
<
div
class="list-item__title
list-item--material__title">
Disabled checkbox
</
div
>
<
div
class="list-item__subtitle
list-item--material__subtitle">
This is subtitle 2
</
div
>
</
label
>
</
li
>
</
ul
>
</
center
>
</
body
>
</
html
>