Design System Dev Resource
Menu

Chatbot

atoms

chip input

Other components needed (SCSS):
- Outlined 1 button
Notes:
- Clicking on an chip inputs will toggle the selected class. Used in a molecule with other chip inputs. The molecule will determine whether or not multiple chip inputs can be selected at once.
- Update the data-bh-value attribute with whatever value is applicable for your project.



SCSS file JS file 
<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Input chip">Input chip</button><br>
<button type="button" class="bh-outlined-1-button bh-chip-input selected" data-bh-value="Input chip"><svg class="bh-selected-icon" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<polygon fill="#ffffff" fill-rule="nonzero" points="8.785 15.885 4.615 11.715 3.2 13.13 8.785 18.715 20.785 6.715 19.37 5.3"></polygon>
		</g>
	</svg>Input chip</button><br>
<button type="button" class="bh-outlined-1-button bh-chip-input" disabled data-bh-value="Input chip">Input chip</button>

chip input image

Modifier classes: bh-chip-input-image--multiline
Other components needed (SCSS):
- Outlined 1 button
- Chip input
Other components needed (JS):
- Chip input
Notes:
- Clicking on a chip input will toggle the selected class. Used in a molecule with other chip inputs. The molecule will determine whether or not multiple chip inputs can be selected at once.
- Update the data-bh-value attribute with whatever value is applicable for your project.

SCSS file 
<button type="button" class="bh-outlined-1-button bh-chip-input bh-chip-input-image">
	<img class="bh-chip-input-image-img" src="assets/toolkit/images/bh-chip-input-ex.jpg" alt="A guy on a skateboard" />
	<span class="bh-chip-input-image-text">Text</span>
</button>

<button type="button" class="bh-outlined-1-button bh-chip-input bh-chip-input-image selected">
	<img class="bh-chip-input-image-img" src="assets/toolkit/images/bh-chip-input-ex.jpg" alt="A guy on a skateboard" />
	<span class="bh-chip-input-image-text"><svg class="bh-selected-icon" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
			<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
				<polygon fill="#ffffff" fill-rule="nonzero" points="8.785 15.885 4.615 11.715 3.2 13.13 8.785 18.715 20.785 6.715 19.37 5.3"></polygon>
			</g>
		</svg>Text</span>
</button>

<button type="button" class="bh-outlined-1-button bh-chip-input bh-chip-input-image" disabled>
	<img class="bh-chip-input-image-img" src="assets/toolkit/images/bh-chip-input-ex.jpg" alt="A guy on a skateboard" />
	<span class="bh-chip-input-image-text">Text</span>
</button>

<button type="button" class="bh-outlined-1-button bh-chip-input bh-chip-input-image bh-chip-input-image--multiline">
	<img class="bh-chip-input-image-img" src="assets/toolkit/images/bh-chip-input-ex.jpg" alt="A guy on a skateboard" />
	<span class="bh-chip-input-image-text">Text that is long &amp; spans multiple lines is aligned left</span>
</button>

conversation bubble

Modifier classes: bh-conversation-bubble--imagebh-conversation-bubble--loadingbh-conversation-bubble--user
Other components needed (SCSS):
- Body copy (bh-body-1-tight)
- Miscellaneous (bh-caption)
Notes:
- The above modifier classes are used under certain circumstances:
bh-conversation-bubble: the default class, used in all instances
bh-conversation-bubble--image: used on each of the last communications from the Chatbot's side of the chat (showing the Banner Health avatar)
bh-conversation-bubble--loading: used when the Chatbot it "thinking", which shows the loading animation. Used in conjunction with bh-conversation-bubble--image
bh-conversation-bubble--user: used for the user's chat bubble
- In order to toggle the "Edit" button again after clicking it (in the user's chat bubble), you will need to add the ID bh-conversation-save to the button in the Edit response modal.

One line of text

Banner Health avatar

One line of text

Banner Health avatar

Me

SCSS file JS file 
<div class="bh-conversation-bubble">
	<div class="bh-conversation-bubble-group">
		<p class="bh-conversation-bubble-text bh-body-1-tight">One line of text</p>
	</div>
</div>

<div class="bh-conversation-bubble bh-conversation-bubble--image">
	<div class="bh-conversation-bubble-group">
		<img class="bh-conversation-bubble-avatar" src="assets/toolkit/images/bh-ic-chatbot-avatar.svg" alt="Banner Health avatar" />
		<p class="bh-conversation-bubble-text bh-body-1-tight">One line of text</p>
	</div>
</div>

<div class="bh-conversation-bubble bh-conversation-bubble--loading bh-conversation-bubble--image">
	<div class="bh-conversation-bubble-group">
		<img class="bh-conversation-bubble-avatar" src="assets/toolkit/images/bh-ic-chatbot-avatar.svg" alt="Banner Health avatar" />
		<p class="bh-conversation-bubble-text bh-body-1-tight">
			<span class="bh-conversation-bubble-dot bh-conversation-bubble-dot--1"></span>
			<span class="bh-conversation-bubble-dot bh-conversation-bubble-dot--2"></span>
			<span class="bh-conversation-bubble-dot bh-conversation-bubble-dot--3"></span>
		</p>
	</div>
</div>

<div class="bh-conversation-bubble bh-conversation-bubble--user">
	<div class="bh-conversation-bubble-group">
		<p class="bh-conversation-bubble-text bh-body-1-tight">Me</p>
		<button id="bh-conversation-edit" class="bh-conversation-bubble-edit-button bh-caption" type="button">Edit</button>
	</div>
</div>

molecules

chatbot feedback modal

Other components needed (SCSS):
- Headings (bh-heading-h3b)
- Body copy (bh-body-2-main)
- Checkbox
- Text input base
- Side by side buttons
- Primary button
- Outlined 1 button
Other components needed (JS):
- Checkbox

Thanks for reporting this. What's going on?

Select all that apply.
SCSS file 
<div class="bh-chatbot-feedback-modal">
	<div class="bh-chatbot-feedback-modal-dialog">
		<h3 class="bh-chatbot-feedback-modal-heading bh-heading-h3b">Thanks for reporting this. What's going on?</h3>
		<div class="bh-chatbot-feedback-modal-selectbox">
			<fieldset class="bh-checkbox-group bh-checkbox-group--stacked">
				<legend class="bh-checkbox-group-legend bh-checkbox-group-subheader bh-body-2-main">Select all that apply.</legend>
				<div class="bh-checkbox-group">
					<label class="bh-checkbox-group-label" for="question-confusing" aria-label="The question is confusing or poorly worded">
						<input class="bh-checkbox-group-input" id="question-confusing" type="checkbox" role="checkbox" aria-checked="false" aria-invalid="false" />
						<span class="bh-checkbox-group-checkbox">
							<svg class="bh-checkbox-group-checkmark" width="12px" height="10px" viewBox="0 0 12 10">
								<polyline stroke-dashoffset="17px" points="1.5 6 4.5 9 10.5 1" fill="none"></polyline>
							</svg>
						</span>
						<span class="bh-checkbox-group-label-copy">The question is confusing or poorly worded</span>
					</label>
				</div>
				<div class="bh-checkbox-group">
					<label class="bh-checkbox-group-label" for="dont-apply" aria-label="The answer options don't apply to me">
						<input class="bh-checkbox-group-input" id="dont-apply" type="checkbox" role="checkbox" aria-checked="false" aria-invalid="false" />
						<span class="bh-checkbox-group-checkbox">
							<svg class="bh-checkbox-group-checkmark" width="12px" height="10px" viewBox="0 0 12 10">
								<polyline stroke-dashoffset="17px" points="1.5 6 4.5 9 10.5 1" fill="none"></polyline>
							</svg>
						</span>
						<span class="bh-checkbox-group-label-copy">The answer options don't apply to me</span>
					</label>
				</div>
				<div class="bh-checkbox-group">
					<label class="bh-checkbox-group-label" for="ux-bad" aria-label="The user experience was bad">
						<input class="bh-checkbox-group-input" id="ux-bad" type="checkbox" role="checkbox" aria-checked="false" aria-invalid="false" />
						<span class="bh-checkbox-group-checkbox">
							<svg class="bh-checkbox-group-checkmark" width="12px" height="10px" viewBox="0 0 12 10">
								<polyline stroke-dashoffset="17px" points="1.5 6 4.5 9 10.5 1" fill="none"></polyline>
							</svg>
						</span>
						<span class="bh-checkbox-group-label-copy">The user experience was bad</span>
					</label>
				</div>
			</fieldset>
			<div class="bh-text-input-field">
				<input class="bh-text-input-field-input" type="text" id="something-else-input" placeholder="Something else" aria-invalid="false" />
			</div>
			<div class="bh-side-by-side-buttons">
				<button class="bh-outlined-1-button">Cancel</button>
				<button class="bh-primary-button">Submit</button>
			</div>
		</div>
	</div>
</div>

chatbot offline

Other components needed (SCSS):
- Body copy (bh-body-1-strong)
- Primary button
- Outlined 1 button

Symptom checker unavailable

SCSS file 
<div class="bh-chatbot-offline">
	<div class="bh-chatbot-offline-group">
		<div class="bh-chatbot-offline-group-icon">
			<svg class="" width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
				<title>Alert</title>
				<g stroke="none" stroke-width="1" fill="#0077c8">
					<path d="M32,0 C49.673112,0 64,14.326888 64,32 C64,49.673112 49.673112,64 32,64 C14.326888,64 0,49.673112 0,32 C0,14.326888 14.326888,0 32,0 Z M32,3 C15.9837423,3 3,15.9837423 3,32 C3,48.0162577 15.9837423,61 32,61 C48.0162577,61 61,48.0162577 61,32 C61,15.9837423 48.0162577,3 32,3 Z M33.9775,40.08 L33.9775,44 L30.0225,44 L30.0225,40.08 L33.9775,40.08 Z M33.7325,20.655 L33.6625,37.28 L30.3375,37.28 L30.2325,20.655 L33.7325,20.655 Z" fill="#0077c8"></path>
				</g>
			</svg>
		</div>
		<p class="bh-chatbot-offline-group-message bh-body-1-strong">Symptom checker unavailable</p>
		<div class="bh-chatbot-offline-button-group">
			<button class="bh-chatbot-offline-button bh-primary-button" type="submit">Try again</button>
			<button class="bh-chatbot-offline-button bh-outlined-1-button" type="submit">Call a nurse now</button>
		</div>
	</div>
</div>

chatbot pane

Other components needed (SCSS):
- Text button

SCSS file 
<div class="bh-chatbot-pane">
	<div class="bh-chatbot-header">
		<button class="bh-chatbot-arrow bh-text-button bh-text-button--small"><svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
				<title>Minimize</title>
				<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
					<path d="M21,2 C21.553,2 22,2.448 22,3 L22,3 L22,21 C22,21.552 21.553,22 21,22 C20.447,22 20,21.552 20,21 L20,21 L20,3 C20,2.448 20.447,2 21,2 Z M12.375,6.219 C12.808,5.874 13.436,5.945 13.781,6.375 L13.781,6.375 L17.781,11.375 C17.801,11.4 17.806,11.43 17.822,11.455 C17.848,11.494 17.874,11.529 17.895,11.57 C17.91,11.604 17.922,11.637 17.934,11.672 C17.95,11.719 17.961,11.764 17.97,11.812 C17.979,11.857 17.986,11.9 17.989,11.947 C17.99,11.965 18,11.981 18,12 C18,12.019 17.99,12.035 17.989,12.053 C17.986,12.1 17.979,12.143 17.97,12.188 C17.961,12.236 17.95,12.281 17.934,12.328 C17.922,12.363 17.91,12.396 17.895,12.43 C17.874,12.471 17.848,12.506 17.822,12.545 C17.806,12.57 17.801,12.6 17.781,12.625 L17.781,12.625 L13.781,17.625 C13.583,17.872 13.293,18 12.999,18 C12.78,18 12.56,17.928 12.375,17.781 C11.944,17.436 11.874,16.807 12.219,16.375 L12.219,16.375 L14.919,13 L3,13 C2.447,13 2,12.552 2,12 C2,11.448 2.447,11 3,11 L3,11 L14.919,11 L12.219,7.625 C11.874,7.193 11.944,6.564 12.375,6.219 Z" fill="#007eb4" fill-rule="nonzero"></path>
				</g>
			</svg></button>
		<button class="bh-chatbot-restart bh-text-button bh-text-button--small">Start over</button>
	</div>
	<div class="bh-chatbot-content">

	</div>
</div>

chatbot results card

Other components needed (SCSS):
- Text button

SCSS file 
<button type="button" class="bh-chatbot-results bh-text-button">
	<span class="bh-chatbot-results-heading">Swollen ankle</span>
	<span class="bh-chatbot-results-body bh-body-2-tight">My ankle is swollen</span>
</button>

chatbot search results

Other components needed (SCSS):
- Text input search field
- Text button
- Body copy (bh-body-2-main)

  • swollen ankle
  • swollen ankles
  • swollen ankles and feet
  • swollen ankle and foot
  • swollen ankle bone
  • swollen ankles and legs
  • swollen ankle and calf
  • swollen ankle joint
  • swollen ankle swollen calf
  • swollen ankles and hands
SCSS file 
<div class="bh-text-chatbot-search-results-group">
	<div class="bh-text-input-field bh-text-chatbot-search-input">
		<div class="bh-text-input-field-search-group">
			<input aria-label="Search" type="search" class="bh-search-field" placeholder="Search for a symptom" aria-invalid="false" value="swollen ankle" />
		</div>
		<button class="bh-text-input-field-search-cancel bh-text-button">Cancel</button>
	</div>
	<div class="bh-text-chatbot-search-results">
		<ul class="bh-text-chatbot-search-results-list">
			<li class="bh-text-chatbot-search-results-list-item bh-body-2-main">swollen ankle</li>
			<li class="bh-text-chatbot-search-results-list-item bh-body-2-main">swollen ankle<strong>s</strong></li>
			<li class="bh-text-chatbot-search-results-list-item bh-body-2-main">swollen ankle<strong>s and feet</strong></li>
			<li class="bh-text-chatbot-search-results-list-item bh-body-2-main">swollen ankle <strong>and foot</strong></li>
			<li class="bh-text-chatbot-search-results-list-item bh-body-2-main">swollen ankle <strong>bone</strong></li>
			<li class="bh-text-chatbot-search-results-list-item bh-body-2-main">swollen ankle<strong>s and legs</strong></li>
			<li class="bh-text-chatbot-search-results-list-item bh-body-2-main">swollen ankle <strong>and calf</strong></li>
			<li class="bh-text-chatbot-search-results-list-item bh-body-2-main">swollen ankle <strong>joint</strong></li>
			<li class="bh-text-chatbot-search-results-list-item bh-body-2-main">swollen ankle <strong>swollen calf</strong></li>
			<li class="bh-text-chatbot-search-results-list-item bh-body-2-main">swollen ankle<strong>s and hands</strong></li>
		</ul>
	</div>
</div>

chatbot symptoms

Other components needed (SCSS):
- Body copy (bh-body-1-tight)
- Subtitles (bh-subtitle-1)
- Text button

Swollen Ankle

Getting worse, Constant, 1 hour, Moderate

Swollen Ankle

Getting worse, Constant, 1 hour, Moderate

Severe ankle pain

1 hour, Getting worse, Constant

SCSS file 
<div class="bh-text-chatbot-symptoms">
	<div class="bh-text-chatbot-symptoms-card">
		<h3 class="bh-text-chatbot-symptoms-header bh-subtitle-1">Swollen Ankle</h3>
		<p class="bh-text-chatbot-symptoms-status bh-body-1-tight">Getting worse, Constant, 1 hour, Moderate</p>
		<div class="bh-text-chatbot-symptoms-links-box">
			<button type="button" class="bh-text-button bh-text-chatbot-symptoms-link">Remove</button>
			<button type="button" class="bh-text-button bh-text-chatbot-symptoms-link">Edit</button>
		</div>
	</div>
</div>

<div class="bh-text-chatbot-symptoms bh-text-chatbot-symptoms-multiple">
	<div class="bh-text-chatbot-symptoms-card">
		<h3 class="bh-text-chatbot-symptoms-header bh-subtitle-1">Swollen Ankle</h3>
		<p class="bh-text-chatbot-symptoms-status bh-body-1-tight">Getting worse, Constant, 1 hour, Moderate</p>
		<div class="bh-text-chatbot-symptoms-links-box">
			<button type="button" class="bh-text-button bh-text-chatbot-symptoms-link">Remove</button>
			<button type="button" class="bh-text-button bh-text-chatbot-symptoms-link">Edit</button>
		</div>
	</div>
	<hr class="bh-text-chatbot-symptoms-divider">
	<div class="bh-text-chatbot-symptoms-card">
		<h3 class="bh-text-chatbot-symptoms-header bh-subtitle-1">Severe ankle pain</h3>
		<p class="bh-text-chatbot-symptoms-status bh-body-1-tight">1 hour, Getting worse, Constant</p>
		<div class="bh-text-chatbot-symptoms-links-box">
			<button type="button" class="bh-text-button bh-text-chatbot-symptoms-link">Remove</button>
			<button type="button" class="bh-text-button bh-text-chatbot-symptoms-link">Edit</button>
		</div>
	</div>
</div>

chip input group

Modifier classes: bh-chip-input-group--left-aligned
Other components needed (SCSS):
- Chip input
- Body copy (bh-body-2-main)
- Primary button
- Text input base
Other components needed (JS):
- Chip input
Notes:
- The data attribute data-bh-single-selection can be added to the .bh-chip-input-group div, which will prevent the user from choosing more than one chip in a group.



Please mark all that apply

SCSS file JS file 
<div class="bh-chip-input-group" data-bh-single-selection>
	<div class="bh-chip-input-group-chips">
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Yes">Yes</button>
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="No">No</button>
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Unsure">Unsure</button>
	</div>
	<div class="bh-chip-input-group-helper">
		<button class="bh-chip-input-group-helper-button">Why not more options?</button>
		<button class="bh-chip-input-group-helper-button">This is confusing</button>
	</div>
</div>

<br><br>

<div class="bh-chip-input-group">
	<p class="bh-body-2-main">Please mark all that apply</p>
	<div class="bh-chip-input-group-chips">
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Bruising">Bruising</button>
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Redness">Redness</button>
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Itchiness">Itchiness</button>
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="A lump">A lump</button>
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Weakness">Weakness</button>
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Stiffness">Stiffness</button>
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="None of the above">None of the above</button>
		<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Something else" id="something-else">Something else...</button>
	</div>
	<div class="bh-chip-input-group-form-group">
		<div class="bh-text-input-field bh-chip-input-group-input" id="specify-field">
			<label class="bh-text-input-field-label" for="chip-specify">Please specify</label>
			<input class="bh-text-input-field-input" type="text" id="chip-specify" aria-invalid="false" aria-describedby="textbox-helper" />
		</div>
		<button type="button" class="bh-primary-button bh-chip-input-group-submit" disabled>Submit</button>
	</div>
</div>

diagnosis card

Other components needed (SCSS):
- Diagnosis card result group icon or Diagnosis card result group image as needed
- Headings (bh-heading-h2b)
- Subtitles (bh-subtitle-1 & bh-subtitle-2)
- Body copy (bh-body-1-tight)
- Miscellaneous (bh-caption & bh-overline)
- Text button
Other components needed (JS):
- Component toggler

Match 1 of 1

Broken ankle

An ankle fracture is a break in 1 or more ankle bones. An ankle fracture is a break in 1 or more ankle bones. You should seek immediate medical care. The ankle will likely be splinted, but in severe cases, surgery may be necessary.

Reasons for

This could explain your ankle injury, inability to bear weight, and recent injury from a fall.

Reasons against

This wouldn’t explain your worsening symptoms when walking or standing.

Recommended care

In-person visit

Today, or as soon as possible

(Information that explains why the recommendation was suggested)

Location image

Urgent Care Deer Valley & 83rd Ave

3000 N Arizona Ave, Chandler, AZ 85225

2.5 miles, Closed, Hours 8am-9pm

Walk-ins welcome

SCSS file 
<div class="bh-diagnosis-card">
	<h1 class="bh-overline bh-diagnosis-card-match">Match 1 of 1</h1>
	<h2 class="bh-heading-h2b bh-diagnosis-card-diagnosis">Broken ankle</h2>
	<p class="bh-body-1-tight bh-diagnosis-card-description">An ankle fracture is a break in 1 or more ankle bones. An ankle fracture is a break in 1 or more ankle bones. You should seek immediate medical care. The ankle will likely be splinted, but in severe cases, surgery may be necessary.</p>
	<div class="bh-diagnosis-card-for-against for-against-1" data-bh-toggle-type="block">
		<h3 class="bh-subtitle-2 bh-diagnosis-card-for-against-header"><svg class="bh-svg-done bh-diagnosis-card-for-against-icon" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
				<title>Checkmark</title>
				<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
					<polygon fill="#00205b" fill-rule="nonzero" points="8.785 15.885 4.615 11.715 3.2 13.13 8.785 18.715 20.785 6.715 19.37 5.3"></polygon>
				</g>
			</svg>Reasons for</h3>
		<p class="bh-body-1-tight bh-diagnosis-card-for-against-description">This could explain your ankle injury, inability to bear weight, and recent injury from a fall.</p>
		<h3 class="bh-subtitle-2 bh-diagnosis-card-for-against-header bh-diagnosis-card-for-against-header--against"><svg class="bh-svg-close bh-diagnosis-card-for-against-icon" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
				<g stroke="none" stroke-width="1" fill="#56595d" fill-rule="evenodd">
					<polygon points="19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12"></polygon>
				</g>
			</svg>Reasons against</h3>
		<p class="bh-body-1-tight bh-diagnosis-card-for-against-description">This wouldn’t explain your worsening symptoms when walking or standing.</p>
	</div>
	<button type="button" class="bh-text-button bh-diagnosis-card-toggle-trigger" data-bh-toggle="for-against-1"><span class="bh-diagnosis-card-toggle-trigger-text">Read <span class="bh-diagnosis-card-toggle-trigger-more for-against-1" data-bh-toggle-type="inline">more</span><span class="bh-diagnosis-card-toggle-trigger-less for-against-1" data-bh-toggle-type="inline">less</span></span><svg class="bh-diagnosis-card-toggle-trigger-expand" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
			<title>Expand/collapse</title>
			<polygon fill="#007eb4" fill-rule="nonzero" points="16.59 8.295 12 12.875 7.41 8.295 6 9.705 12 15.705 18 9.705"></polygon>
		</svg>
	</button>
	<h2 class="bh-overline bh-diagnosis-card-recommendation">Recommended care</h2>
	<h3 class="bh-subtitle-1 bh-diagnosis-card-visit-type">In-person visit</h3>
	<p class="bh-caption bh-diagnosis-card-instructions">Today, or as soon as possible</p>
	<p class="bh-body-1-tight bh-diagnosis-card-description why-recommendation-1" data-bh-toggle-type="block">(Information that explains why the recommendation was suggested)</p>
	<button type="button" class="bh-text-button bh-diagnosis-card-toggle-trigger" data-bh-toggle="why-recommendation-1"><span class="bh-diagnosis-card-toggle-trigger-text">Why an in-person visit?</span><svg class="bh-diagnosis-card-toggle-trigger-expand" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
			<title>Expand/collapse</title>
			<polygon fill="#007eb4" fill-rule="nonzero" points="16.59 8.295 12 12.875 7.41 8.295 6 9.705 12 15.705 18 9.705"></polygon>
		</svg>
	</button>
	<div class="bh-diagnosis-card-result-group bh-diagnosis-card-result-group--image">
		<div class="bh-diagnosis-card-result-group-left">
			<div class="bh-diagnosis-card-result-group-holder">
				<img class="bh-diagnosis-card-result-group-image" alt="Location image" src="assets/toolkit/images/diagnosis-card-example-2.png" />
			</div>
		</div>
		<div class="bh-diagnosis-card-result-group-right">
			<p class="bh-subtitle-1 bh-diagnosis-card-result-group-subtitle">Urgent Care Deer Valley &amp; 83rd Ave</p>
			<p class="bh-caption bh-diagnosis-card-result-group-description">3000 N Arizona Ave, Chandler, AZ 85225</p>
			<p class="bh-caption bh-diagnosis-card-result-group-description">2.5 miles, <span class="closed">Closed</span>, Hours 8am-9pm</p>
			<p class="bh-caption bh-diagnosis-card-result-group-description bh-diagnosis-card-result-group-description--last bh-diagnosis-card-result-group-description--important">Walk-ins welcome</p>
			<div class="bh-diagnosis-card-result-group-button-group">
				<button type="button" class="bh-primary-button bh-diagnosis-card-result-group-button">8:15 AM</button>
				<button type="button" class="bh-primary-button bh-diagnosis-card-result-group-button">8:30 AM</button>
			</div>
			<div class="bh-diagnosis-card-result-group-button-group">
				<button type="button" class="bh-outlined-1-button bh-diagnosis-card-result-group-button">Show more</button>
				<button type="button" class="bh-outlined-1-button bh-diagnosis-card-result-group-button">More locations</button>
			</div>
		</div>
	</div>
</div>

diagnosis card result group icon

Other components needed (SCSS):
- Subtitles (bh-subtitle-1)
- Miscellaneous (bh-caption)
- Primary button
Notes:
- Below is 3 example usages of this component (doctor, emergency care, urgent care) but it can be used in other ways.

Visit a doctor

Book an appointment with your primary care doctor or find a new one.

Find my doctor

Emergency Care

Find an emergency room near you.

Find an ER

Banner Urgent Care

Find and reserve a spot in line at an Urgent Care near you.

Reserve a spot
SCSS file 
<div class="bh-diagnosis-card-result-group">
	<div class="bh-diagnosis-card-result-group-left">
		<div class="bh-diagnosis-card-result-group-holder">
			<svg class="bh-svg-provider bh-diagnosis-card-result-group-image" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
				<title>Provider icon</title>
				<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
					<path fill="#007eb4" d="M17.3684571,10.7317714 L17.2662857,10.6937143 C16.9278857,10.5675429 16.548,10.6272 16.2654857,10.8524571 C15.0404571,11.8275429 13.5654857,12.3428571 12,12.3428571 C10.4341714,12.3428571 8.95954286,11.8275429 7.73417143,10.8524571 C7.45165714,10.6272 7.07211429,10.5675429 6.73337143,10.6937143 L6.6312,10.7321143 C4.10057143,11.6790857 2.4,14.1308571 2.4,16.8332571 L2.4,19.8857143 C2.4,20.4538286 2.86045714,20.9142857 3.42857143,20.9142857 C3.99668571,20.9142857 4.45714286,20.4538286 4.45714286,19.8857143 L4.45714286,16.8332571 C4.45714286,15.8430857 4.79245714,14.9033143 5.36845714,14.1432 C5.56868571,14.9708571 5.9208,15.7587429 6.42342857,16.5010286 C6.20057143,16.9093714 6.11348571,17.3952 6.2112,17.8868571 C6.43268571,19.0011429 7.51577143,19.7245714 8.62971429,19.5030857 C9.744,19.2816 10.4674286,18.1985143 10.2459429,17.0845714 C10.0474286,16.0892571 9.16182857,15.4076571 8.18091429,15.4313143 C7.65154286,14.6770286 7.34262857,13.8822857 7.25177143,13.0230857 C8.6712,13.9230857 10.2925714,14.4 12,14.4 C13.7070857,14.4 15.3288,13.9230857 16.7478857,13.0230857 C16.6858286,13.6145143 16.5205714,14.1757714 16.2514286,14.7137143 C15.6051429,14.3777143 14.8206857,14.4788571 14.2824,14.9931429 L12.3956571,16.7976 C12.1416,17.0406857 12.0291429,17.3965714 12.0977143,17.7411429 L12.192,18.2166857 C12.3027429,18.7741714 12.8437714,19.1365714 13.4012571,19.0251429 C13.9316571,18.9202286 14.2851429,18.4244571 14.2224,17.8968 L15.5053714,16.6697143 L16.4142857,17.2769143 L15.7717714,18.9315429 C15.2605714,19.0758857 14.9376,19.5915429 15.0432,20.1216 C15.1402286,20.6112 15.5701714,20.9502857 16.0508571,20.9502857 C16.1173714,20.9502857 16.1845714,20.9434286 16.2521143,20.9300571 L16.7276571,20.8357714 C17.0729143,20.7675429 17.3588571,20.5268571 17.4864,20.1990857 L18.4316571,17.7651429 C18.6956571,17.0835429 18.5012571,16.3344 17.9653714,15.8633143 C18.2653714,15.3116571 18.4875429,14.7380571 18.6315429,14.1435429 C19.2072,14.9036571 19.5428571,15.8430857 19.5428571,16.8332571 L19.5428571,21.6 L6.17142857,21.6 C5.60331429,21.6 5.14285714,22.0604571 5.14285714,22.6285714 C5.14285714,23.1966857 5.60331429,23.6571429 6.17142857,23.6571429 L19.8857143,23.6571429 C20.8309714,23.6571429 21.6,22.8881143 21.6,21.9428571 L21.6,16.8332571 C21.6,14.1308571 19.8994286,11.6790857 17.3684571,10.7317714 M12,2.4 C13.7016,2.4 15.0857143,3.78411429 15.0857143,5.48571429 C15.0857143,7.18731429 13.7016,8.57142857 12,8.57142857 C10.2984,8.57142857 8.91428571,7.18731429 8.91428571,5.48571429 C8.91428571,3.78411429 10.2984,2.4 12,2.4 M12,10.6285714 C14.8357714,10.6285714 17.1428571,8.32182857 17.1428571,5.48571429 C17.1428571,2.64994286 14.8357714,0.342857143 12,0.342857143 C9.16388571,0.342857143 6.85714286,2.64994286 6.85714286,5.48571429 C6.85714286,8.32182857 9.16388571,10.6285714 12,10.6285714"></path>
				</g>
			</svg>
		</div>
	</div>
	<div class="bh-diagnosis-card-result-group-right">
		<p class="bh-subtitle-1 bh-diagnosis-card-result-group-subtitle">Visit a doctor</p>
		<p class="bh-caption bh-diagnosis-card-result-group-description">Book an appointment with your primary care doctor or find a new one.</p>
		<a href="https://doctors.bannerhealth.com/" target="_blank" class="bh-primary-button bh-diagnosis-card-result-group-button">Find my doctor</a>
	</div>
</div>

<div class="bh-diagnosis-card-result-group">
	<div class="bh-diagnosis-card-result-group-left">
		<div class="bh-diagnosis-card-result-group-holder">
			<svg class="bh-svg-emergency-care bh-diagnosis-card-result-group-image" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
				<title>Emergency care icon</title>
				<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
					<path fill="#007eb4" d="M9.39702857,13.0285714 L9.51874286,12.8674286 L11.4058286,15.8856 L13.4355429,11.3070857 L14.3122286,13.0285714 L21.6,13.0285714 C22.5452571,13.0285714 23.3142857,12.2595429 23.3142857,11.3142857 L23.3142857,8.57142857 C23.3142857,7.62617143 22.5452571,6.85714286 21.6,6.85714286 L17.1428571,6.85714286 L17.1428571,2.4 C17.1428571,1.45474286 16.3738286,0.685714286 15.4285714,0.685714286 L8.57142857,0.685714286 C7.62617143,0.685714286 6.85714286,1.45474286 6.85714286,2.4 L6.85714286,6.85714286 L2.4,6.85714286 C1.45474286,6.85714286 0.685714286,7.62617143 0.685714286,8.57142857 C0.685714286,9.13954286 1.14617143,9.6 1.71428571,9.6 C2.16205714,9.6 2.54331429,9.31371429 2.68422857,8.91428571 L7.88571429,8.91428571 C8.45382857,8.91428571 8.91428571,8.45382857 8.91428571,7.88571429 L8.91428571,2.74285714 L15.0857143,2.74285714 L15.0857143,7.88571429 C15.0857143,8.45382857 15.5461714,8.91428571 16.1142857,8.91428571 L21.2571429,8.91428571 L21.2571429,10.9714286 L15.5732571,10.9714286 L13.3069714,6.52148571 L11.0958857,11.5093714 L9.68091429,9.24685714 L8.37462857,10.9714286 L2.4,10.9714286 C1.45474286,10.9714286 0.685714286,11.7404571 0.685714286,12.6857143 L0.685714286,15.4285714 C0.685714286,16.3738286 1.45474286,17.1428571 2.4,17.1428571 L6.85714286,17.1428571 L6.85714286,21.6 C6.85714286,22.5452571 7.62617143,23.3142857 8.57142857,23.3142857 L15.4285714,23.3142857 C16.3738286,23.3142857 17.1428571,22.5452571 17.1428571,21.6 L17.1428571,17.1428571 L22.2857143,17.1428571 C22.8538286,17.1428571 23.3142857,16.6824 23.3142857,16.1142857 C23.3142857,15.5461714 22.8538286,15.0857143 22.2857143,15.0857143 L16.1142857,15.0857143 C15.5461714,15.0857143 15.0857143,15.5461714 15.0857143,16.1142857 L15.0857143,21.2571429 L8.91428571,21.2571429 L8.91428571,16.1142857 C8.91428571,15.5461714 8.45382857,15.0857143 7.88571429,15.0857143 L2.74285714,15.0857143 L2.74285714,13.0285714 L9.39702857,13.0285714 Z"></path>
				</g>
			</svg>
		</div>
	</div>
	<div class="bh-diagnosis-card-result-group-right">
		<p class="bh-subtitle-1 bh-diagnosis-card-result-group-subtitle">Emergency Care</p>
		<p class="bh-caption bh-diagnosis-card-result-group-description">Find an emergency room near you.</p>
		<a href="https://emergencycare.bannerhealth.com/" target="_blank" class="bh-primary-button bh-diagnosis-card-result-group-button">Find an ER</a>
	</div>
</div>

<div class="bh-diagnosis-card-result-group">
	<div class="bh-diagnosis-card-result-group-left">
		<div class="bh-diagnosis-card-result-group-holder">
			<svg class="bh-svg-urgent-care bh-diagnosis-card-result-group-image" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
				<title>Urgent care icon</title>
				<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
					<path fill="#007eb4" d="M8.22857143,15.0857143 C8.22857143,14.5176 7.76811429,14.0571429 7.2,14.0571429 L1.71428571,14.0571429 C1.14617143,14.0571429 0.685714286,14.5176 0.685714286,15.0857143 C0.685714286,15.6538286 1.14617143,16.1142857 1.71428571,16.1142857 L7.2,16.1142857 C7.76811429,16.1142857 8.22857143,15.6538286 8.22857143,15.0857143 M17.3142857,2.4 C15.0089143,2.4 12.3949714,3.97131429 11.7205714,5.76274286 C11.3077714,6.85851429 11.5992,7.95017143 12.5201143,8.75828571 C12.9466286,9.13302857 13.5966857,9.09085714 13.9714286,8.66365714 C14.3461714,8.23645714 14.304,7.58674286 13.8768,7.212 C13.5613714,6.93531429 13.5545143,6.7296 13.6457143,6.48788571 C13.9899429,5.57382857 15.7501714,4.45714286 17.3142857,4.45714286 C19.4883429,4.45714286 21.2571429,6.22594286 21.2571429,8.4 C21.2571429,10.6073143 19.8504,12.2862857 17.5810286,14.2796571 C15.6747429,15.9541714 13.212,18.1220571 12.0233143,19.1688 L10.8990857,18.1086857 C10.7081143,17.9286857 10.4557714,17.8285714 10.1934857,17.8285714 L5.48571429,17.8285714 C4.9176,17.8285714 4.45714286,18.2890286 4.45714286,18.8571429 C4.45714286,19.4252571 4.9176,19.8857143 5.48571429,19.8857143 L9.78514286,19.8857143 L11.2944,21.3082286 C11.4922286,21.4947429 11.7459429,21.5886857 12,21.5886857 C12.2424,21.5886857 12.4851429,21.5033143 12.6798857,21.3318857 C12.6798857,21.3318857 16.3299429,18.1169143 18.9384,15.8252571 C21.0555429,13.9659429 23.3142857,11.7054857 23.3142857,8.4 C23.3142857,5.09177143 20.6225143,2.4 17.3142857,2.4 M2.4072,12.3562286 C2.56114286,12.3562286 2.71748571,12.3212571 2.86422857,12.2485714 C3.37302857,11.9955429 3.58045714,11.3784 3.32777143,10.8696 C2.9232,10.0553143 2.74285714,9.29348571 2.74285714,8.4 C2.74285714,6.22594286 4.51165714,4.45714286 6.68571429,4.45714286 C7.40091429,4.45714286 8.10068571,4.65017143 8.7096,5.01531429 C9.19714286,5.30742857 9.82902857,5.14971429 10.1208,4.66251429 C10.4129143,4.17531429 10.2548571,3.54342857 9.76765714,3.25131429 C8.8392,2.69417143 7.7736,2.4 6.68571429,2.4 C3.37748571,2.4 0.685714286,5.09177143 0.685714286,8.4 C0.685714286,9.61097143 0.939771429,10.6865143 1.4856,11.7850286 C1.66491429,12.1467429 2.02937143,12.3562286 2.4072,12.3562286 M8.91428571,13.3714286 C8.91428571,13.9395429 9.37474286,14.4 9.94285714,14.4 L10.9714286,14.4 L10.9714286,15.4285714 C10.9714286,15.9966857 11.4318857,16.4571429 12,16.4571429 C12.5681143,16.4571429 13.0285714,15.9966857 13.0285714,15.4285714 L13.0285714,14.4 L14.0571429,14.4 C14.6252571,14.4 15.0857143,13.9395429 15.0857143,13.3714286 C15.0857143,12.8033143 14.6252571,12.3428571 14.0571429,12.3428571 L13.0285714,12.3428571 L13.0285714,11.3142857 C13.0285714,10.7461714 12.5681143,10.2857143 12,10.2857143 C11.4318857,10.2857143 10.9714286,10.7461714 10.9714286,11.3142857 L10.9714286,12.3428571 L9.94285714,12.3428571 C9.37474286,12.3428571 8.91428571,12.8033143 8.91428571,13.3714286"></path>
				</g>
			</svg>
		</div>
	</div>
	<div class="bh-diagnosis-card-result-group-right">
		<p class="bh-subtitle-1 bh-diagnosis-card-result-group-subtitle">Banner Urgent Care</p>
		<p class="bh-caption bh-diagnosis-card-result-group-description">Find and reserve a spot in line at an Urgent Care near you.</p>
		<a href="https://urgentcare.bannerhealth.com/" target="_blank" class="bh-primary-button bh-diagnosis-card-result-group-button">Reserve a spot</a>
	</div>
</div>

diagnosis card result group image

Other components needed (SCSS):
- Diagnosis card result group icon
- Subtitles (bh-subtitle-1)
- Miscellaneous (bh-caption)
- Primary button
- Outlined 1 button
Notes:
- The video visit image below should be saved and used in the component. The Urgent Care and Emergency Care images are just examples, they will vary based on location.
- Below is 3 example usages of this component (video visit, emergency care, urgent care) but it can be used in other ways.

Location image

Schedule a Video Visit

Use your device to have a video visit with a provider.

Open now: 8am-9:05pm (MST)

Location image

Banner Gateway Medical Center ER

1900 N Higley Rd, Gilbert, AZ 85234

2.5 miles

Book arrival
Location image

Urgent Care Deer Valley & 83rd Ave

3000 N Arizona Ave, Chandler, AZ 85225

2.5 miles, Closed, Hours 8am-9pm

Walk-ins welcome

SCSS file 
<div class="bh-diagnosis-card-result-group bh-diagnosis-card-result-group--image">
	<div class="bh-diagnosis-card-result-group-left">
		<div class="bh-diagnosis-card-result-group-holder">
			<img class="bh-diagnosis-card-result-group-image" alt="Location image" src="assets/toolkit/images/diagnosis-card-video-visit.png" />
		</div>
	</div>
	<div class="bh-diagnosis-card-result-group-right">
		<p class="bh-subtitle-1 bh-diagnosis-card-result-group-subtitle">Schedule a Video Visit</p>
		<p class="bh-caption bh-diagnosis-card-result-group-description">Use your device to have a video visit with a provider.</p>
		<p class="bh-caption bh-diagnosis-card-result-group-description bh-diagnosis-card-result-group-description--last">Open now: 8am-9:05pm (MST)</p>
		<div class="bh-diagnosis-card-result-group-button-group">
			<button type="button" class="bh-primary-button bh-diagnosis-card-result-group-button">8:15 AM</button>
			<button type="button" class="bh-primary-button bh-diagnosis-card-result-group-button">8:30 AM</button>
		</div>
		<div class="bh-diagnosis-card-result-group-button-group">
			<button type="button" class="bh-outlined-1-button bh-diagnosis-card-result-group-button">Show more</button>
			<button type="button" class="bh-outlined-1-button bh-diagnosis-card-result-group-button">More locations</button>
		</div>
	</div>
</div>

<div class="bh-diagnosis-card-result-group bh-diagnosis-card-result-group--image">
	<div class="bh-diagnosis-card-result-group-left">
		<div class="bh-diagnosis-card-result-group-holder">
			<img class="bh-diagnosis-card-result-group-image" alt="Location image" src="assets/toolkit/images/diagnosis-card-example.png" />
		</div>
	</div>
	<div class="bh-diagnosis-card-result-group-right">
		<p class="bh-subtitle-1 bh-diagnosis-card-result-group-subtitle">Banner Gateway Medical Center ER</p>
		<p class="bh-caption bh-diagnosis-card-result-group-description">1900 N Higley Rd, Gilbert, AZ 85234</p>
		<p class="bh-caption bh-diagnosis-card-result-group-description  bh-diagnosis-card-result-group-description--last">2.5 miles</p>
		<a href="https://emergencycare.bannerhealth.com/" target="_blank" class="bh-primary-button bh-diagnosis-card-result-group-button">Book arrival</a>
	</div>
</div>

<div class="bh-diagnosis-card-result-group bh-diagnosis-card-result-group--image">
	<div class="bh-diagnosis-card-result-group-left">
		<div class="bh-diagnosis-card-result-group-holder">
			<img class="bh-diagnosis-card-result-group-image" alt="Location image" src="assets/toolkit/images/diagnosis-card-example-2.png" />
		</div>
	</div>
	<div class="bh-diagnosis-card-result-group-right">
		<p class="bh-subtitle-1 bh-diagnosis-card-result-group-subtitle">Urgent Care Deer Valley &amp; 83rd Ave</p>
		<p class="bh-caption bh-diagnosis-card-result-group-description">3000 N Arizona Ave, Chandler, AZ 85225</p>
		<p class="bh-caption bh-diagnosis-card-result-group-description">2.5 miles, <span class="closed">Closed</span>, Hours 8am-9pm</p>
		<p class="bh-caption bh-diagnosis-card-result-group-description bh-diagnosis-card-result-group-description--last bh-diagnosis-card-result-group-description--important">Walk-ins welcome</p>
		<div class="bh-diagnosis-card-result-group-button-group">
			<button type="button" class="bh-primary-button bh-diagnosis-card-result-group-button">8:15 AM</button>
			<button type="button" class="bh-primary-button bh-diagnosis-card-result-group-button">8:30 AM</button>
		</div>
		<div class="bh-diagnosis-card-result-group-button-group">
			<button type="button" class="bh-outlined-1-button bh-diagnosis-card-result-group-button">Show more</button>
			<button type="button" class="bh-outlined-1-button bh-diagnosis-card-result-group-button">More locations</button>
		</div>
	</div>
</div>

diagnosis card simple

Other components needed (SCSS):
- Headings (bh-heading-h2b)
- Body copy (bh-body-1-tight)

Call 911

We recommend emergency medical transport.

A second, optional sentence.

SCSS file 
<div class="bh-diagnosis-card-simple">
	<div class="bh-diagnosis-card-simple-title-bar">
		<svg class="bh-svg-phone" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
			<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
				<path d="M23.2666857,18.2959398 C23.2035451,18.1059451 22.8025538,17.8261984 22.0637118,17.4570881 C21.8636047,17.3409155 21.5784036,17.1827808 21.2094683,16.9822957 C20.8399501,16.7818105 20.5048193,16.5970611 20.2042701,16.4280474 C19.9033324,16.2594223 19.6210454,16.0956539 19.3574092,15.9377135 C19.3152507,15.9060477 19.1833354,15.8137702 18.9616634,15.6606865 C18.7399914,15.5077971 18.552901,15.3943443 18.3996151,15.320328 C18.2467177,15.2465059 18.096346,15.2095949 17.9484999,15.2095949 C17.7375132,15.2095949 17.4738769,15.3599588 17.1573969,15.6606865 C16.8409168,15.9614143 16.5506644,16.2883683 16.2870282,16.6421314 C16.0231977,16.9957002 15.7436306,17.3226542 15.4483269,17.623382 C15.152829,17.924304 14.9099806,18.0744736 14.7201703,18.0744736 C14.625168,18.0744736 14.5062694,18.0480531 14.3638631,17.9956006 C14.2216511,17.9429538 14.1134378,17.8976892 14.0392234,17.8611667 C13.9655917,17.8240614 13.8391163,17.7504336 13.6596027,17.639312 C13.4798949,17.5285789 13.3798414,17.4677728 13.3588593,17.4570881 C11.9132313,16.6551474 10.6733444,15.7370341 9.63919879,14.7031367 C8.60524742,13.669045 7.68708617,12.429223 6.88510359,10.9836705 C6.87461254,10.9624952 6.8138033,10.8622526 6.70306442,10.6829427 C6.59213127,10.5034386 6.51830536,10.3769697 6.4813924,10.3029534 C6.44447944,10.2291313 6.39960106,10.1209237 6.34695152,9.97852485 C6.29430199,9.83612599 6.26788008,9.71742788 6.26788008,9.62243055 C6.26788008,9.43263015 6.41825181,9.18979442 6.71899528,8.89431192 C7.01973875,8.59902368 7.34690412,8.31927692 7.70029712,8.05565446 C8.0538844,7.792032 8.38085549,7.50179474 8.68159896,7.18533123 C8.98234242,6.86867344 9.13271416,6.60505098 9.13271416,6.39407531 C9.13271416,6.24643119 9.0958012,6.09587304 9.02197528,5.94298367 C8.94814937,5.78970576 8.83469059,5.60262512 8.68159896,5.38096467 C8.52850732,5.15930422 8.43622493,5.02759012 8.4045575,4.98523957 C8.24641462,4.72161711 8.08302621,4.43934487 7.91400372,4.13861711 C7.74498123,3.83788935 7.56041644,3.50277605 7.35992079,3.13347148 C7.15942515,2.76436118 7.00128227,2.47936918 6.88510359,2.278884 C6.51577973,1.54046913 6.23621265,1.13930452 6.04620806,1.07616723 C5.97238214,1.04450145 5.86144899,1.02857143 5.71379716,1.02857143 C5.42879027,1.02857143 5.05694079,1.08121821 4.59786016,1.18690032 C4.13877954,1.29238816 3.77742111,1.40312125 3.5135906,1.51929386 C2.98592958,1.74076004 2.42679541,2.38437184 1.83579953,3.44993499 C1.29764746,4.44167609 1.02857143,5.42312095 1.02857143,6.39388104 C1.02857143,6.67848451 1.04702791,6.9555115 1.08394087,7.22476775 C1.12085382,7.49382973 1.18690859,7.79727725 1.28191089,8.13491604 C1.37691318,8.47255483 1.453459,8.72335557 1.51135406,8.88673544 C1.56924912,9.05011532 1.67746237,9.34287806 1.83579953,9.76502369 C1.99394241,10.1871693 2.08894471,10.4455465 2.12061214,10.5405439 C2.489936,11.5746355 2.92784024,12.4977998 3.43432488,13.3104252 C4.26758633,14.6609804 5.40469971,16.0566059 6.84508217,17.4969131 C8.28546464,18.9372204 9.68096872,20.0742744 11.0317887,20.9078808 C11.8442623,21.4141447 12.7678634,21.8522204 13.8018148,22.2217192 C13.896817,22.2531907 14.155402,22.3481881 14.5773754,22.5067112 C14.9993488,22.6648459 15.2923211,22.7730535 15.4557095,22.8311398 C15.6190979,22.8892261 15.8699118,22.9657679 16.2073739,23.0607652 C16.5454189,23.1557626 16.848688,23.2218139 17.117764,23.2589192 C17.3868401,23.2954417 17.6638815,23.3142857 17.9486941,23.3142857 C18.9193106,23.3142857 19.9008068,23.0450295 20.8927939,22.5070998 C21.9582185,21.9161348 22.6018639,21.3568355 22.8235359,20.8290078 C22.9399089,20.5655796 23.0504535,20.2040458 23.1559468,19.7449891 C23.2616344,19.2861267 23.314284,18.9142967 23.314284,18.6293047 C23.3144782,18.4810777 23.2985474,18.3703447 23.2666857,18.2959398 L23.2666857,18.2959398 Z" fill="#007eb4" fill-rule="nonzero"></path>
			</g>
		</svg>
		<h2 class="bh-heading-h2b bh-diagnosis-card-simple-title">Call 911</h2>
	</div>
	<p class="bh-body-1-tight bh-diagnosis-card-simple-description">We recommend emergency medical transport.</p>
	<p class="bh-body-1-tight bh-diagnosis-card-simple-description">A second, optional sentence.</p>
</div>

question summary

Other components needed (SCSS):
- Chip input
- Chip input group
- Text button
- Select field base
- Subtitles (bh-subtitle-1)
- Body copy (bh-body-1-tight)

Swollen ankle

Is your ankle swelling getting better or worse?

Is your ankle swelling constant or come-and-go?

How long has your ankle been swollen?

How swollen is your ankle?

SCSS file 
<div class="bh-question-summary">
	<div class="bh-question-summary-title-bar">
		<h1 class="bh-subtitle-1 bh-question-summary-title">Swollen ankle</h1>
		<button type="button" class="bh-text-button bh-question-summary-cancel">Cancel</button>
	</div>
	<div class="bh-question-summary-question-area">
		<p class="bh-body-1-tight bh-question-summary-question">Is your ankle swelling getting better or worse?</p>
		<div class="bh-chip-input-group" data-bh-single-selection>
			<div class="bh-chip-input-group-chips bh-question-summary-group-chips">
				<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Better">Getting better</button>
				<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Same">Staying the same</button>
				<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Worse">Getting worse</button>
			</div>
		</div>
	</div>
	<div class="bh-question-summary-question-area">
		<p class="bh-body-1-tight bh-question-summary-question">Is your ankle swelling constant or come-and-go?</p>
		<div class="bh-chip-input-group" data-bh-single-selection>
			<div class="bh-chip-input-group-chips bh-question-summary-group-chips">
				<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Constant">Constant</button>
				<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Come-and-go">Come-and-go</button>
			</div>
		</div>
	</div>
	<div class="bh-question-summary-question-area">
		<p class="bh-body-1-tight bh-question-summary-question">How long has your ankle been swollen?</p>
		<div class="bh-question-summary-select-group">
			<div class="bh-select bh-question-summary-select-number">
				<select class="bh-select-field" id="select-number" aria-invalid="false">
					<option selected value="4">4</option>
					<option value="12">12</option>
					<option value="24">24</option>
				</select>
			</div>
			<div class="bh-select bh-question-summary-select-time">
				<select class="bh-select-field" id="select-time" aria-invalid="false">
					<option selected value="hours">hours</option>
					<option value="days">days</option>
					<option value="weeks">weeks</option>
				</select>
			</div>
		</div>
	</div>
	<div class="bh-question-summary-question-area">
		<p class="bh-body-1-tight bh-question-summary-question">How swollen is your ankle?</p>
		<div class="bh-chip-input-group" data-bh-single-selection>
			<div class="bh-chip-input-group-chips bh-question-summary-group-chips">
				<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Mild">Mild</button>
				<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Moderate">Moderate</button>
				<button type="button" class="bh-outlined-1-button bh-chip-input" data-bh-value="Severe">Severe</button>
			</div>
		</div>
	</div>
</div>

text input age

Other components needed (SCSS):
- Text input base
- Primary button
- Miscellaneous (bh-caption)
Other components needed (icons):
- Help icon
Notes:
- This form also uses HTML5 form validation to check a user's input to confirm it's within a certain age range. Controls can be adjusted on the input itself in the min and max attributes.

Must be between 13 and 100
SCSS file JS file 
<form class="bh-text-input-field-age">
	<div class="bh-text-input-field">
		<div class="bh-text-input-field-age-group">
			<input id="age-input" class="bh-text-input-field-input bh-text-input-field-age-input" required type="number" min="13" max="100" placeholder="" aria-invalid="false" aria-describedby="textbox-helper" />
			<label class="bh-text-input-field-label bh-text-input-field-age-label" for="age-input">years old</label>
			<div class="bh-tooltip bh-tooltip-1">
				<span tabindex="0" class="bh-tooltip-trigger"><svg width="16px" height="16px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
						<title>Help</title>
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M12.752,5.22 C11.626,5.002 10.481,5.288 9.607,6.008 C8.734,6.728 8.234,7.788 8.234,8.919 C8.234,9.488 8.694,9.948 9.263,9.948 C9.831,9.948 10.291,9.488 10.291,8.919 C10.291,8.406 10.52,7.923 10.917,7.595 C11.319,7.263 11.832,7.137 12.36,7.24 C13.014,7.366 13.559,7.911 13.686,8.566 C13.856,9.447 13.366,10.141 12.805,10.437 C11.678,11.032 10.978,12.158 10.978,13.376 C10.978,13.945 11.438,14.406 12.006,14.406 C12.574,14.406 13.034,13.945 13.034,13.376 C13.034,12.916 13.308,12.497 13.765,12.256 C15.248,11.474 16.027,9.832 15.705,8.173 C15.418,6.694 14.231,5.507 12.752,5.22 M12.006,16.119 C11.248,16.119 10.635,16.734 10.635,17.491 C10.635,18.248 11.248,18.863 12.006,18.863 C12.764,18.863 13.377,18.248 13.377,17.491 C13.377,16.734 12.764,16.119 12.006,16.119 M12.006,21.263 C6.901,21.263 2.748,17.11 2.748,12.005 C2.748,6.901 6.901,2.747 12.006,2.747 C17.11,2.747 21.264,6.901 21.264,12.005 C21.264,17.11 17.11,21.263 12.006,21.263 M12.006,0.69 C5.767,0.69 0.69,5.766 0.69,12.005 C0.69,18.244 5.767,23.321 12.006,23.321 C18.245,23.321 23.321,18.244 23.321,12.005 C23.321,5.766 18.245,0.69 12.006,0.69" fill="#007eb4" fill-rule="nonzero"></path>
						</g>
					</svg>
				</span>
				<div class="bh-text-input-field-age-tooltip-container bh-tooltip-1-tip bh-tooltip-tip" role="tooltip">
					<p class="bh-text-input-field-age-tooltip-text">This tool is designed to consult on symptoms for patients between the ages of 2 and 120. You must be 13 years or older to use this tool.</p>
				</div>
			</div>
		</div>
		<div class="bh-text-input-field-error">Must be between 13 and 100</div>
	</div>

	<button class="bh-text-input-field-age-button bh-primary-button" type="submit">Submit</button>
	<button class="bh-text-input-field-age-helper-text bh-caption" type="button">Why am I being asked this?</button>
</form>

text input search

Other components needed (SCSS):
- Text input search field
- Primary button
Other components needed (icons):
- Search icon (with fill color #7b7f84)
- Close icon (with fill color #7e8287)

SCSS file 
<form class="bh-text-input-field-search">
	<div class="bh-text-input-field">
		<div class="bh-text-input-field-search-group">
			<input aria-label="Search" type="search" class="bh-search-field" placeholder="Add another symptom" aria-invalid="false">
			<button class="bh-primary-button bh-text-input-field-search-button" type="submit">I'm done adding symptoms</button>
		</div>
	</div>
</form>

text input zipcode

Other components needed (SCSS):
- Text input base
- Primary button
- Miscellaneous (bh-caption)
Other components needed (icons):
- Location icon

Please enter a valid zip code or select "Skip"
SCSS file JS file 
<form class="bh-text-input-field-zipcode">
	<div class="bh-text-input-field">
		<div class="bh-text-input-field-zipcode-group">
			<label class="bh-text-input-field-label bh-text-input-field-zipcode-label" for="zipcode-input">
				<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false">
					<title>Location</title>
					<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
						<path d="M13.1419,17.1796382 L11.7589,12.8856382 C11.6609,12.5796382 11.4199,12.3396382 11.1139,12.2406382 L6.8199,10.8576382 L18.0589,5.94063823 L13.1419,17.1796382 Z M20.7069,3.29263823 C20.4159,3.00263823 19.9759,2.91863823 19.5989,3.08363823 L3.5989,10.0836382 C3.2179,10.2506382 2.9799,10.6356382 3.0009,11.0506382 C3.0219,11.4656382 3.2979,11.8246382 3.6929,11.9516382 L10.0129,13.9866382 L12.0479,20.3066382 C12.1759,20.7016382 12.5349,20.9776382 12.9499,20.9986382 C12.9659,20.9996382 12.9829,20.9996382 12.9999,20.9996382 C13.3959,20.9996382 13.7559,20.7656382 13.9159,20.4006382 L20.9159,4.40063823 C21.0809,4.02363823 20.9979,3.58363823 20.7069,3.29263823 L20.7069,3.29263823 Z" fill="#007eb4" fill-rule="nonzero"></path>
					</g>
				</svg>
			</label>
			<input type="text" id="zipcode-input" class="bh-text-input-field-input bh-text-input-field-zipcode-input" required placeholder="Zip code" aria-invalid="false" aria-describedby="textbox-helper" />
		</div>
		<div class="bh-text-input-field-error">Please enter a valid zip code or select "Skip"</div>
	</div>
	<button class="bh-text-input-field-zipcode-button bh-primary-button" type="submit">Submit</button>
	<button class="bh-text-input-field-zipcode-helper-text bh-caption" type="button">Skip</button>
</form>

© Banner Health