Lists
A list can be used to show multiple related options or links.
Spaced Lists
These are examples of spaced lists which have default, number, lower
roman,lower case alphabet and no-style as bullet styling
- List Item-1
- List Item-2
- List Item-3
- List Item-4
- List Item-1
- List Item-2
- List Item-3
- List Item-4
- List Item-1
- List Item-2
- List Item-3
- List Item-4
- List Item-1
- List Item-2
- List Item-3
- List Item-4
- List Item-1
- List Item-2
- List Item-3
- List Item-4
Code snippet:
Use class scl-list-default for bullets or
scl-list-numbers for numbers or
scl-list-roman for roman or
scl-list-alphabet for lower case
alphabet or scl-list-none for no
bullet style, for styling and use
class
scl-list-item for styling list
items as per your requirement.
Stacked Lists
Stacked lists can be used to give notifications that can be stacked
one on top of another.
-
This is a primary notification
-
This is a success notification
-
This is a warning notification
-
This is an error notification
Code snippet:
Use class scl-stacked-item for default
styling of all lists and
scl-primary for primary colored
notification scl-success for
successful notification
scl-warning for warning
notification or scl-error for
error styling as per your requirement and use a desired icon.