---
name: Fonts
---

<div class="responsive-table">
	<table class="tabular fonts">
		<tbody>
			<tr>
				<th scope="row">Base</th>
				<td>@baseFont</td>
				<td class="fonts__family -base"></td>
			</tr>
			<tr>
				<th scope="row">Heading</th>
				<td>@headingFont</td>
				<td class="fonts__family -heading"></td>
			</tr>
			<tr>
				<th scope="row">Description Title</th>
				<td>@dtFont</td>
				<td class="fonts__family -description-title"></td>
			</tr>
			<tr>
				<th scope="row">Description</th>
				<td>@ddFont</td>
				<td class="fonts__family -description"></td>
			</tr>
			<tr>
				<th scope="row">Quote</th>
				<td>@quoteFont</td>
				<td class="fonts__family -quote"></td>
			</tr>
			<tr>
				<th scope="row">Cite</th>
				<td>@citeFont</td>
				<td class="fonts__family -cite"></td>
			</tr>
			<tr>
				<th scope="row">Address</th>
				<td>@addressFont</td>
				<td class="fonts__family -address"></td>
			</tr>
			<tr>
				<th scope="row">Code</th>
				<td>@codeFont</td>
				<td class="fonts__family -code"></td>
			</tr>
			<tr>
				<th scope="row">Code Block</th>
				<td>@codeBlockFont</td>
				<td class="fonts__family -code-block"></td>
			</tr>
			<tr>
				<th scope="row">Input</th>
				<td>@inputFont</td>
				<td class="fonts__family -input"></td>
			</tr>
			<tr>
				<th scope="row">Legend</th>
				<td>@legendFont</td>
				<td class="fonts__family -legend"></td>
			</tr>
			<tr>
				<th scope="row">Button</th>
				<td>@buttonFont</td>
				<td class="fonts__family -button"></td>
			</tr>
		</tbody>
	</table>
</div>