Honeycrisp Compact
Honeycrisp Compact is a variation of Honeycrisp. While standard Honeycrisp is geared towards public facing products, Compact can be used to build internal tools and products for workers. Use Compact for things that people will use as part of their job. Compact's components aim to be as accessible and usable as standard Honeycrisp, but with a more businesslike visual design that allows for greater information density and more complex workflows. These products might be used routinely, and by people who need workspaces that are optimized for efficiency.
Heading Level 1
The apple wasn't bred to grow, store or ship well. It was bred for taste: crisp, with balanced sweetness and acidity.
Heading Level 2
The apple wasn't bred to grow, store or ship well. It was bred for taste: crisp, with balanced sweetness and acidity.
Heading Level 3
The apple wasn't bred to grow, store or ship well. It was bred for taste: crisp, with balanced sweetness and acidity.
This is what body text looks like.
This is what error text looks like.
This is what help text looks like.
<div class="honeycrisp-compact">
<h1>Heading Level 1</h1>
<p>The apple wasn't bred to grow, store or ship well. It was bred for taste: crisp, with balanced sweetness and acidity.</p>
<h2>Heading Level 2</h2>
<p>The apple wasn't bred to grow, store or ship well. It was bred for taste: crisp, with balanced sweetness and acidity.</p>
<h3>Heading Level 3</h3>
<p>The apple wasn't bred to grow, store or ship well. It was bred for taste: crisp, with balanced sweetness and acidity.</p>
<body><p>This is what body text looks like.</p></body>
<p class="text--error">This is what error text looks like.</p>
<p class="text--help">This is what help text looks like.</p>
<p><a href="#">This is what link text looks like.</a></p>
<p><a href="#" class="link--subtle">This is what subtle link text looks like</a></p>
</div><div class="honeycrisp-compact">
<div class="h4">Compact</div>
<div>
<button class="button button--primary">Primary Button</button>
<button class="button button--primary button--disabled" disabled>Disabled Primary Button</button>
</div>
<div>
<button class="button button--small button--primary">Button Small Primary</button>
<button class="button button--small">Button Small Secondary</button>
<button class="button button--small button--disabled" disabled>Disabled Primary Button Small</button>
</div>
<div>
<button class="button button--big button--primary">Button Big Primary</button>
<button class="button button--big">Button Big Secondary</button>
<button class="button button--big button--disabled" disabled>Disabled Button Big</button>
</div>
<div>
<button class="button">Button</button>
<button class="button button--disabled" disabled>Disabled Button</button>
</div>
<div>
<button class="button button--danger">Danger Button</button>
<button class="button button--danger button--disabled" disabled>Disabled Danger Button</button>
</div>
<div>
<button class="button">Button with icon<i class="button__icon icon-arrow_forward"></i></button>
<button class="button"><i class="button__icon--left icon-arrow_back"></i>Button with icon</button>
</div>
</div>This is what help text in a form group looks like.
<div class="honeycrisp-compact">
<div class="form-group">
<label class="form-question" for="apple_comment">What would you like to tell us about apples?</label>
<input type="text" class="text-input" name="apple_comment" id="apple_comment">
</div>
<div class="form-group">
<label class="form-question" for="favorite_apples">What are your favorite apples?</label>
<input type="text" class="text-input form-width--long" name="favorite_apples" id="favorite_apples">
</div>
<div class="form-group">
<label class="form-question" for="them_apples">How about them apples?</label>
<input type="text" class="text-input form-width--med" name="them_apples" id="them_apples">
</div>
<div class="form-group">
<label class="form-question" for="phone">What is your phone number?</label>
<input type="tel" class="text-input form-width--phone phone-input" name="phone" id="phone">
</div>
<div class="form-group">
<label for="apple_quality" class="form-question">What's your favorite apple quality?</label>
<p class="text--help">This is what help text in a form group looks like.</p>
<div class="select">
<select class="select__element" name="apple_quality" id="apple_quality">
<option selected disabled>Choose a selection</option>
<option value="crisp">Crisp</option>
<option value="sweet">Sweet</option>
<option value="tart">Tart</option>
</select>
</div>
</div>
</div><div class="honeycrisp-compact">
<table class="data-table">
<thead>
<tr>
<th class="header--sortable">
<a href="#" class="sort-icon sort-icon--ascending">
Applicant
</a>
</th>
<th>Birth date</th>
<th>Confirmation #</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Applicant 1</td>
<td>04/02/1988</td>
<td>AKJHSD83K</td>
<td><a href="#">Link</a></td>
</tr>
<tr class="row--warning">
<td>Applicant 2</td>
<td>04/02/1988</td>
<td>AKJHSD83K</td>
<td><a href="#">Link</a></td>
</tr>
<tr>
<td>Applicant 3</td>
<td>04/02/1988</td>
<td>AKJHSD83K</td>
<td><a href="#">Link</a></td>
</tr>
<tr>
<td>Applicant 4</td>
<td>04/02/1988</td>
<td>AKJHSD83K</td>
<td><a href="#">Link</a></td>
</tr>
<tr class="row--error">
<td>Applicant 5</td>
<td>04/02/1988</td>
<td>AKJHSD83K</td>
<td><a href="#">Link</a></td>
</tr>
<tr>
<td>Applicant 6</td>
<td>04/02/1988</td>
<td>AKJHSD83K</td>
<td><a href="#">Link</a></td>
</tr>
</tbody>
</table>
</div>