---
name: Breakpoints
heading: These represent the minimum breakpoint widths
---

<div class="responsive-table">
	<table class="tabular breakpoints">
		<tbody>
			<tr>
				<th scope="row">1</th>
				<td>Mobile Portrait</td>
				<td>@mobilePortraitWidth</td>
				<td class="breakpoints__size -mobile-portrait"></td>
			</tr>
			<tr>
				<th scope="row">2</th>
				<td>Mobile Landscape</td>
				<td>@mobileLandscapeWidth</td>
				<td class="breakpoints__size -mobile-landscape"></td>
			</tr>
			<tr>
				<th scope="row">3</th>
				<td>Tablet Portrait</td>
				<td>@tabletPortraitWidth</td>
				<td class="breakpoints__size -tablet-portrait"></td>
			</tr>
			<tr>
				<th scope="row">4</th>
				<td>Desktop Small</td>
				<td>@desktopSmallWidth</td>
				<td class="breakpoints__size -desktop-small"></td>
			</tr>
			<tr>
				<th scope="row">5</th>
				<td>Desktop Medium</td>
				<td>@desktopMediumWidth</td>
				<td class="breakpoints__size -desktop-medium"></td>
			</tr>
			<tr>
				<th scope="row">6</th>
				<td>Desktop Large</td>
				<td>@desktopLargeWidth</td>
				<td class="breakpoints__size -desktop-large"></td>
			</tr>
		</tbody>
	</table>
</div>