Lists

Usage

  • Browsers
  • Chrome
  • Safari
  • Firefox
    Firefox is the spiritual successor of Netscape Navigator.
<List style="max-width:300px">
	<ListItem>Browsers</ListItem>
	<Divider />
	<ListItem>Chrome</ListItem>
	<ListItem>Safari</ListItem>
	<ListItem>
		Firefox
		{#snippet supportingText()}
			Firefox is the spiritual successor of Netscape Navigator.
		{/snippet}
	</ListItem>
	<ListItem variant="button">
		Compare benchmarks
		{#snippet supportingText()}
			This will open a new tab
		{/snippet}
		{#snippet end()}
			<Icon>open_in_new</Icon>
		{/snippet}
	</ListItem>
</List>

Icon Item

  • person
    Account
  • settings
    Setting
  • logout
    Sign out
<List style="max-width:300px">
	<ListItem>
		Account
		{#snippet start()}
			<Icon>person</Icon>
		{/snippet}
	</ListItem>
	<Divider />
	<ListItem>
		Setting
		{#snippet start()}
			<Icon>settings</Icon>
		{/snippet}
	</ListItem>
	<Divider />
	<ListItem>
		Sign out
		{#snippet start()}
			<Icon>logout</Icon>
		{/snippet}
	</ListItem>
</List>