Typography and Components

Buttons

Buttons communicate an action a user can take. They are typically placed throughout your UI, in places like dialogs, forms, cards, and toolbars.

Default Buttons

Default ButtonDefault Button RoundedDefault Button IconDefault Button Icon Rounded

Outlined Buttons

Outlined ButtonOutlined Button RoundedOutlined Button IconOutlined Button Icon Rounded

Unelevated Buttons

Unelevated ButtonUnelevated Button RoundedUnelevated Button IconUnelevated Button Icon Rounded

Raised Buttons

Raised ButtonRaised Button RoundedRaised Button IconRaised Button Icon Rounded

Blockquote

Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In in leo ultrices posuere ante viverra ipsum

Datatable

Data tables display information in a way that’s easy to scan, so that users can look for patterns and insights.

EmployeeSalaryBonusSupervisor
Yasya El Hakim$300$50Yasya
Dwi Agung Cahyadi$150-Yasya
Arman Handoyo$200$35Dw Agung
Misbaul Ulum$175$25Arman

Code Block

<h1>H1 Heading</h1>
<p>Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper.</p>

Text Field

Text fields allow users to input, edit, and select text.

Input Field

Textarea Field

Slider

Sliders let users select from a range of values by moving the slider thumb.

Ripple Effects

Ripples are visual representations used to communicate the status of a component or interactive element.

Click Here!

Icon Button

Icons are appropriate for buttons that allow a user to take actions or make a selection, such as adding or removing a star to an item.

Typography

Roboto is the standard typeface on Android and Chrome. Materia X2 no longer uses the Google Sans font because it is Google Restricted. Instead, Materia uses the Rubik Font.

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.
Comments
To add an image:
[image] image_url [/image]

To add a code block:
[code] your_code [/code]

To add a quote:
[quote] your_quote [/quote]

To add a link:
[link] your_link_text | link_url [/link]
Yasya El Hakim
Image for Comments
[image]https://1.bp.blogspot.com/-QRmRBpJ2Fls/X2mVNLOCIgI/AAAAAAAARUM/jeK_OSFBBcc_OaH2zikBdj_tjS45yB38ACLcBGAsYHQ/s900/name%252814%2529.jpeg[/image]
Yasya El Hakim
Code Block for Comments
[code]<h1>H1 Heading</h1>
<p>Curabitur sit amet magna quam.</p>[/code]
Yasya El Hakim
Quote for Comments
[quote]Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In in leo ultrices posuere ante viverra ipsum[/quote]
Yasya El Hakim
Link for Comments
[link]EL Creative Academy|https://www.elcreativeacademy.com/[/link]