SunSed UI is a collection of standard and custom HTML elements that are designed to work together to create a beautiful and functional UI. You can create new elements or modify the existing ones using the SunSed HTML. Here we have a list of all the elements and their attributes that you can use to create your website or web app.
The fundamentals
HTML Elements
Building blocks of web pages
SunSed Elements
Additional elements beyond Standard HTML
Styling Elements
Time to dress up our web page - colors, fonts, and more!
Template
Apply a template (content and styles) to pages
Global Helper Attributes
Shadows
Add shadows to elements.
Links
Make any tag into a link
Visibility
Show or hide elements.
Border Radius
Round the corners of elements.
Color
Use and change the colors of your app and elements.
Elements
Typography Elements
Paragraphs, Headers, Titles, Quotes, and more.
<a>
Standard link element
<img>
Add images to your site and other elements
<section>
Group elements in a wrapper with width of entire page
<container>
Group elements in a wrapper with width of main content area
<paper>
A container with shadow and padding
<row>
A horizontal row that accepts columns placing elements side by side
<grid>
A more complex grid that places nested children elements in rows and columns
<table>
Standard table that accepts rows and columns to display data
<modal>
A modal dialog that opens with an overlay to display additional content
<drawer>
A drawer that opens from the sides of the screen to display additional content
<sitenav>
A navigation bar that displays logo, links and buttons
<appbar>
A navigation bar that displays buttons and links next to each other (could be placed at the bottom of the screen)
<toolbar>
A toolbar displays buttons and links and page information designed to be placed at the top of the page for main interactions (back, page name, actions, etc.)
<dropdown>
A dropdown that opens to display additional links and information
<footer>
A footer element that displays links and buttons for the bottom of the page
<breadcrumb>
A breadcrumb that displays the path of the current page
<table-of-content>
Automatically generate a table of content for your page based on the headings in the page
<textfield>
Inputs and Textareas to accept user input
<choice>
Checkboxes and Radio buttons
<select>
Dropdowns to select from a list of options
<range>
Slider to select a value from a range
<button>
Buttons to trigger actions or act as links
<chip>
display icons, text, and images in a compact way
<avatar>
display images or icons in a circular shape with a default of accepting initials
<Badge>
display a small notification or status indicator
<list>
Display a list of items with icon, image, title, subtitle, and buttons
<gallery>
Display a list of images in a grid format
<timeline>
Display a list of items in a timeline format with icon, image, title, subtitle, and buttons
<cards>
Display a list of items in a card format with image, title, subtitle, and buttons
<accordion>
Display a list of items in an accordion that opens and closes each item on click
<Code>
Display block of code with syntax highlighting
<features>
Display a list of features with icon, title, and description displayed in a grid
<hero>
Display a hero section with a title, subtitle, and an image that is shown in full width as the background
<intro>
Shows main points with text and images that reverse the position of the image and text on odd and even items
<call-to-action>
Display a call to action section with a title, subtitle, and a button