Components
Badges
Standard
PrimarySecondarySuccessErrorLightDark110Pill
Primary110Pastille
Breadcrumb
Toggle linked data
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Homepage",
"item": "https://........................"
}, {
"@type": "ListItem",
"position": 2,
"name": "Brand",
"item": "https://........................"
},{
"@type": "ListItem",
"position": 3,
"name": "Category",
"item": "https://........................"
},{
"@type": "ListItem",
"position": 4,
"name": "Product",
"item": "https://........................"
}]
}
Buttons
Plain
Base linkExpanded
Colors
Outline
Disabled
Base LinkRounded
With icons
ButtonSizes
Loader
Notes :
- RGAA Pattern for progressBar : disic.github.io.
Default
With overlay
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quis, ab magni nostrum. Quidem id ipsum recusandae inventore quos accusamus dolorum, eos enim consequuntur! Vitae id amet ullam qui corrupti.
With overlay & white version
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quis, ab magni nostrum. Quidem id ipsum recusandae inventore quos accusamus dolorum, eos enim consequuntur! Vitae id amet ullam qui corrupti.
Pagination
Panels
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio sequi nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio sequi nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio sequi nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio sequi nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio sequi nihil.
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio sequi nihil qui assumenda, excepturi mollitia harum magni amet ut ipsa expedita minima ea, rem laudantium reiciendis reprehenderit pariatur in.
Nihil qui assumenda, excepturi mollitia harum magni amet ut ipsa expedita minima ea rem laudantium reiciendis, reprehenderit.
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio sequi nihil qui assumenda, excepturi mollitia harum magni amet ut ipsa expedita minima ea, rem laudantium reiciendis reprehenderit pariatur in.
Nihil qui assumenda, excepturi mollitia harum magni amet ut ipsa expedita minima ea rem laudantium reiciendis, reprehenderit.