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.

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

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

Type your text here...

Textarea Field

Type your message...

Slider

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

Range

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.

Habibi

Tulis Komentar Anda

SHARE