| ID | Name | Description | Dificulty | Needs JS? |
|---|---|---|---|---|
| Basic | ||||
| Tag Enhancements | ||||
| TE01 | Responsive image (fluid) | Here | ⭐ | [ ] |
| TE02 | Avatar - Circular image | Here | ⭐ | [ ] |
| TE03 | Style Anchor Active and Hover states | Here | ⭐⭐ | [ ] |
| TE04 | Text Inputs with animations on error messages | Here | ⭐⭐⭐ | [ ] |
| TE05 | Style Details content | Here | ⭐⭐⭐ | [ ] |
| TE06 | Style Select options | Here | ⭐⭐⭐ | [ ] |
| TE07 | Button with animation for click event | Here | ⭐⭐⭐⭐ | [x] |
| TE08 | Button and anchor with animated icon | Here | ⭐⭐⭐⭐ | [ ] |
| TE09 | Checkbox and radio with animations for changed event | Here | ⭐⭐⭐⭐⭐ | [x] |
| TE10 | Details with animations on open event | Here | ⭐⭐⭐⭐⭐ | [x] |
| Components | ||||
| CO01 | Badge | Here | ⭐ | [ ] |
| CO02 | Table with row hover | Here | ⭐ | [ ] |
| CO03 | FAB/Circular Button with Icon | Here | ⭐⭐ | [ ] |
| CO04 | Navbar with sections | Here | ⭐⭐⭐ | [ ] |
| CO05 | Responsive Navbar with hamburguer button in mobile | Here | ⭐⭐⭐⭐ | [x] |
| CO06 | Search Input with TypeAhead preview | Here | ⭐⭐⭐⭐ | [x] |
| CO07 | Loading/spinner/backdrop | Here | ⭐⭐⭐⭐ | [ ] |
| CO08 | Collapse/accordion | Here | ⭐⭐⭐⭐ | [x] |
| CO09 | Modal/Dialog | Here | ⭐⭐⭐⭐ | [x] |
| CO10 | Uncontrolled floating notification/toasts | Here | ⭐⭐⭐⭐ | [x] |
| CO11 | Dropdown menu with animations on open event | Here | ⭐⭐⭐⭐ | [x] |
| CO12 | Basic images carrousel with controls | Here | ⭐⭐⭐⭐ | [x] |
| CO13 | Tabs menu and containers | Here | ⭐⭐⭐⭐ | [x] |
| CO14 | Floating Sidenav / Drawer / Snackbar | Here | ⭐⭐⭐⭐ | [x] |
| CO15 | Collapsible Sidenav | Here | ⭐⭐⭐⭐ | [x] |
| CO16 | Popover and tooltips | Here | ⭐⭐⭐⭐ | [x] |
| CO17 | Button with local menu | Here | ⭐⭐⭐⭐ | [x] |
| CO18 | Switch | Here | ⭐⭐⭐⭐ | [ ] |
| CO19 | Switch with animation | Here | ⭐⭐⭐⭐ | [ ] |
| CO20 | Tree menu | Here | ⭐⭐⭐⭐⭐ | [x] |
| CO21 | Stepper with controls | Here | ⭐⭐⭐⭐⭐ | [x] |
| Layout | ||||
| LA01 | Paper/card effect container | Here | ⭐ | [ ] |
| LA02 | Variable Column widths | Here | ⭐⭐ | [ ] |
| LA03 | Container with width's threshold | Here | ⭐⭐ | [ ] |
| LA04 | Center content horizontally | Here | ⭐⭐ | [ ] |
| LA05 | Center absolutelly | Here | ⭐⭐ | [ ] |
| LA06 | Center content vertically | Here | ⭐⭐ | [ ] |
| LA07 | Children takes all the viewport's width | Here | ⭐⭐ | [ ] |
| LA08 | Children takes all the viewport's height | Here | ⭐⭐ | [ ] |
| LA09 | Children takes a percentage of parent's width | Here | ⭐⭐ | [ ] |
| LA10 | Children takes a percentage of parent's height | Here | ⭐⭐ | [ ] |
| LA11 | Two Children takes diferent percentage of parent's width | Here | ⭐⭐⭐ | [ ] |
| LA12 | Two Children takes diferent percentage of parent's height | Here | ⭐⭐⭐ | [ ] |
ID's meaning:
- BAXX: Basic
- LAXX: Layout
- TEXX: HTML Tag Enhancements
- COXX: Components