ALERTS
ANIMATIONS
ACCORDIAN
BORDER
BUTTON
BADGE
CARDS
COLORS
DROPDOWN
EFFECTS
FONT
FORM
ICON
IMAGE
LAYOUT
LIST
MARGIN
MODAL
NAVIGATION
NOTES
PROGRESS BAR
PAGINATION
PADDING
QUOTES
ROUND
SLIDESHOW
TEXT
TABS
TABLE
TAGS
HOW TO ?

ANIMATIONS


Main 1. w3-animate-top 2. w3-animate-bottom 3. w3-animate-left 4. w3-animate-right 5. w3-animate-opacity

6. w3-animate-zoom 7. w3-animate-fading 8. w3-spin 9. Multi Animations










ACCORDIAN


1. Main 2. Accordian 3. Accordian Buttons Block 4. Accordian Black HoverGrey 5. Accordian Width % Controlled

6. Accordian+Links/menu 7. Accordian List 8. Accordian in Sidebar 9. Accordian Animated










BORDER


1. Main 2. w3-border 3. w3-border-top 4. w3-border-right 5. w3-border-bottom 6. w3-border-left 7. w3-border-0

8. w3-border-red 9. w3-hover-border-red 10. w3-bottombar 11. w3-leftbar 12. w3-rightbar 13. w3-topbar

14. rounded borders 15. on hover bars 16. on hover thick borders










BUTTON


1 Main 2 w3-btn 3 w3-button 4 w3-bar w3-button 5 w3-bar w3-bar-item 6 Coloured Bar Item 7 w3-bar centered

8 w3-bar withButtonsAndInput 9 w3-bar textSize S M L XL XXL 10 w3-bar padding sizes 11 w3-bar with Icons

12 w3-bar hover colors links 13 w3-bar black hover colors links 14 w3-bar responsive bar 15 w3-bar bar-block on mob

16 w3-bar bar items float right 17 w3-bar bordered inner border card effect 18 w3-bar 1 highlightedLink 19 w3-bar black text Highlighted

20 w3-bar Fixed-on-top Coloured 21 w3-bar Fixed-on-bottom Coloured 22 w3-bar MobileMenu 23 Menu hoverBarBottom hoverBorderThick

24 w3-bar-block 25 w3-bar-block hover color 26 w3-bar-block blackBar hover color 27 w3-show-inline-block 28 Navigation Bars coloured

29 w3-sidebar 30 w3-sidebar Fills Page Partially 31 w3-sidebar Fills Page 100% 32 w3-sidebar pushPageToRight

33 w3-sidebar onPageRight 34 w3-sidebar On Right+Left toggleOpenClose 35 w3-sidebar Coloured 36 w3-sidebar Bordered

37 w3-sidebar Border+InnerBorder 38 w3-sidebar Card Effect 39 w3-sidebar hoverColourLinks 40 w3-sidebar hoverColourLinkText

41 w3-sidebar with Icons 42 w3-sidebar text S M L XL 43 w3-sidebar paddingSizes 44 w3-sidebar withDropdown

45 w3-sidebar withAccordian 46 w3-sidebar AnimateLeft and More 47 w3-sidebar Overlay opacity 48 w3-sidebar withImage and content

49 w3-block 50 Block multiple size 51 w3-ripple 52 w3-disabled 53 Coloured Buttons 54 Colour Buttons on hover

55 Round Buttons 56 Small to large buttons 57 Buttons Bordered 58 Buttons Bold Italics 59 Buttons Padded 60 Buttons Left and Right










BADGE


1. Main 2. w3-badge 3. Badges Coloured 4. Badges in buttons 5. Badges in Lists 6. Badges in Table 7. Badge Sizes

8. Badge Perfect Circle










CARDS


1. Main 2. w3-card 3. w3-card-2. 4. w3-card-4. 5. Card Photo 6. Card Container 7. Card for CEO 8. Card for Executive

9. Card for Marketing Brochoure 10. w3-hover-shadow










COLORS


1 w3-red 2 Color Text 3 Color Material 4 Color Flat UI C 5 Color Metro UI C 6 Color Win 8 C 7 Color IOS C 8 COLOR LIBRARIES

9 US Highway Colors C 10 US Safety Colors C 11 European Signal Colors C 12 Fashion Colors Autumn 2019 / Winter 2020 C

13 Fashion Colors Spring 2019 C 14 Fashion Colors 2018 C 15 Fashion Colors 2017 C 16 Vivid Colors C 17 Food Colors C

18 Camouflage Colors C 19 Color Themes 20 Color Ball 21 Colour Generator











1. Main 2. w3-dropdown-hover 3. Bar+Dropdown BarBlock-on-Mob 4. Bar+Dropdown 5. Bar+Dropdown DropdownHorizontal

6. Dropdown Click 7. w3-dropdown-click 8. Dropdown Image 9. Dropdown Card 10. Dropdown Animated 11. Dropdown Right Float










EFFECTS


1 Main 2 Text on Image 3 Cool Hover Effects 4 Toggle Hide Show










FONT


1 w3-tiny. 2 w3-small. 3 w3-medium. 4 w3-large. 5 w3-xlarge. 6 w3-xxlarge. 7 w3-xxxlarge. 8 w3-jumbo.

9 Google Fonts 10 Google Fonts Effects










FORM


1 Main 2 w3-input 3 w3-input CardsEffect 4 FormColoured Labels Card Effect 5 FormBordered Input Card Effect

6 FormRound borders Card Effect 7 FormBorderlessInput Card Effect 8 Form ColorHead+Label Card Effect 9 Form Hoverable Inputs

10 Form Animated Inputs 11 w3-check 12 w3-radio 13 w3-select 14 Form Elements in Row 15 FormColoredIcons Card Effect










ICON


1 Fonts Font Awesome 2 Bootstrap Glyphcons 3 Google Icons










IMAGE


1 w3-opacity min-max 2 w3-greyscale min-max 3 w3-sepia min-max 4 w3-hover-opacity-greyscale-sepia 5 w3-display-container

6 Main 7 Image rounded 8 Image circled 9 Image bordered 10 Image as card 11 w3-image 12 w3-image min/max-width

13 w3-opacity w3-hover-opacity-off 14 Image Photo Album 15 w3-display-position 16 w3-display-hover










LAYOUT


1 w3-container 2 w3-panel 3 w3-row w3-row-padding 4 w3-half 5 w3-third 6 w3-quarter 7 w3-twothird 8 w3-threequarter

9 Nested Rows 10 w3-rest w3-col 11 w3-col Width % Controlled 12 l1 - l12 m1 - m12 s1 - s12 13 w3-cell-row

14 w3-cell-row width % controlled 15 w3-cell-row width self adjust 16 w3-cell-row height self adjust 17 w3-cell 18 w3-cell + w3-mobile

19 w3-cell-top middle bottom 20 w3-content 21 w3-hide-small medium large 22 w3-mobile 23 w3-stretch 24 w3-left w3-right

25 w3-show w3-hide 26 w3-mobile 27 w3-section 28 w3-responsive










LIST


1 Main 2 w3-ul 3 List bordered 4 List as card 5 List centered 6 List Coloured 7 List Hoverable 8 List Hoverable Colors

9 List Closeable X Card effect 10 List with paddinng 11 List with Avatar icons 12 List width controlled 13 List Tiny/ S/ M/ L etc










MARGIN


1 Main 2 w3-margin 3 w3-margin-top. 4 w3-margin-right. 5 w3-margin-bottom. 6 w3-margin-left.











1 Main 2 Modal Button 3 Modal Header+Footer 4 Modal Header+Footer Card Effect 5 Animate Top Bottom Left Right Zoom Fade

6 Modal FadeIn 7 Modal Image 8 Modal Image Gallery 9 Modal Login Form 10 Modal With Tabs 11 Modal Lightbox











1 Main 2 w3-btn 3 w3-button 4 w3-bar w3-button 5 w3-bar w3-bar-item 6 Coloured Bar Item 7 w3-bar centered

8 w3-bar withButtonsAndInput 9 w3-bar textSize S M L XL XXL 10 w3-bar padding sizes 11 w3-bar with Icons 12 w3-bar hover colors links

13 w3-bar blackBar hover colors links 14 w3-bar responsive bar 15 w3-bar bar-block on mob 16 w3-bar bar items float right

17 w3-bar bordered inner border card effect 18 w3-bar 1 highlightedLink 19 w3-bar black text Highlighted 20 w3-bar Fixed-on-top Coloured

21 w3-bar Fixed-on-bottom Coloured 22 w3-bar MobileMenu 23 Menu hoverBarBottom hoverBorderThick 24 w3-bar-block

25 w3-bar-block hover color 26 w3-bar-block blackBar hover color 27 w3-show-inline-block 28 Navigation Bars coloured 29 w3-sidebar

30 w3-sidebar Fills Page Partially 31 w3-sidebar Fills Page 100% 32 w3-sidebar pushPageToRight 33 w3-sidebar onPageRight

34 w3-sidebar On Right+Left toggleOpenClose 35 w3-sidebar Coloured 36 w3-sidebar Bordered 37 w3-sidebar Border+InnerBorder

38 w3-sidebar Card Effect 39 w3-sidebar hoverColourLinks 40 w3-sidebar hoverColourLinkText 41 w3-sidebar with Icons

42 w3-sidebar text S M L XL 43 w3-sidebar paddingSizes 44 w3-sidebar withDropdown 45 w3-sidebar withAccordian

46 w3-sidebar AnimateLeft and More 47 w3-sidebar Overlay opacity 48 w3-sidebar withImage and content 49 w3-block

50 Block multiple size 51 w3-ripple 52 w3-disabled 53 Coloured Buttons 54 Colour Buttons on hover 55 Round Buttons

56 Small to large buttons 57 Buttons Bordered 58 Buttons Bold Italics 59 Buttons Padded 60 Buttons Left and Right










PROGRESS BAR


1 Main 2 Progress Bar grey 3 Progress Bars Multiple 4 Progress Bars Multiple Colors 5 Basic Progress Bars Multiple Colors Percent

6 Progress Bar textSizes S M L ++ 7 Progress Bar Padding 8 Progress Bars Rounded 9 Progress Bars Dynamic

10 Progress Bars Dynamic Percent 11 Progress Bars Uploads










PAGINATION


1 Main 2 Buttons Hover Grey 3 Bar-item Hover Grey 4 Arrows Hover Grey 5 Arrows+ActiveLink Hover Grey 6 Arrows Hover Colours

7 Arrows Hover Grey S M L XL XXL 8 Arrows Hover Grey Centered 9 Arrows+ActiveLink Hover Grey Bordered

10 Rounded Hover Grey Bordered 11 Bar Paginations










PADDING


1 Main 2 w3-padding-16. 3 w3-padding-24. 4 w3-padding-32. 5 w3-padding-48. 6 w3-padding-64.

7 w3-padding.. 8 w3-padding-small.. 9 w3-padding-large.. 10 w3-padding-top... 11 w3-padding-right...

12 w3-padding-bottom... 13 w3-padding-left...










ROUND


1 Special Effects 2 w3-round-small. 3 w3-round-medium. 4 w3-round-large. 5 w3-round-xlarge. 6 w3-round-xxlarge.

7 w3-circle 8 Text in Circle 9 Circle in circle










SLIDESHOW


1 Main 2 Manual R-L Buttons 3 Manual R-L Buttons + Captions 4 HTML dataSlides 5 Slideshow Pagination

6 Small Manual Dots 7 Automatic 8 Images as Indicators 9 Slideshows Multiple 10 Animated Top Bottom 11 Animated Fading










TEXT


1 Main 2 w3-left-align. 3 w3-right-align. 4 w3-center 5 w3-wide 6 w3-text-color










TABS


1 Main 2 Tabs Basic 3 Tabs Closeable 4 Tabs Active Tab 5 Tabs Vertical 6 Tabs Animated 7 Tabs Image Gallery 8 Tabs GridBars










TABLE


1 Main 2 w3-table 3 w3-striped 4 w3-border + striped 5 w3-bordered 6 w3-centered 7 w3-hoverable

8 Hover Colours 9 w3-table-all 10 Table Flipping Stripes 11 Table Head Coloured 12 Table Coloured

13 Table as Card 14 Table Tiny/ S/ M/ L etc 15 Responsive Table










TAGS


1 Main 2 w3-tag 3 Tag Colored 4 Tag Sizes S M L ++ 5 Tag Letters Caps 6 Tag Letters Caps XL

7 Tag Signs XL 8 Tag Road Signs 9 Tag Signs Rounded 10 Tag Signs Rotating 11 Tags Spinning