See source code and documentation on Github. Nude master version: v0.8 Nude playground version: v0.8 Disclaimer This page has zero CSS assets. All you see is generated in runtime in your browser. There are *calculating* bytes of generated CSS for 32 theme variants and other styling. If in any moment there is some CSS that can't be re-used in the future then it will be deleted. You can edit markup in DevTools and see changes instantly. You can try change defaults: border radius, border width, animation time, padding and hues/saturation for various themes. NUDE Elements uses Feather Icons library to render icons. It can be replaced with any library you like. NUDE Elements can be used with any Modern Framework that supports Custom Elements. Complex example Product name Very very long product description Order now Only $99.99 Typography Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Typical paragraph text Font weight 100 Font weight 200 Font weight 300 Font weight 400 Font weight 500 Font weight 600 Font weight 700 Font weight 800 Font weight 900 Italic Underline Strikethrough Upper-cased Vertical align: baseline middle super top text-top sub bottom text-bottom Align text left Align text right Align text center Justify text Monospaced font Letter spacing with base border width Badges Normal badges Simple badge Special badge Themed badges Tint theme Toned theme Swap theme Special theme Icons Uses Feather Icons library by default. (lazy-loading) ... Themes Default theme variation Header Paragraph text. Strong text. Special text. Simple Button Special Button Various themes with different hues Blue - Main theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Blue - Tint theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Blue - Toned theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Blue - Swap theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Blue - Special theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Cyan - Main theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Cyan - Tint theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Cyan - Toned theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Cyan - Swap theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Cyan - Special theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Green - Main theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Green - Tint theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Green - Toned theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Green - Swap theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Green - Special theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Yellow - Main theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Yellow - Tint theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Yellow - Toned theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Yellow - Swap theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Yellow - Special theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Orange - Main theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Orange - Tint theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Orange - Toned theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Orange - Swap theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Orange - Special theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Red - Main theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Red - Tint theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Red - Toned theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Red - Swap theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Red - Special theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Purple - Main theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Purple - Tint theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Purple - Toned theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Purple - Swap theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Purple - Special theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Violet - Main theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Violet - Tint theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Violet - Toned theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Violet - Swap theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button Violet - Special theme Paragraph text. Card with subtle bg Strong text. Special text. Simple Button Special Button All variants of single theme Tint variants High contrast Paragraph text. Simple Button Special Button tint strong Normal contrast Paragraph text. Simple Button Special Button tint Low contrast Paragraph text. Simple Button Special Button tint soft Toned variants High contrast Paragraph text. Simple Button Special Button toned bold strong High contrast Paragraph text. Simple Button Special Button toned strong High contrast Paragraph text. Simple Button Special Button toned dim strong Normal contrast Paragraph text. Simple Button Special Button toned bold Normal contrast Paragraph text. Simple Button Special Button toned Normal contrast Paragraph text. Simple Button Special Button toned dim Low contrast Paragraph text. Simple Button Special Button toned bold soft Low contrast Paragraph text. Simple Button Special Button toned soft Low contrast Paragraph text. Simple Button Special Button toned dim soft Swap variants High contrast Paragraph text. Simple Button Special Button swap bold strong High contrast Paragraph text. Simple Button Special Button swap strong High contrast Paragraph text. Simple Button Special Button swap dim strong Normal contrast Paragraph text. Simple Button Special Button swap bold Normal contrast Paragraph text. Simple Button Special Button swap Normal contrast Paragraph text. Simple Button Special Button swap dim Low contrast Paragraph text. Simple Button Special Button swap bold strong Low contrast Paragraph text. Simple Button Special Button swap soft Low contrast Paragraph text. Simple Button Special Button swap dim soft Special variants High contrast Paragraph text. Simple Button Special Button special strong Normal contrast Paragraph text. Simple Button Special Button special Low contrast Paragraph text. Simple Button Special Button special soft Special color A color to identify active and important elements Link color Special link Special button color Special button Special badge color Special button Border color A color for border and line elements. Side Side Hover & Focus colors for active element Focus is visible while navigating by keyboard. Like in simple button Subtle color To differentiate similar blocks from each other. Block 1 Block 2 Block 3 Block 4 Layout Flexbox Simple layout with Flexbox using gap polyfill Card 1 Card 2 Card 3 Control flexbox content position Card 1 Card 2 Card 3 Control placement of individual items Card 1 Card 2 Card 3 Wrapped flexbox. Container of wrapped flexbox can't have non-zero gap attr (if it's not a grid)! It's polyfill requirements! Card 1 Card 2 Card 3 Card 4 Card 5

Grid

Simple layout with Grid Card 1 Card 2 Card 3 Control grid content position Card 1 Card 2 Card 3 Control grid items position Card 1 Card 2 Card 3 Links Simple link Open link in the current tab Open link in a new tab Lines Horizontal line Vertical line Buttons Simple button Special button Toggle button Open link in the current tab Open link in a new tab Group buttons One Two Three Group buttons vertical One Two Three Tabs First Second Third First tab panel Second tab panel Third tab panel Menu items Menu item 1 Menu item 2 ... Switches Checkboxes Checkbox label Inputs Simple input Input with icon and button Popups Dropdown menu Menu button level 1 Submenu level 1 Menu button level 2 Submenu level 2 Menu button level 3 etc... Dropdown card Simple buttons don't trigger close event. Simple button Submit buttons trigger close event. Submit button Tooltips & [place] attribute Order of place modifiers is not strict! Outside position outside-top outside-right outside-bottom outside-left Inside position top right bottom left Center position center-top center-right center-bottom center-left Outside position outside-top outside-right outside-right outside-bottom outside-bottom outside-left outside-left outside-top Inside position top right right bottom bottom left left top Center position center-top center-right center-right center-bottom center-bottom center-left center-left center-top Complex position outside-top left outside-right top outside-bottom right outside-left bottom Complex position center-left top center-top right center-right bottom center-bottom left Complex position center-top outside-left center-right outside-top center-bottom outside-right center-left outside-bottom Inside position inside Cover position cover Fill position Tables Table with column headers Header 1 Header 2 Header 3 Cell 1 Cell 2 Cell 3 Cell 1 Cell 2 Cell 3 Cell 1 Cell 2 Cell 3 Table with row headers Row header 1 Cell 1 Cell 2 Cell 3 Row header 2 Cell 1 Cell 2 Cell 3 Row header 3 Cell 1 Cell 2 Cell 3 Grid tables Cell 1 Cell 2 Cell 3 Triangles *CRAZY* States & complex states Change color of toggle button Toggle Button Change background of toggle button for 4 states Toggle Button Prefers color scheme: Auto Dark Light Prefers contrast: Auto High Low