Design System Dev Resource
Menu

Atoms

buttons

primary button

Modifier classes: bh-primary-button--smallbh-primary-button--largebh-primary-button--loadingbh-primary-button--icon-lbh-primary-button--icon-r
Note: Can be used as <button>, <input type="submit" />, or <a> tag

SCSS file
<button type="button" class="bh-primary-button">Button</button>

<button type="button" class="bh-primary-button bh-primary-button--small">Button</button>

<button type="button" class="bh-primary-button bh-primary-button--large">Button</button>

<button type="button" class="bh-primary-button bh-primary-button--loading">Button</button>

<button type="button" class="bh-primary-button bh-primary-button--icon-l"><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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg>Button</button>

<button type="button" class="bh-primary-button bh-primary-button--icon-r">Button<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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg></button>

<button disabled type="button" class="bh-primary-button">Button</button>
 

secondary button

Modifier classes: bh-secondary-button--smallbh-secondary-button--largebh-secondary-button--loadingbh-secondary-button--icon-lbh-secondary-button--icon-r
Note: Can be used as <button>, <input type="submit" />, or <a> tag

SCSS file
<button type="button" class="bh-secondary-button">Button</button>

<button type="button" class="bh-secondary-button bh-secondary-button--small">Button</button>

<button type="button" class="bh-secondary-button bh-secondary-button--large">Button</button>

<button type="button" class="bh-secondary-button bh-secondary-button--loading">Button</button>

<button type="button" class="bh-secondary-button bh-secondary-button--icon-l"><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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg>Button</button>

<button type="button" class="bh-secondary-button bh-secondary-button--icon-r">Button<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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg></button>

<button disabled type="button" class="bh-secondary-button">Button</button>
 

outlined 1 button

Modifier classes: bh-outlined-1-button--smallbh-outlined-1-button--largebh-outlined-1-button--loadingbh-outlined-1-button--icon-lbh-outlined-1-button--icon-r
Note: Can be used as <button>, <input type="submit" />, or <a> tag

SCSS file
<button type="button" class="bh-outlined-1-button">Button</button>

<button type="button" class="bh-outlined-1-button bh-outlined-1-button--small">Button</button>

<button type="button" class="bh-outlined-1-button bh-outlined-1-button--large">Button</button>

<button type="button" class="bh-outlined-1-button bh-outlined-1-button--loading">Button</button>

<button type="button" class="bh-outlined-1-button bh-outlined-1-button--icon-l"><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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg>Button</button>

<button type="button" class="bh-outlined-1-button bh-outlined-1-button--icon-r">Button<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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg></button>

<button disabled type="button" class="bh-outlined-1-button">Button</button>
 

outlined 2 button

Modifier classes: bh-outlined-2-button--smallbh-outlined-2-button--largebh-outlined-2-button--loading
Note: Can be used as <button>, <input type="submit" />, or <a> tag

SCSS file
<button type="button" class="bh-outlined-2-button">Button</button>

<button type="button" class="bh-outlined-2-button bh-outlined-2-button--small">Button</button>

<button type="button" class="bh-outlined-2-button bh-outlined-2-button--large">Button</button>

<button type="button" class="bh-outlined-2-button bh-outlined-2-button--loading">Button</button>

<button disabled type="button" class="bh-outlined-2-button">Button</button>
 

outlined 3 button

Modifier classes: bh-outlined-3-button--smallbh-outlined-3-button--largebh-outlined-3-button--loading
Note: Can be used as <button>, <input type="submit" />, or <a> tag

SCSS file
<button type="button" class="bh-outlined-3-button">Button</button>

<button type="button" class="bh-outlined-3-button bh-outlined-3-button--small">Button</button>

<button type="button" class="bh-outlined-3-button bh-outlined-3-button--large">Button</button>

<button type="button" class="bh-outlined-3-button bh-outlined-3-button--loading">Button</button>

<button disabled type="button" class="bh-outlined-3-button">Button</button>
 

text button

Modifier classes: bh-text-button--smallbh-text-button--largebh-text-button--loadingbh-text-button--icon-lbh-text-button--icon-r
Notes:
- Can be used as <button>, <input type="submit" />, or <a> tag
- The different heights of the buttons can only be seen when in a 'focused' or 'disabled' state

SCSS file
<button type="button" class="bh-text-button">Button</button>

<button type="button" class="bh-text-button bh-text-button--small">Button</button>

<button type="button" class="bh-text-button bh-text-button--large">Button</button>

<button type="button" class="bh-text-button bh-text-button--loading">Button</button>

<button type="button" class="bh-text-button bh-text-button--icon-l"><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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg>Button</button>

<button type="button" class="bh-text-button bh-text-button--icon-r">Button<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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg></button><button type="button" class="bh-text-button bh-text-button--icon-r">Button<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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg></button>

<button disabled type="button" class="bh-text-button">Button</button>
 

visit type toggle button

Notes:
- Only one button can be active at a time
- The bh-visit-type-toggle-button--active & bh-visit-type-toggle-button--resting classes would be added via Javascript for active and resting states respectively

SCSS file JS file
<div class="bh-visit-type-toggle-buttons">
	<button type="button" class="bh-visit-type-toggle-button bh-visit-type-toggle-button--active">In-person visit</button>
	<button type="button" class="bh-visit-type-toggle-button bh-visit-type-toggle-button--icon-l bh-visit-type-toggle-button--resting">
		<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>Video</title>
			<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
				<path d="M16,19 L6,19 C5.448,19 5,18.552 5,18 C5,17.448 5.448,17 6,17 L16,17 L16,14 C16,13.621 16.214,13.275 16.553,13.105 C16.891,12.935 17.296,12.973 17.6,13.2 L20,15 L20,9 L17.6,10.8 C17.296,11.027 16.891,11.063 16.553,10.895 C16.214,10.725 16,10.379 16,10 L16,7 L4,7 L4,15 C4,15.552 3.552,16 3,16 C2.448,16 2,15.552 2,15 L2,7 C2,5.897 2.897,5 4,5 L16,5 C17.103,5 18,5.897 18,7 L18,8 L20.4,6.2 C20.703,5.973 21.108,5.936 21.447,6.105 C21.786,6.275 22,6.621 22,7 L22,17 C22,17.379 21.786,17.725 21.447,17.895 C21.108,18.063 20.703,18.027 20.4,17.8 L18,16 L18,17 C18,18.103 17.103,19 16,19" fill="#00205b" fill-rule="nonzero"></path>
			</g>
		</svg>Video visit</button>
</div>
 
 

chips

chip solid

Modifier classes: bh-chip--icon-lbh-chip--icon-rbh-chip--icon-lrbh-chip--staticbh-chip--selected
Note: The bh-chip--selected class would be added via Javascript when a user has selected a chip.

Chip
SCSS file
<button class="bh-chip">Chip</button>

<button class="bh-chip bh-chip--icon-l"><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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg>Chip</button>

<button class="bh-chip bh-chip--icon-r">Chip<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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg></button>

<button class="bh-chip bh-chip--icon-lr"><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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg>Chip<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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg></button>

<span class="bh-chip bh-chip--static">Chip</span>

<button class="bh-chip bh-chip--selected">Chip</button>

<button class="bh-chip bh-chip--icon-l bh-chip--selected"><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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg>Chip</button>

<button class="bh-chip bh-chip--icon-r bh-chip--selected">Chip<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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg></button>

<button class="bh-chip bh-chip--icon-lr bh-chip--selected"><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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg>Chip<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>z_icon</title>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<path d="M16.2807493,3.80483241 C16.3330752,3.80483241 16.3797443,3.82604561 16.4207565,3.8670578 L20.0609422,7.50724351 C20.1026615,7.54896281 20.1224605,7.59421765 20.1231676,7.64725066 C20.1217534,7.70099077 20.1019544,7.74483139 20.0644777,7.78230805 L19.6168791,8.22990664 C19.5426329,8.30415285 19.4542446,8.32890159 19.3524212,8.30485996 L15.3105988,7.48603031 L17.702034,9.87746544 C17.7395106,9.9149421 17.7578954,9.95878272 17.7607238,10.0096944 C17.7628452,10.059899 17.741632,10.1051538 17.7006198,10.146166 L17.2134232,10.6333626 C17.1752394,10.6715464 17.1313988,10.6913453 17.0790729,10.6913453 C17.0260399,10.6906382 16.9814922,10.6729606 16.9440155,10.6354839 L13.2981729,6.98964135 C13.2571607,6.94862916 13.2352404,6.90266721 13.2338262,6.85175553 C13.232412,6.80084384 13.252211,6.755589 13.2939303,6.7138697 L13.7351649,6.27263507 C13.8072898,6.20051018 13.8935569,6.17788276 13.9946731,6.20404571 L18.0980138,7.07166574 L15.6570812,4.63073313 C15.616069,4.58972093 15.5941487,4.54375899 15.5927344,4.4928473 C15.5920273,4.44122851 15.6104121,4.39738789 15.6535456,4.35425438 L16.139328,3.86847202 C16.1810473,3.82675272 16.2270092,3.80624662 16.2807493,3.80483241 Z M7.47302728,13.7212979 C6.9327977,14.2615275 6.95188958,14.8406479 7.52464607,15.4614877 C7.62293392,15.5654324 7.77566898,15.7224101 7.98497259,15.9317137 C8.19356909,16.1403102 8.35478943,16.2972879 8.4658052,16.4026468 C9.08735206,16.9761104 9.6650583,16.9937881 10.2052879,16.4535585 C10.4308549,16.2279914 10.5680337,15.9974746 10.6139956,15.7605939 C10.6599575,15.5237131 10.5963179,15.2620836 10.4209554,14.973584 C10.3834788,14.9064089 10.3665082,14.8498403 10.3679224,14.8074139 C10.3707509,14.7649875 10.3940854,14.7204398 10.4400473,14.6744778 L10.9880551,14.1264701 C11.0227033,14.0918219 11.0630084,14.0741442 11.1096775,14.07273 C11.1556394,14.0706087 11.1952374,14.0875792 11.2249359,14.125763 C11.4625237,14.3789072 11.6131375,14.6737707 11.6725345,15.0089394 C11.7340527,15.3448151 11.6972832,15.6941258 11.5608116,16.0568716 C11.42434,16.4196174 11.1909947,16.7689281 10.8558261,17.1040967 C10.3346884,17.6252344 9.79940859,17.8960563 9.25281505,17.9179767 C8.70410018,17.9391899 8.17801274,17.7157441 7.6738456,17.2497607 C7.56990091,17.1528871 7.40302371,16.9916668 7.17533532,16.7639784 C6.9434043,16.5320474 6.77864842,16.3616346 6.67753215,16.2534473 C6.21861985,15.7563512 5.99941675,15.231678 6.01850863,14.6780134 C6.03830762,14.1236417 6.30630109,13.589776 6.82390325,13.0721739 C7.15907187,12.7370053 7.5069684,12.5022458 7.87042129,12.3664813 C8.23387418,12.2307168 8.58318492,12.1939473 8.91835354,12.2547584 C9.25352215,12.3141554 9.54767857,12.464062 9.80223702,12.7030641 L9.81355072,12.7143778 C9.84324921,12.7440763 9.85597713,12.7822601 9.85173449,12.8261007 C9.84890606,12.8713556 9.83122839,12.9088322 9.8008228,12.9392378 L9.25281505,13.4872456 C9.20685311,13.5332075 9.16301249,13.5572491 9.11917187,13.5586633 C9.07745257,13.5607847 9.02088402,13.5438141 8.95370888,13.5063374 C8.66591642,13.3316821 8.40428691,13.2666282 8.16952746,13.3104689 C7.93547511,13.3550166 7.70212988,13.4921953 7.47302728,13.7212979 Z M14.0045726,10.8299383 C13.788905,10.5987144 13.6411197,10.443858 13.5626309,10.3653691 C13.4763639,10.2791021 13.3215075,10.1313168 13.0973546,9.92272028 C12.7805708,9.62856386 12.470858,9.48007143 12.1682163,9.48007143 C11.8655746,9.48007143 11.5926314,9.6016938 11.3472653,9.84705985 C11.0983637,10.0959614 10.973913,10.3717331 10.9746171,10.6736677 C10.9753272,10.9756023 11.1252338,11.2839008 11.4229258,11.5971491 C11.5282847,11.7095791 11.6767771,11.8623142 11.8712315,12.0567685 C12.0614432,12.2469803 12.2148854,12.3961798 12.3301438,12.5043671 C12.6440992,12.8027662 12.9509835,12.954087 13.2507968,12.9555013 C13.5520243,12.9583297 13.8270888,12.8317576 14.0795259,12.5793205 C14.3319631,12.3268833 14.4578281,12.0525259 14.4557331,11.7562482 C14.4535854,11.4599704 14.3036788,11.1516719 14.0045726,10.8299383 Z M10.6981413,9.19793583 C11.1959445,8.70013265 11.7248604,8.43567472 12.2863031,8.40456202 C12.8477459,8.37344932 13.3837329,8.59830928 13.8949711,9.07984899 C14.119831,9.2891526 14.2845869,9.4454232 14.3892387,9.550075 C14.4896479,9.65048417 14.6445043,9.81382583 14.8531008,10.0379787 C15.3452471,10.5598235 15.576471,11.0936891 15.5453583,11.6409898 C15.5142456,12.1868762 15.2434237,12.7164992 14.7300642,13.2298587 C14.2131691,13.7467537 13.6821319,14.0189899 13.1383668,14.0479812 C12.5938946,14.0762655 12.060029,13.8450416 11.5381842,13.3528953 C11.4264613,13.2482435 11.2659481,13.0919729 11.0566444,12.8826693 C10.8438053,12.6698301 10.6854134,12.5071956 10.5800545,12.3947656 C10.0985148,11.8835274 9.87294769,11.3482475 9.90193907,10.7889261 C9.93093045,10.2296046 10.1960955,9.69998164 10.6981413,9.19793583 Z M4.33347317,15.6743268 C4.37519247,15.6326075 4.4204473,15.6113943 4.46853057,15.6113943 C4.51802804,15.6113943 4.56328287,15.6311933 4.60429507,15.6722055 L8.25579449,19.3237049 C8.29327114,19.3611816 8.31165592,19.4050222 8.31377724,19.456641 C8.31589856,19.5068456 8.29468536,19.5521004 8.25296606,19.5938197 L7.70990805,20.1368777 C7.67243139,20.1743544 7.62859077,20.1941534 7.57626487,20.1941534 C7.52252475,20.1941534 7.47797703,20.1764757 7.44050037,20.1389991 L3.78900095,16.4874996 C3.74798876,16.4464874 3.72889687,16.4005255 3.73101819,16.3489067 C3.73313951,16.2987021 3.7529385,16.2548615 3.79041516,16.2173848 L4.33347317,15.6743268 Z M16.874719,16.9527759 C18.2224646,15.6050304 18.9027013,13.8443345 18.9217932,12.0772746 L20.7510784,10.2479894 C21.3146425,13.0940942 20.4951058,16.1608163 18.2889326,18.3669895 C16.0827594,20.5731626 13.0160373,21.3926994 10.1699325,20.8291353 L11.9999249,18.9991429 C13.7662776,18.9807581 15.5269735,18.3005214 16.874719,16.9527759 Z M6.9752241,7.05328096 C5.62747858,8.40102648 4.94724186,10.1617224 4.92885708,11.9280751 L3.09886473,13.7580675 C2.53459352,10.9112556 3.35483738,7.84524055 5.56101054,5.6390674 C7.7671837,3.43289424 10.8331987,2.61265037 13.6800106,3.17692158 L11.8507254,5.00620683 C10.0836655,5.02529871 8.32296963,5.70553543 6.9752241,7.05328096 Z" fill-rule="nonzero"></path>
		</g>
	</svg></button>
 

form fields stacked

select field base

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (icons):
- Select icon
- Select Disabled icon
Notes:
- The bh-form-field-error class would be added via Javascript when there is an error with the form, and removed when the error has been fixed.

Helper text.
Helper text.
Error message.
Helper text.
SCSS file
<div class="bh-select">
	<label class="bh-select-label" for="select">Label</label>
	<select class="bh-select-field" id="select" aria-invalid="false" aria-describedby="select-helper">
		<option selected disabled>Choose one...</option>
		<option value="1">Item #1</option>
		<option value="2">Item #2</option>
		<option value="3">Item #3</option>
	</select>
	<div class="bh-select-helper" id="select-helper">Helper text.</div>
	<div class="bh-select-error"></div>
</div>

<div class="bh-select bh-form-field-error">
	<label class="bh-select-label" for="select-error">Label</label>
	<select class="bh-select-field" id="select-error" aria-invalid="true" aria-describedby="select-error-helper">
		<option selected disabled>Choose one...</option>
		<option value="1">Item #1</option>
		<option value="2">Item #2</option>
		<option value="3">Item #3</option>
	</select>
	<div class="bh-select-helper">Helper text.</div>
	<div class="bh-select-error" id="select-error-helper">Error message.</div>
</div>

<div class="bh-select bh-form-field-disabled">
	<label class="bh-select-label" for="select-disabled">Label</label>
	<select class="bh-select-field" disabled id="select-disabled" aria-disabled="true" aria-describedby="select-disabled-helper">
		<option selected disabled>Choose one...</option>
		<option value="1">Item #1</option>
		<option value="2">Item #2</option>
		<option value="3">Item #3</option>
	</select>
	<div class="bh-select-helper" id="select-disabled-helper">Helper text.</div>
	<div class="bh-select-error"></div>
</div>
 

select field security question

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (icons):
- Select icon
- Select Disabled icon
Other components needed (SCSS):
- Select Field Base

Please choose a security question.
<div class="bh-select">
	<label class="bh-select-label" for="select-security-question">Security question</label>
	<select class="bh-select-field" id="select-security-question" aria-invalid="false">
		<option selected disabled>Please select one</option>
		<option value="What was the name of your first pet?">What was the name of your first pet?</option>
		<option value="Where did you first attend school?">Where did you first attend school?</option>
		<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
		<option value="What is your favorite car model?">What is your favorite car model?</option>
	</select>
	<div class="bh-select-error"></div>
</div>

<div class="bh-select bh-form-field-error">
	<label class="bh-select-label" for="select-security-question-error">Security question</label>
	<select class="bh-select-field" id="select-security-question-error" aria-invalid="true">
		<option selected disabled>Please select one</option>
		<option value="What was the name of your first pet?">What was the name of your first pet?</option>
		<option value="Where did you first attend school?">Where did you first attend school?</option>
		<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
		<option value="What is your favorite car model?">What is your favorite car model?</option>
	</select>
	<div class="bh-select-error">Please choose a security question.</div>
</div>

<div class="bh-select bh-form-field-disabled">
	<label class="bh-select-label" for="select-security-question-disabled">Security question</label>
	<select class="bh-select-field" disabled id="select-security-question-disabled" aria-disabled="true">
		<option selected disabled>Please select one</option>
		<option value="What was the name of your first pet?">What was the name of your first pet?</option>
		<option value="Where did you first attend school?">Where did you first attend school?</option>
		<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
		<option value="What is your favorite car model?">What is your favorite car model?</option>
	</select>
	<div class="bh-select-error"></div>
</div>

text input base

State classes: bh-form-field-errorbh-form-field-disabled
Note: The bh-form-field-error class would be added via Javascript when there is an error with the form, and removed when the error has been fixed.

Helper text (optional).
Helper text (optional).
Error message.
Helper text (optional).
SCSS file
<div class="bh-text-input-field">
	<label class="bh-text-input-field-label" for="textbox">Label</label>
	<input class="bh-text-input-field-input" type="text" id="textbox" placeholder="Placeholder" aria-invalid="false" aria-describedby="textbox-helper" />
	<div class="bh-text-input-field-helper" id="textbox-helper">Helper text (optional).</div>
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-error">Label</label>
	<input class="bh-text-input-field-input" type="text" id="textbox-error" placeholder="Placeholder" aria-invalid="true" aria-describedby="textbox-error-helper" />
	<div class="bh-text-input-field-helper">Helper text (optional).</div>
	<div class="bh-text-input-field-error" id="textbox-error-helper">Error message.</div>
</div>

<div class="bh-text-input-field bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-disabled">Label</label>
	<input disabled class="bh-text-input-field-input" type="text" id="textbox-disabled" placeholder="Placeholder" aria-disabled="true" aria-describedby="textbox-disabled-helper" />
	<div class="bh-text-input-field-helper" id="textbox-disabled-helper
    ">Helper text (optional).</div>
	<div class="bh-text-input-field-error"></div>
</div>
 

text input date of birth

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Notes:
- The bh-text-input-dob-helper div is only shown when there are characters in the field, since the placeholder would be gone.

Please use format MM/DD/YYYY.
Please provide valid date in format MM/DD/YYYY.
Please use format MM/DD/YYYY.
Please provide valid date in format MM/DD/YYYY.
SCSS file JS file
<div class="bh-text-input-field bh-text-input-dob">
	<label class="bh-text-input-field-label" for="textbox-dob">Date of birth</label>
	<input class="bh-text-input-field-input bh-text-input-dob-input" type="tel" id="textbox-dob" placeholder="MM/DD/YYYY" autocomplete="bday" name="bday" aria-invalid="false" />
	<div class="bh-text-input-field-helper bh-text-input-dob-helper">Please use format MM/DD/YYYY.</div>
	<div class="bh-text-input-field-error">Please provide valid date in format MM/DD/YYYY.</div>
</div>

<div class="bh-text-input-field bh-text-input-dob bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-dob-error">Date of birth</label>
	<input class="bh-text-input-field-input bh-text-input-dob-input" type="tel" id="textbox-dob-error" placeholder="MM/DD/YYYY" autocomplete="bday" name="bday" aria-invalid="true" />
	<div class="bh-text-input-field-helper bh-text-input-dob-helper">Please use format MM/DD/YYYY.</div>
	<div class="bh-text-input-field-error">Please provide valid date in format MM/DD/YYYY.</div>
</div>

<div class="bh-text-input-field bh-text-input-dob bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-dob-disabled">Date of birth</label>
	<input disabled class="bh-text-input-field-input bh-text-input-dob-input" type="tel" id="textbox-dob-disabled" placeholder="MM/DD/YYYY" autocomplete="bday" name="bday" aria-disabled="true" />
	<div class="bh-text-input-field-helper bh-text-input-dob-helper"></div>
	<div class="bh-text-input-field-error"></div>
</div>
 
 

text input email create

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base

This will be your login.
Please provide valid email address.
This will be your login.
Please provide valid email address.
This will be your login.
SCSS file JS file
<div class="bh-text-input-field">
	<label class="bh-text-input-field-label" for="textbox-email-create">Email address</label>
	<input class="bh-text-input-field-input bh-text-input-field-input-email" type="email" id="textbox-email-create" placeholder="Placeholder" autocomplete="email" name="email" aria-invalid="false" aria-describedby="textbox-email-create-helper" />
	<div class="bh-text-input-field-helper" id="textbox-email-create-helper">This will be your login.</div>
	<div class="bh-text-input-field-error">Please provide valid email address.</div>
</div>

<div class="bh-text-input-field bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-email-create-error">Email address</label>
	<input class="bh-text-input-field-input bh-text-input-field-input-email" type="email" id="textbox-email-create-error" placeholder="Placeholder" autocomplete="email" name="email" aria-invalid="true" aria-describedby="textbox-email-create-error-helper" />
	<div class="bh-text-input-field-helper">This will be your login.</div>
	<div class="bh-text-input-field-error" id="textbox-email-create-error-helper">Please provide valid email address.</div>
</div>

<div class="bh-text-input-field bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-email-create-disabled">Email address</label>
	<input disabled class="bh-text-input-field-input bh-text-input-field-input-email" type="email" id="textbox-email-create-disabled" placeholder="Placeholder" autocomplete="email" name="email" aria-invalid="true" aria-describedby="textbox-email-create-disabled-helper" />
	<div class="bh-text-input-field-helper" id="textbox-email-create-disabled-helper">This will be your login.</div>
	<div class="bh-text-input-field-error"></div>
</div>
 
 

text input email enter

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Other components needed (JS):
- Text Input Email Create

Please provide valid email address.
<div class="bh-text-input-field">
	<label class="bh-text-input-field-label" for="textbox-email-enter">Email address</label>
	<input class="bh-text-input-field-input bh-text-input-field-input-email" type="email" id="textbox-email-enter" placeholder="Placeholder" autocomplete="email" name="email" aria-invalid="false" />
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-email-enter-error">Email address</label>
	<input class="bh-text-input-field-input bh-text-input-field-input-email" type="email" id="textbox-email-enter-error" placeholder="Placeholder" autocomplete="email" name="email" aria-invalid="true" />
	<div class="bh-text-input-field-error">Please provide valid email address.</div>
</div>

<div class="bh-text-input-field bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-email-enter-disabled">Email address</label>
	<input disabled class="bh-text-input-field-input bh-text-input-field-input-email" type="email" id="textbox-email-enter-disabled" placeholder="Placeholder" autocomplete="email" name="email" aria-disabled="true" />
	<div class="bh-text-input-field-error"></div>
</div>

text input name

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base

Please provide valid first name.
<div class="bh-text-input-field">
	<label class="bh-text-input-field-label" for="textbox-name">Name</label>
	<input class="bh-text-input-field-input" type="text" id="textbox-name" placeholder="First" autocomplete="given-name" name="fname" aria-invalid="false" />
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-name-error">Name</label>
	<input class="bh-text-input-field-input" type="text" id="textbox-name-error" placeholder="First" autocomplete="given-name" name="fname" aria-invalid="true" />
	<div class="bh-text-input-field-error">Please provide valid first name.</div>
</div>

<div class="bh-text-input-field bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-name-disabled">Name</label>
	<input disabled class="bh-text-input-field-input" type="text" id="textbox-name-disabled" placeholder="First" autocomplete="given-name" name="fname" aria-disabled="true" />
	<div class="bh-text-input-field-error"></div>
</div>

text input name first

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base

Please provide valid first name.
<div class="bh-text-input-field">
	<label class="bh-text-input-field-label" for="textbox-name-first">First name</label>
	<input class="bh-text-input-field-input" type="text" id="textbox-name-first" placeholder="First" autocomplete="given-name" name="fname" aria-invalid="false" />
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-name-first-error">First name</label>
	<input class="bh-text-input-field-input" type="text" id="textbox-name-first-error" placeholder="First" autocomplete="given-name" name="fname" aria-invalid="true" />
	<div class="bh-text-input-field-error">Please provide valid first name.</div>
</div>

<div class="bh-text-input-field bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-name-first-disabled">First name</label>
	<input disabled class="bh-text-input-field-input" type="text" id="textbox-name-first-disabled" placeholder="First" autocomplete="given-name" name="fname" aria-disabled="true" />
	<div class="bh-text-input-field-error"></div>
</div>

text input name last

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base

Please provide valid last name.
<div class="bh-text-input-field">
	<label class="bh-text-input-field-label" for="textbox-name-last">Last name</label>
	<input class="bh-text-input-field-input" type="text" id="textbox-name-last" placeholder="Last" autocomplete="family-name" name="lname" aria-invalid="false" />
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-name-last-error">Last name</label>
	<input class="bh-text-input-field-input" type="text" id="textbox-name-last-error" placeholder="Last" autocomplete="family-name" name="lname" aria-invalid="true" />
	<div class="bh-text-input-field-error">Please provide valid last name.</div>
</div>

<div class="bh-text-input-field bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-name-last-disabled">Last name</label>
	<input disabled class="bh-text-input-field-input" type="text" id="textbox-name-last-disabled" placeholder="Last" autocomplete="family-name" name="lname" aria-disabled="true" />
	<div class="bh-text-input-field-error"></div>
</div>

text input password create

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Other components needed (icons):
- Visibility Shown icon
- Visibility Hidden icon

Your password must be at least 8 characters long.
SCSS file JS file
<div class="bh-text-input-field bh-text-input-create-pw">
	<label class="bh-text-input-field-label" for="textbox-create-pw">Password</label>
	<div class="bh-text-input-create-pw-wrap">
		<input class="bh-text-input-field-input bh-text-input-create-pw-input" type="password" id="textbox-create-pw" placeholder="Create password" autocomplete="new-password" name="password" aria-invalid="false" />
		<button type="button" role="button" class="bh-text-input-create-pw-toggle" aria-label="Show password">
			<img class="bh-text-input-create-pw-hidden" alt="" src="assets/toolkit/images/bh-ic-visibility-hidden.svg" />
			<img class="bh-text-input-create-pw-shown" alt="" src="assets/toolkit/images/bh-ic-visibility-shown.svg" />
		</button>
	</div>
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-text-input-create-pw bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-create-pw-error">Password</label>
	<div class="bh-text-input-create-pw-wrap">
		<input class="bh-text-input-field-input bh-text-input-create-pw-input" type="password" id="textbox-create-pw-error" placeholder="Create password" autocomplete="new-password" name="password" aria-invalid="true" />
		<button type="button" role="button" class="bh-text-input-create-pw-toggle" aria-label="Show password">
			<img class="bh-text-input-create-pw-hidden" alt="" src="assets/toolkit/images/bh-ic-visibility-hidden.svg" />
			<img class="bh-text-input-create-pw-shown" alt="" src="assets/toolkit/images/bh-ic-visibility-shown.svg" />
		</button>
	</div>
	<div class="bh-text-input-field-error">Your password must be at least 8 characters long.</div>
</div>

<div class="bh-text-input-field bh-text-input-create-pw bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-create-pw-disabled">Password</label>
	<div class="bh-text-input-create-pw-wrap">
		<input disabled class="bh-text-input-field-input bh-text-input-create-pw-input" type="password" id="textbox-create-pw-disabled" placeholder="Create password" autocomplete="new-password" name="password" aria-disabled="true" />
	</div>
	<div class="bh-text-input-field-error"></div>
</div>
 
 

text input password enter

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base

Please provide a valid password.
<div class="bh-text-input-field">
	<label class="bh-text-input-field-label" for="textbox-enter-password">Password</label>
	<input class="bh-text-input-field-input" type="password" id="textbox-enter-password" autocomplete="current-password" name="password" aria-invalid="false" />
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-enter-password-error">Password</label>
	<input class="bh-text-input-field-input" type="password" id="textbox-enter-password-error" autocomplete="current-password" name="password" aria-invalid="true" />
	<div class="bh-text-input-field-error">Please provide a valid password.</div>
</div>

<div class="bh-text-input-field bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-enter-password-disabled">Password</label>
	<input disabled class="bh-text-input-field-input" type="password" id="textbox-enter-password-disabled" autocomplete="current-password" name="password" aria-disabled="true" />
	<div class="bh-text-input-field-error"></div>
</div>

text input password new

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Other components needed (JS):
- Text Input Password Create
Other components needed (icons):
- Visibility Shown icon
- Visibility Hidden icon

Password is hidden Password is shown
Password is hidden Password is shown
Please provide a valid password.
<div class="bh-text-input-field bh-text-input-create-pw">
	<label class="bh-text-input-field-label" for="textbox-new-pw">New password</label>
	<div class="bh-text-input-create-pw-wrap">
		<input class="bh-text-input-field-input bh-text-input-create-pw-input" type="password" id="textbox-new-pw" placeholder="Create password" autocomplete="new-password" name="password" aria-invalid="false" />
		<div class="bh-text-input-create-pw-toggle" aria-label="Click to toggle password visibility" tabindex="0">
			<img class="bh-text-input-create-pw-hidden" alt="Password is hidden" src="assets/toolkit/images/bh-ic-visibility-hidden.svg" />
			<img class="bh-text-input-create-pw-shown" alt="Password is shown" src="assets/toolkit/images/bh-ic-visibility-shown.svg" />
		</div>
	</div>
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-text-input-create-pw bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-new-pw-error">New password</label>
	<div class="bh-text-input-create-pw-wrap">
		<input class="bh-text-input-field-input bh-text-input-create-pw-input" type="password" id="textbox-new-pw-error" placeholder="Create password" autocomplete="new-password" name="password" aria-invalid="true" />
		<div class="bh-text-input-create-pw-toggle" aria-label="Click to toggle password visibility" tabindex="0">
			<img class="bh-text-input-create-pw-hidden" alt="Password is hidden" src="assets/toolkit/images/bh-ic-visibility-hidden.svg" />
			<img class="bh-text-input-create-pw-shown" alt="Password is shown" src="assets/toolkit/images/bh-ic-visibility-shown.svg" />
		</div>
	</div>
	<div class="bh-text-input-field-error">Please provide a valid password.</div>
</div>

<div class="bh-text-input-field bh-text-input-create-pw bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-new-pw-disabled">New password</label>
	<div class="bh-text-input-create-pw-wrap">
		<input disabled class="bh-text-input-field-input bh-text-input-create-pw-input" type="password" id="textbox-new-pw-disabled" placeholder="Create password" autocomplete="new-password" name="password" aria-disabled="true" />
	</div>
	<div class="bh-text-input-field-error"></div>
</div>

text input phone mobile

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Notes:
- Autoformats entry to phone number format.
- Error state is shown when phone number is incomplete, or if phone number is empty when input field is set to required. Checked on blur.

Optional.
Please enter valid phone number or leave blank.
Optional.
Please enter valid phone number or leave blank.
Optional.
Please enter valid phone number or leave blank.
SCSS file JS file
<div class="bh-text-input-field bh-text-input-phone">
	<label class="bh-text-input-field-label" for="textbox-phone-mobile">Mobile phone number</label>
	<input class="bh-text-input-field-input bh-text-input-phone-input" type="tel" id="textbox-phone-mobile" placeholder="(   )   -" autocomplete="tel" name="mobile" aria-invalid="false" aria-describedby="textbox-phone-mobile-helper" />
	<div class="bh-text-input-field-helper" id="textbox-phone-mobile-helper">Optional.</div>
	<div class="bh-text-input-field-error">Please enter valid phone number or leave blank.</div>
</div>

<div class="bh-text-input-field bh-text-input-phone bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-phone-mobile-error">Mobile phone number</label>
	<input class="bh-text-input-field-input bh-text-input-phone-input" type="tel" id="textbox-phone-mobile-error" placeholder="(   )   -" autocomplete="tel" name="mobile" aria-invalid="true" aria-describedby="textbox-phone-mobile-error-helper" />
	<div class="bh-text-input-field-helper">Optional.</div>
	<div class="bh-text-input-field-error" id="textbox-phone-mobile-error-helper">Please enter valid phone number or leave blank.</div>
</div>

<div class="bh-text-input-field bh-text-input-phone bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-phone-mobile-disabled">Mobile phone number</label>
	<input disabled class="bh-text-input-field-input bh-text-input-phone-input" type="tel" id="textbox-phone-mobile-disabled" placeholder="(   )   -" autocomplete="tel" name="mobile" aria-disabled="true" aria-describedby="textbox-phone-mobile-disabled-helper" />
	<div class="bh-text-input-field-helper" id="textbox-phone-mobile-disabled-helper">Optional.</div>
	<div class="bh-text-input-field-error">Please enter valid phone number or leave blank.</div>
</div>
 
 

text input phone number

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS & JS):
- Text Input Base
Notes:
- Autoformats entry to phone number format.
- Error state is shown when phone number is incomplete, or if phone number is empty when input field is set to required. Checked on blur.

Please provide a valid phone number.
Please provide a valid phone number.
Please provide a valid phone number.
<div class="bh-text-input-field bh-text-input-phone">
	<label class="bh-text-input-field-label" for="textbox-phone-number">Phone number</label>
	<input class="bh-text-input-field-input bh-text-input-phone-input" type="tel" id="textbox-phone-number" placeholder="(   )   -" autocomplete="tel" name="phone" aria-invalid="false" />
	<div class="bh-text-input-field-error">Please provide a valid phone number.</div>
</div>

<div class="bh-text-input-field bh-text-input-phone bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-phone-number-error">Phone number</label>
	<input class="bh-text-input-field-input bh-text-input-phone-input" type="tel" id="textbox-phone-number-error" placeholder="(   )   -" autocomplete="tel" name="phone" aria-invalid="true" />
	<div class="bh-text-input-field-error">Please provide a valid phone number.</div>
</div>

<div class="bh-text-input-field bh-text-input-phone bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-phone-number-disabled">Phone number</label>
	<input disabled class="bh-text-input-field-input bh-text-input-phone-input" type="tel" id="textbox-phone-number-disabled" placeholder="(   )   -" autocomplete="tel" name="phone" aria-disabled="true" />
	<div class="bh-text-input-field-error">Please provide a valid phone number.</div>
</div>

text input search field

Modifier classes: bh-search-field--large
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (icons):
- Search icon (with fill color #7b7f84)
- Close icon (with fill color #7e8287)
Notes:
- The bh-form-field-error class would be added via Javascript when there is an error with the form, and removed when the error has been fixed.

SCSS file
<input aria-label="Search" type="search" class="bh-search-field" placeholder="Placeholder" aria-invalid="false" />

<input aria-label="Search" type="search" class="bh-search-field bh-form-field-error" placeholder="Placeholder" aria-invalid="true" />

<input disabled aria-label="Search" type="search" class="bh-search-field bh-form-field-disabled" placeholder="Placeholder" aria-disabled="true" />

<input aria-label="Search" type="search" class="bh-search-field bh-search-field--large" placeholder="Placeholder" aria-invalid="false" />

<input aria-label="Search" type="search" class="bh-search-field bh-search-field--large bh-form-field-error" placeholder="Placeholder" aria-invalid="true" />

<input disabled aria-label="Search" type="search" class="bh-search-field bh-search-field--large bh-form-field-disabled" placeholder="Placeholder" aria-disabled="true" />
 

text input search field on dark

Modifier classes: bh-search-field--large
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Search Field
Other components needed (icons):
- Search icon (with fill color #7b7f84)
- Close icon (with fill color #7e8287)

<input aria-label="Search" type="search" class="bh-search-field bh-search-field--on-dark" placeholder="Placeholder" aria-invalid="false" />

<input aria-label="Search" type="search" class="bh-search-field bh-search-field--on-dark bh-form-field-error" placeholder="Placeholder" aria-invalid="true" />

<input disabled aria-label="Search" type="search" class="bh-search-field bh-search-field--on-dark bh-form-field-disabled" placeholder="Placeholder" aria-disabled="true" />

<input aria-label="Search" type="search" class="bh-search-field bh-search-field--on-dark bh-search-field--large" placeholder="Placeholder" aria-invalid="false" />

<input aria-label="Search" type="search" class="bh-search-field bh-search-field--on-dark bh-search-field--large bh-form-field-error" placeholder="Placeholder" aria-invalid="true" />

<input disabled aria-label="Search" type="search" class="bh-search-field bh-search-field--on-dark bh-search-field--large bh-form-field-disabled" placeholder="Placeholder" aria-disabled="true" />

text input security answer

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base

Please answer your security question.
<div class="bh-text-input-field">
	<label class="bh-text-input-field-label" for="textbox-security-answer">Answer</label>
	<input class="bh-text-input-field-input" type="text" id="textbox-security-answer" aria-invalid="false" />
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-security-answer-error">Answer</label>
	<input class="bh-text-input-field-input" type="text" id="textbox-security-answer-error" aria-invalid="true" />
	<div class="bh-text-input-field-error">Please answer your security question.</div>
</div>

<div class="bh-text-input-field bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-security-answer-disabled">Answer</label>
	<input disabled class="bh-text-input-field-input" type="text" id="textbox-security-answer-disabled" aria-disabled="true" />
	<div class="bh-text-input-field-error"></div>
</div>

text input security code

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Notes:
- Only numbers 0-9 allowed

Please enter a valid security code.
<div class="bh-text-input-field">
	<label class="bh-text-input-field-label" for="textbox-security">Security code</label>
	<input class="bh-text-input-field-input" type="text" pattern="[0-9]+" id="textbox-security" placeholder="Placeholder" autocomplete="one-time-code" name="code" aria-invalid="false" />
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-security-error">Security code</label>
	<input class="bh-text-input-field-input" type="text" pattern="[0-9]+" id="textbox-security-error" placeholder="Placeholder" autocomplete="one-time-code" name="code" aria-invalid="true" />
	<div class="bh-text-input-field-error">Please enter a valid security code.</div>
</div>

<div class="bh-text-input-field bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-security-disabled">Security code</label>
	<input disabled class="bh-text-input-field-input" pattern="[0-9]+" type="text" id="textbox-security-disabled" placeholder="Placeholder" autocomplete="one-time-code" name="code" aria-disabled="true" />
	<div class="bh-text-input-field-error"></div>
</div>

text input social security number

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Notes:
- Autoformats entry to SSN format

Please provide valid Social Security Number.
Please provide valid Social Security Number.
Please provide valid Social Security Number.
SCSS file JS file
<div class="bh-text-input-field bh-text-input-ssn">
	<label class="bh-text-input-field-label" for="textbox-ssn">Social Security Number</label>
	<input class="bh-text-input-field-input bh-text-input-ssn-input" type="tel" id="textbox-ssn" placeholder="XXX - XX - XXXX" aria-invalid="false" />
	<div class="bh-text-input-field-error">Please provide valid Social Security Number.</div>
</div>

<div class="bh-text-input-field bh-text-input-ssn bh-form-field-error">
	<label class="bh-text-input-field-label" for="textbox-ssn-error">Social Security Number</label>
	<input class="bh-text-input-field-input bh-text-input-ssn-input" type="tel" id="textbox-ssn-error" placeholder="XXX - XX - XXXX" aria-invalid="true" />
	<div class="bh-text-input-field-error">Please provide valid Social Security Number.</div>
</div>

<div class="bh-text-input-field bh-text-input-ssn bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textbox-ssn-disabled">Social Security Number</label>
	<input disabled class="bh-text-input-field-input bh-text-input-ssn-input" type="tel" id="textbox-ssn-disabled" placeholder="XXX - XX - XXXX" aria-disabled="true" />
	<div class="bh-text-input-field-error">Please provide valid Social Security Number.</div>
</div>
 
 

text input textarea

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Other components needed (icons):
- Grabber icon

Caption text.
Caption text.
Error message.
Caption text.
SCSS file
<div class="bh-text-input-field bh-text-input-textarea">
	<label class="bh-text-input-field-label" for="textarea">Label</label>
	<div class="bh-text-input-textarea-wrap">
		<textarea class="bh-text-input-field-input bh-text-input-textarea-input" id="textarea" placeholder="Message..." aria-invalid="false"></textarea>
	</div>
	<div class="bh-text-input-field-helper">Caption text.</div>
	<div class="bh-text-input-field-error"></div>
</div>

<div class="bh-text-input-field bh-text-input-textarea bh-form-field-error">
	<label class="bh-text-input-field-label" for="textarea-error">Label</label>
	<div class="bh-text-input-textarea-wrap">
		<textarea class="bh-text-input-field-input bh-text-input-textarea-input" id="textarea-error" placeholder="Message..." aria-invalid="true"></textarea>
	</div>
	<div class="bh-text-input-field-helper">Caption text.</div>
	<div class="bh-text-input-field-error">Error message.</div>
</div>

<div class="bh-text-input-field bh-text-input-textarea bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textarea-disabled">Label</label>
	<div class="bh-text-input-textarea-wrap">
		<textarea disabled class="bh-text-input-field-input bh-text-input-textarea-input" id="textarea-disabled" placeholder="Message..." aria-disabled="true"></textarea>
	</div>
	<div class="bh-text-input-field-helper">Caption text.</div>
</div>
 

text input textarea with character count

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
- Text Input Textarea
Other components needed (icons):
- Grabber icon
Notes:
- Add the following as HTML data attribute to the textarea to define the character count limit: data-max-char-count.

Please enter a summary or select Cancel edit.
Please enter a summary or select Cancel edit.
Please enter a summary or select Cancel edit.
SCSS file JS file
<div class="bh-text-input-field bh-text-input-textarea bh-text-input-textarea--char-count">
	<label class="bh-text-input-field-label" for="textarea-char-count">Label</label>
	<div class="bh-text-input-textarea-wrap">
		<textarea class="bh-text-input-field-input bh-text-input-textarea-input" id="textarea-char-count" data-max-char-count="20" placeholder="Message..." aria-invalid="false"></textarea>
	</div>
	<div class="bh-text-input-field-helper bh-text-input-field-helper-char-count" aria-live="polite"></div>
	<div class="bh-text-input-textarea-generic-error">Please enter a summary or select Cancel edit.</div>
</div>

<div class="bh-text-input-field bh-text-input-textarea bh-text-input-textarea--char-count bh-form-field-error">
	<label class="bh-text-input-field-label" for="textarea-char-count-error">Label</label>
	<div class="bh-text-input-textarea-wrap">
		<textarea class="bh-text-input-field-input bh-text-input-textarea-input" id="textarea-char-count-error" data-max-char-count="30" placeholder="Message..." aria-invalid="true"></textarea>
	</div>
	<div class="bh-text-input-field-helper bh-text-input-field-helper-char-count" aria-live="polite"></div>
	<div class="bh-text-input-textarea-generic-error">Please enter a summary or select Cancel edit.</div>
</div>

<div class="bh-text-input-field bh-text-input-textarea bh-text-input-textarea--char-count bh-form-field-disabled">
	<label class="bh-text-input-field-label" for="textarea-char-count-disabled">Label</label>
	<div class="bh-text-input-textarea-wrap">
		<textarea disabled aria-disabled="true" class="bh-text-input-field-input bh-text-input-textarea-input" id="textarea-char-count-disabled" data-max-char-count="40" placeholder="Message..." aria-disabled="true"></textarea>
	</div>
	<div class="bh-text-input-field-helper bh-text-input-field-helper-char-count" aria-live="polite"></div>
	<div class="bh-text-input-textarea-generic-error">Please enter a summary or select Cancel edit.</div>
</div>
 
 

form fields horizontal

select field horizontal base

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (icons):
- Select icon
- Select Disabled icon
Other components needed (SCSS):
- Select Field Base
Notes:
- The bh-form-field-error class would be added via Javascript when there is an error with the form, and removed when the error has been fixed.

Error message.
SCSS file
<div class="bh-select bh-select-horiz">
	<div class="bh-select-horiz-flex">
		<label class="bh-select-label" for="select-horiz">Label</label>
		<div class="bh-select-horiz-right-side">
			<select class="bh-select-field bh-select-horiz-field" id="select-horiz" aria-invalid="false">
				<option selected disabled>Choose one...</option>
				<option value="1">Item #1</option>
				<option value="2">Item #2</option>
				<option value="3">Item #3</option>
			</select>
			<div class="bh-select-error"></div>
		</div>
	</div>
</div>

<div class="bh-select bh-select-horiz bh-form-field-error">
	<div class="bh-select-horiz-flex">
		<label class="bh-select-label" for="select-horiz-error">Label</label>
		<div class="bh-select-horiz-right-side">
			<select class="bh-select-field bh-select-horiz-field" id="select-horiz-error" aria-invalid="true">
				<option selected disabled>Choose one...</option>
				<option value="1">Item #1</option>
				<option value="2">Item #2</option>
				<option value="3">Item #3</option>
			</select>
			<div class="bh-select-error">Error message.</div>
		</div>
	</div>
</div>

<div class="bh-select bh-select-horiz bh-form-field-disabled">
	<div class="bh-select-horiz-flex">
		<label class="bh-select-label" for="select-horiz-disabled">Label</label>
		<div class="bh-select-horiz-right-side">
			<select class="bh-select-field bh-select-horiz-field" disabled id="select-horiz-disabled" aria-disabled="true">
				<option selected disabled>Choose one...</option>
				<option value="1">Item #1</option>
				<option value="2">Item #2</option>
				<option value="3">Item #3</option>
			</select>
			<div class="bh-select-error"></div>
		</div>
	</div>
</div>
 

text input horizontal base

State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Notes:
- The bh-form-field-error class would be added via Javascript when there is an error with the form, and removed when the error has been fixed.

Error message.
SCSS file
<div class="bh-text-input-field bh-text-input-horiz">
	<div class="bh-text-input-horiz-flex">
		<label class="bh-text-input-field-label bh-text-input-horiz-label" for="textbox-horiz">Label</label>
		<div class="bh-text-input-horiz-right-side">
			<input class="bh-text-input-field-input bh-text-input-horiz-input" type="text" id="textbox-horiz" placeholder="Placeholder" aria-invalid="false" />
			<div class="bh-text-input-field-error"></div>
		</div>
	</div>
</div>

<div class="bh-text-input-field bh-text-input-horiz bh-form-field-error">
	<div class="bh-text-input-horiz-flex">
		<label class="bh-text-input-field-label bh-text-input-horiz-label" for="textbox-horiz-error">Label</label>
		<div class="bh-text-input-horiz-right-side">
			<input class="bh-text-input-field-input bh-text-input-horiz-input" type="text" id="textbox-horiz-error" placeholder="Placeholder" aria-invalid="true" />
			<div class="bh-text-input-field-error">Error message.</div>
		</div>
	</div>
</div>

<div class="bh-text-input-field bh-text-input-horiz bh-form-field-disabled">
	<div class="bh-text-input-horiz-flex">
		<label class="bh-text-input-field-label bh-text-input-horiz-label" for="textbox-horiz-disabled">Label</label>
		<div class="bh-text-input-horiz-right-side">
			<input disabled class="bh-text-input-field-input bh-text-input-horiz-input" type="text" id="textbox-horiz-disabled" placeholder="Placeholder" aria-disabled="true" />
			<div class="bh-text-input-field-error"></div>
		</div>
	</div>
</div>
 

form fields controls

checkbox

Modifier classes: bh-checkbox-group--stacked
State classes: bh-form-field-errorbh-form-field-disabled
Notes:
- The modifier class above will stack the checkboxes on top of each other, instead of next to each other.
- The bh-form-field-error class would be added via Javascript when there is an error with the form, and removed when the error has been fixed.

Label
Error text.
Helper text (optional).
Label
Error text.
Helper text (optional).
Label
Error text.
Helper text (optional).
Label
Error text.
Helper text (optional).
SCSS file JS file
<fieldset class="bh-checkbox-group">
	<legend class="bh-checkbox-group-legend">Label</legend>
	<div class="bh-checkbox-group-flex">
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-1">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-1" id="bh-checkbox-group-choice-1" 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">Yes</span>
		</label>
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-2">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-2" id="bh-checkbox-group-choice-2" 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">No</span>
		</label>
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-3">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-3" id="bh-checkbox-group-choice-3" 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">Other</span>
		</label>
	</div>
	<div class="bh-checkbox-group-error">Error text.</div>
	<div class="bh-checkbox-group-helper">Helper text (optional).</div>
</fieldset>

<fieldset class="bh-checkbox-group bh-checkbox-group--stacked">
	<legend class="bh-checkbox-group-legend">Label</legend>
	<div class="bh-checkbox-group-flex">
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-1a">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-1a" id="bh-checkbox-group-choice-1a" 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">Yes</span>
		</label>
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-2a">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-2a" id="bh-checkbox-group-choice-2a" 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">No</span>
		</label>
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-3a">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-3a" id="bh-checkbox-group-choice-3a" 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">Other</span>
		</label>
	</div>
	<div class="bh-checkbox-group-error">Error text.</div>
	<div class="bh-checkbox-group-helper">Helper text (optional).</div>
</fieldset>

<fieldset class="bh-checkbox-group bh-form-field-error">
	<legend class="bh-checkbox-group-legend">Label</legend>
	<div class="bh-checkbox-group-flex">
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-4">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-4" id="bh-checkbox-group-choice-4" 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">Yes</span>
		</label>
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-5">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-5" id="bh-checkbox-group-choice-5" 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">No</span>
		</label>
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-6">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-6" id="bh-checkbox-group-choice-6" 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">Other</span>
		</label>
	</div>
	<div class="bh-checkbox-group-error">Error text.</div>
	<div class="bh-checkbox-group-helper">Helper text (optional).</div>
</fieldset>

<fieldset class="bh-checkbox-group bh-form-field-disabled">
	<legend class="bh-checkbox-group-legend">Label</legend>
	<div class="bh-checkbox-group-flex">
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-7">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-7" id="bh-checkbox-group-choice-7" role="checkbox" aria-checked="false" aria-invalid="false" disabled />
			<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">Yes</span>
		</label>
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-8">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-8" id="bh-checkbox-group-choice-8" role="checkbox" aria-checked="false" aria-invalid="false" disabled />
			<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">No</span>
		</label>
		<label class="bh-checkbox-group-label" for="bh-checkbox-group-choice-9">
			<input class="bh-checkbox-group-input" type="checkbox" name="bh-checkbox-9" id="bh-checkbox-group-choice-9" role="checkbox" aria-checked="false" aria-invalid="false" disabled />
			<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">Other</span>
		</label>
	</div>
	<div class="bh-checkbox-group-error">Error text.</div>
	<div class="bh-checkbox-group-helper">Helper text (optional).</div>
</fieldset>
 
 

radio button

Modifier classes: bh-radio-group--stacked
State classes: bh-form-field-errorbh-form-field-disabled
Notes:
- The modifier class above will stack the radio options on top of each other, instead of next to each other.
- The bh-form-field-error class would be added via Javascript when there is an error with the form, and removed when the error has been fixed.

Label
Error text.
Helper text (optional).
Label
Error text.
Helper text (optional).
Label
Error text.
Helper text (optional).
Label
Error text.
Helper text (optional).
SCSS file
<fieldset class="bh-radio-group">
	<legend class="bh-radio-group-legend">Label</legend>
	<div class="bh-radio-group-flex">
		<label class="bh-radio-group-label" for="bh-radio-group-choice-1">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-1" value="Option 1" />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">Yes</span>
		</label>
		<label class="bh-radio-group-label" for="bh-radio-group-choice-2">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-2" value="Option 2" />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">No</span>
		</label>
		<label class="bh-radio-group-label" for="bh-radio-group-choice-3">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-3" value="Option 3" />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">Other</span>
		</label>
	</div>
	<div class="bh-radio-group-error">Error text.</div>
	<div class="bh-radio-group-helper">Helper text (optional).</div>
</fieldset>

<fieldset class="bh-radio-group bh-radio-group--stacked">
	<legend class="bh-radio-group-legend">Label</legend>
	<div class="bh-radio-group-flex">
		<label class="bh-radio-group-label" for="bh-radio-group-choice-1a">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-1a" value="Option 1" />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">Yes</span>
		</label>
		<label class="bh-radio-group-label" for="bh-radio-group-choice-2a">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-2a" value="Option 2" />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">No</span>
		</label>
		<label class="bh-radio-group-label" for="bh-radio-group-choice-3a">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-3a" value="Option 3" />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">Other</span>
		</label>
	</div>
	<div class="bh-radio-group-error">Error text.</div>
	<div class="bh-radio-group-helper">Helper text (optional).</div>
</fieldset>

<fieldset class="bh-radio-group bh-form-field-error">
	<legend class="bh-radio-group-legend">Label</legend>
	<div class="bh-radio-group-flex">
		<label class="bh-radio-group-label" for="bh-radio-group-choice-4">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-4" value="Option 1" />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">Yes</span>
		</label>
		<label class="bh-radio-group-label" for="bh-radio-group-choice-5">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-5" value="Option 2" />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">No</span>
		</label>
		<label class="bh-radio-group-label" for="bh-radio-group-choice-6">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-6" value="Option 3" />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">Other</span>
		</label>
	</div>
	<div class="bh-radio-group-error">Error text.</div>
	<div class="bh-radio-group-helper">Helper text (optional).</div>
</fieldset>

<fieldset class="bh-radio-group bh-form-field-disabled">
	<legend class="bh-radio-group-legend">Label</legend>
	<div class="bh-radio-group-flex">
		<label class="bh-radio-group-label" for="bh-radio-group-choice-7">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-7" value="Option 1" disabled />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">Yes</span>
		</label>
		<label class="bh-radio-group-label" for="bh-radio-group-choice-8">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-8" value="Option 2" disabled />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">No</span>
		</label>
		<label class="bh-radio-group-label" for="bh-radio-group-choice-9">
			<input class="bh-radio-group-input" type="radio" name="bh-radio" id="bh-radio-group-choice-9" value="Option 3" disabled />
			<span class="bh-radio-group-button">
				<span class="bh-radio-group-dot"></span>
			</span>
			<span class="bh-radio-group-label-copy">Other</span>
		</label>
	</div>
	<div class="bh-radio-group-error">Error text.</div>
	<div class="bh-radio-group-helper">Helper text (optional).</div>
</fieldset>
 

toggle switch

State classes: bh-form-field-disabled

SCSS file
<div class="bh-toggle-switch">
	<input type="checkbox" id="bh-toggle-switch-checkbox" class="bh-toggle-switch-checkbox" role="switch" aria-checked="false" aria-invalid="false" />
	<label class="bh-toggle-switch-track-outer" for="bh-toggle-switch-checkbox" aria-label="Label goes here">
		<div class="bh-toggle-switch-track">
			<div class="bh-toggle-switch-thumb"></div>
		</div>
	</label>
</div>

<div class="bh-toggle-switch bh-form-field-disabled">
	<input disabled type="checkbox" id="bh-toggle-switch-checkbox-disabled" class="bh-toggle-switch-checkbox" role="switch" aria-checked="false" aria-disabled="true" />
	<label class="bh-toggle-switch-track-outer" for="bh-toggle-switch-checkbox-disabled" aria-label="Label goes here">
		<div class="bh-toggle-switch-track">
			<div class="bh-toggle-switch-thumb"></div>
		</div>
	</label>
</div>
 

tooltips

tooltip 1

Modifier classes for bh-tooltip-tip: bh-tooltip-tip--top-left
Notes: Media queries and positioning may have to be manually adjusted depending on the amount of content in the tooltip.

SCSS file JS file
<div class="bh-tooltip bh-tooltip-1">
	<button type="button" class="bh-tooltip-trigger">Writing tips<svg class="bh-tooltip-1-icon" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
			<title>bh-ic-info</title>
			<path fill="#37393d" d="M11,7h2V9H11Zm0,4h2v6H11Zm11,1A10,10,0,1,0,12,22,10,10,0,0,0,22,12Zm-2,0a8,8,0,1,1-8-8A8,8,0,0,1,20,12Z" />
		</svg>
	</button>
	<div class="bh-tooltip-1-tip bh-tooltip-tip" role="tooltip">
		<p class="bh-tooltip-1-heading">Need help? Here are a few tips to get you started:</p>
		<ul class="bh-tooltip-1-list">
			<li>What is your role at Banner?</li>
			<li>How do you help Sofia?</li>
			<li>What would another employee be surprised to learn about your role?</li>
			<li>How long have you been in your role?</li>
			<li>What is your role at Banner?</li>
		</ul>
	</div>
</div>

<div class="bh-tooltip bh-tooltip-1">
	<button type="button" class="bh-tooltip-trigger">Tool tip with arrow in top left<svg class="bh-tooltip-1-icon" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
			<title>bh-ic-info</title>
			<path fill="#37393d" d="M11,7h2V9H11Zm0,4h2v6H11Zm11,1A10,10,0,1,0,12,22,10,10,0,0,0,22,12Zm-2,0a8,8,0,1,1-8-8A8,8,0,0,1,20,12Z" />
		</svg>
	</button>
	<div class="bh-tooltip-1-tip bh-tooltip-tip bh-tooltip-tip--top-left" role="tooltip">
		<p class="bh-tooltip-1-heading">Need help? Here are a few tips to get you started:</p>
		<ul class="bh-tooltip-1-list">
			<li>What is your role at Banner?</li>
			<li>How do you help Sofia?</li>
			<li>What would another employee be surprised to learn about your role?</li>
			<li>How long have you been in your role?</li>
			<li>What is your role at Banner?</li>
		</ul>
	</div>
</div>
 
 

brand

banner health safety seal

Banner Health - A safe place for care
<!-- Use this... -->
<img src="assets/toolkit/images/banner-health-safety-seal.svg" alt="Banner Health - A safe place for care" />

<!-- OR this -->
<svg class="bh-svg-inline bh-safety-seal" width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
	<title>Banner Health - A safe place for care</title>
	<path fill-rule="evenodd" clip-rule="evenodd" d="M31.3375 66.752C31.2623 66.9514 31.1624 67.1281 31.0362 67.2822C30.9099 67.4362 30.7646 67.5588 30.6003 67.6516C30.4359 67.7433 30.2582 67.7984 30.0665 67.8164C29.8749 67.835 29.6765 67.8056 29.472 67.7289C29.268 67.6531 29.0979 67.5444 28.963 67.4043C28.8275 67.2636 28.7285 67.1049 28.6652 66.9272C28.6013 66.7505 28.5724 66.5624 28.5786 66.3636C28.5838 66.1647 28.6239 65.9653 28.6987 65.7654C28.7728 65.566 28.8738 65.3893 29 65.2358C29.1263 65.0817 29.271 64.9596 29.4344 64.87C29.5972 64.7803 29.776 64.7283 29.9692 64.7128C30.1624 64.6984 30.3612 64.7288 30.5653 64.8051C30.7698 64.8813 30.9388 64.9885 31.0727 65.1255C31.2062 65.2626 31.3056 65.4187 31.3695 65.5938C31.4339 65.7685 31.4633 65.9555 31.4576 66.1544C31.4519 66.3533 31.4123 66.5526 31.3375 66.752ZM31.8167 64.3764C31.5689 64.1404 31.2731 63.9591 30.9295 63.8308C30.5864 63.702 30.2438 63.6453 29.9022 63.6608C29.5606 63.6757 29.2412 63.752 28.9439 63.8895C28.6461 64.0271 28.3808 64.2213 28.1469 64.4722C27.9124 64.7231 27.7306 65.023 27.6002 65.3708C27.4719 65.7144 27.4132 66.0591 27.424 66.4043C27.4354 66.7494 27.508 67.072 27.6425 67.3703C27.7769 67.6691 27.9676 67.9365 28.2154 68.1719C28.4637 68.4074 28.7594 68.5892 29.1026 68.718C29.4462 68.8458 29.7888 68.903 30.1304 68.8875C30.472 68.8726 30.7909 68.7964 31.0887 68.6588C31.386 68.5218 31.6523 68.326 31.8873 68.0725C32.1217 67.819 32.3036 67.5212 32.4324 67.1776C32.5622 66.8293 32.6214 66.4836 32.6096 66.1405C32.5977 65.7973 32.5246 65.4764 32.3901 65.1776C32.2562 64.8792 32.065 64.6119 31.8167 64.3764ZM26.0747 62.7226L27.9799 63.8375L28.4792 62.9848L25.6053 61.3022L23.1014 65.5815L24.07 66.1482L25.0232 64.5191L26.4735 65.3671L26.9578 64.5397L25.508 63.6912L26.0747 62.7226ZM18.6346 18.8915L20.3894 19.7813L19.5321 20.6474L18.6346 18.8915ZM20.5089 22.5134L19.9669 21.4444L21.1957 20.2027L22.2704 20.7329L23.1334 19.8617L18.3337 17.6633L17.4609 18.5453L19.6825 23.3481L20.5089 22.5134ZM35.9322 66.8813C35.9002 67.0673 35.8152 67.2116 35.6777 67.3131C35.5396 67.4156 35.368 67.4496 35.163 67.4146L34.4813 67.2987L34.7024 66.0014L35.3835 66.1173C35.5885 66.1518 35.74 66.2384 35.8374 66.3754C35.9348 66.513 35.9662 66.6814 35.9322 66.8813ZM36.806 65.8885C36.6854 65.7242 36.5247 65.584 36.3237 65.4666C36.1223 65.3496 35.8801 65.2667 35.5973 65.2188L33.7796 64.9096L32.9476 69.7969L34.0249 69.9803L34.3304 68.1848L34.9461 68.2894L35.5489 70.2394L36.7653 70.4466L36.0136 68.3059C36.2918 68.207 36.5211 68.0514 36.7004 67.8381C36.8802 67.6248 36.9966 67.3594 37.0507 67.0421C37.0868 66.8319 37.0847 66.6279 37.0455 66.4305C37.0064 66.2327 36.9265 66.0519 36.806 65.8885ZM18.4331 57.5175L18.4336 57.517C14.3449 52.5628 12.0935 46.2912 12.0935 39.8568C12.0935 34.8026 13.465 29.8551 16.0596 25.5495L15.0657 24.9509C12.3624 29.4373 10.9338 34.5919 10.9338 39.8568C10.9338 46.5601 13.2795 53.0939 17.5387 58.2553C18.3996 59.2985 19.3414 60.2893 20.3378 61.2017L21.121 60.3454C20.1642 59.4701 19.26 58.5185 18.4331 57.5175ZM27.3416 33.2374C35.7416 29.0442 40.5809 32.3714 41.6716 34.1153C41.8998 34.4801 42.3403 35.7887 42.6556 36.2679C44.2657 38.7182 54.7538 37.3426 53.3302 32.0406C53.3302 32.0406 53.8269 32.4821 54.0505 32.7629C54.0505 32.7629 54.2092 32.9623 54.2169 33.1169C54.5817 37.0829 47.1565 40.914 43.0776 39.0087C42.6077 38.7893 42.72 38.0113 41.9112 37.0164C39.8998 34.5424 34.9409 33.8021 27.289 37.5548C27.1288 34.6104 27.3416 33.2374 27.3416 33.2374ZM42.8823 31.9468C43.2832 35.1962 49.5162 34.1158 50.7934 32.9819C52.9377 31.0782 49.4574 30.3966 49.4574 30.3966L49.4451 30.3559C53.5059 30.3368 53.3838 34.2014 48.9592 35.4111C42.8288 37.0855 42.8128 34.0695 42.4928 33.3034C42.3228 32.8969 42.1033 32.3554 41.8674 31.9247C41.2192 30.7413 37.4392 25.3156 28.997 29.0663C28.7739 29.1658 28.2551 29.395 28.2551 29.395C32.2443 21.6783 41.7092 22.4351 42.8823 31.9468ZM55.4436 35.8794C53.6878 43.2216 43.3723 45.2505 42.6994 44.1793C42.4516 43.7847 42.5438 43.2844 42.0472 42.8872C38.8189 40.3024 31.0516 44.3674 28.9537 46.0995C28.2994 43.9815 27.8486 41.6533 27.8486 41.6533C32.7528 38.8058 38.8529 37.1988 41.9807 39.2648C42.8262 39.8238 42.5073 40.9552 43.2208 41.1948C47.934 42.7826 54.6796 38.7197 55.0263 34.4394C55.0263 34.4394 55.5281 35.5229 55.4436 35.8794ZM42.312 50.877C42.074 50.9409 41.9003 50.7544 41.9477 50.5076C41.9967 50.2552 41.9519 49.9435 41.9519 49.9435C41.3954 48.0583 37.6318 50.2304 35.0069 52.2598C33.7956 53.197 32.4092 54.9734 32.4092 54.9734C31.9609 54.2027 30.5132 50.5385 30.5132 50.5385C31.691 48.7827 39.72 43.8594 42.1997 45.4674C43.0055 45.9898 42.3661 47.0181 42.9632 47.0274C48.5708 46.3607 54.1242 43.4632 55.6255 37.798C55.7342 42.3138 52.4034 48.1134 42.312 50.877ZM39.8575 63.1507C52.7223 63.1507 63.1517 52.722 63.1517 39.8568C63.1517 26.9921 52.7223 16.5633 39.8575 16.5633C26.9928 16.5633 16.5639 26.9921 16.5639 39.8568C16.5639 52.722 26.9928 63.1507 39.8575 63.1507ZM51.4405 65.0951C51.3812 65.2559 51.2565 65.3785 51.0659 65.4625L50.4327 65.7402L49.9041 64.5356L50.5368 64.2574C50.7274 64.1739 50.901 64.1626 51.0577 64.2234C51.2148 64.2847 51.3338 64.4084 51.4157 64.5943C51.491 64.7669 51.4997 64.9339 51.4405 65.0951ZM52.5832 64.9704C52.6157 64.6938 52.5672 64.4078 52.4379 64.1126C52.3524 63.9179 52.2385 63.7484 52.0968 63.6051C51.9557 63.4614 51.7893 63.3542 51.5986 63.2842C51.4085 63.2131 51.1968 63.1842 50.9639 63.1971C50.7315 63.21 50.4837 63.2744 50.2205 63.3898L48.5331 64.1312L50.5265 68.6706L51.527 68.2312L50.7944 66.564L51.3663 66.3126L52.9423 67.6093L54.0716 67.1132L52.2669 65.7386C52.4451 65.5037 52.5507 65.2476 52.5832 64.9704ZM42.8695 69.0462C42.7948 69.1323 42.7082 69.209 42.6103 69.276C42.5119 69.3435 42.3986 69.3991 42.2692 69.4429C42.1399 69.4872 41.9864 69.514 41.8081 69.5238C41.5907 69.5352 41.3934 69.5058 41.2156 69.4357C41.0384 69.3662 40.8838 69.2652 40.753 69.1333C40.6221 69.0014 40.518 68.8438 40.4408 68.6588C40.3645 68.4743 40.3202 68.2734 40.3084 68.0555C40.297 67.8427 40.3197 67.6392 40.3759 67.4455C40.433 67.2513 40.5191 67.0792 40.635 66.9287C40.7509 66.7788 40.8962 66.6583 41.0698 66.5671C41.244 66.4759 41.4418 66.4244 41.6644 66.4125C41.9467 66.3976 42.1925 66.4475 42.4022 66.5629C42.6113 66.6784 42.7963 66.836 42.9555 67.0354L43.6809 66.26C43.4362 65.9555 43.1379 65.7283 42.785 65.5784C42.4315 65.429 42.0255 65.3661 41.5655 65.3903C41.1842 65.4109 40.8401 65.4975 40.5335 65.6505C40.2259 65.8035 39.9668 66.0029 39.754 66.2502C39.5417 66.4975 39.382 66.784 39.2754 67.1096C39.1687 67.4352 39.1254 67.7814 39.1445 68.1472C39.1646 68.5233 39.2455 68.8654 39.3856 69.173C39.5263 69.4806 39.7154 69.7433 39.9529 69.9612C40.1899 70.1792 40.4681 70.3446 40.7865 70.4563C41.1049 70.5681 41.4521 70.6145 41.8282 70.5944C42.0559 70.5826 42.2734 70.5429 42.481 70.4775C42.6886 70.412 42.8798 70.327 43.0554 70.2235C43.2311 70.1199 43.3898 70.0009 43.531 69.867C43.6727 69.733 43.7917 69.5913 43.888 69.4419L43.0864 68.7855C43.0168 68.8736 42.9442 68.9602 42.8695 69.0462ZM61.5952 57.1311C60.7724 58.1646 59.8688 59.1476 58.9094 60.0528L59.7054 60.8967C60.7049 59.9534 61.6457 58.9297 62.5025 57.8539V57.8534C66.6103 52.691 68.7819 46.4684 68.7819 39.8568C68.7819 34.5919 67.3527 29.4373 64.6494 24.9503L63.6561 25.549C66.2506 29.8551 67.6216 34.8026 67.6216 39.8568C67.6216 46.2031 65.5376 52.1758 61.5952 57.1311ZM39.8575 73.2519C21.4141 73.2519 6.46277 58.3006 6.46277 39.8568C6.46277 21.414 21.4141 6.46222 39.8575 6.46222C58.301 6.46222 73.2523 21.414 73.2523 39.8568C73.2523 58.3006 58.301 73.2519 39.8575 73.2519ZM75.8716 43.5554L79.7151 39.8568L75.8716 36.1586L78.9176 31.8216L74.443 29.0905L76.6022 24.3316L71.7067 22.5948L72.9298 17.5541L67.8097 16.8168L68.0621 11.6529L62.8982 11.9048L62.1609 6.78525L57.1201 8.00783L55.3839 3.11235L50.6239 5.27209L47.8933 0.797537L43.5557 3.84343L39.8575 0L36.1594 3.84343L31.8218 0.797537L29.0912 5.27209L24.3317 3.11235L22.595 8.00783L17.5547 6.78525L16.8174 11.9048L11.653 11.6529L11.9054 16.8168L6.78581 17.5541L8.0084 22.5948L3.11289 24.3316L5.27264 29.0905L0.798058 31.8216L3.84397 36.1586L0 39.8568L3.84397 43.5554L0.798058 47.8929L5.27264 50.623L3.11289 55.383L8.0084 57.1192L6.78581 62.16L11.9054 62.8978L11.653 68.0612L16.8174 67.8087L17.5547 72.9288L22.595 71.7062L24.3317 76.6017L29.0912 74.442L31.8218 78.9165L36.1594 75.8706L39.8575 79.7141L43.5557 75.8706L47.8933 78.9165L50.6239 74.442L55.3839 76.6017L57.1201 71.7062L62.1609 72.9288L62.8982 67.8087L68.0621 68.0612L67.8097 62.8978L72.9298 62.16L71.7067 57.1192L76.6022 55.383L74.443 50.623L78.9176 47.8929L75.8716 43.5554ZM46.023 67.8623L46.1786 65.8963L47.207 67.5733L46.023 67.8623ZM45.36 64.9869L44.7361 70.2415L45.8772 69.9633L45.9762 68.7685L47.6733 68.3548L48.3106 69.3703L49.5023 69.0797L46.5661 64.6927L45.36 64.9869ZM22.4703 15.9399C22.5718 16.0986 22.6913 16.2254 22.8284 16.3196C22.9654 16.4144 23.1153 16.4804 23.2771 16.518C23.4394 16.5551 23.611 16.5659 23.7923 16.5499C23.9732 16.534 24.155 16.4938 24.3374 16.4299C24.7166 16.3047 25.0087 16.2367 25.2138 16.2264C25.4188 16.2156 25.5708 16.2872 25.6697 16.4417C25.7151 16.5128 25.7377 16.5875 25.7383 16.6664C25.7393 16.7457 25.7228 16.8235 25.6898 16.9008C25.6569 16.9781 25.6115 17.0497 25.5538 17.1156C25.4966 17.1821 25.4322 17.2382 25.3611 17.2831C25.2401 17.3609 25.1169 17.4181 24.9902 17.4551C24.864 17.4917 24.7393 17.5139 24.6177 17.5216C24.4961 17.5288 24.3791 17.5257 24.2673 17.5118C24.1561 17.4984 24.054 17.4799 23.9623 17.4557L23.7764 18.502C23.9113 18.5386 24.0613 18.5634 24.2256 18.5762C24.3894 18.5886 24.561 18.5834 24.7398 18.5597C24.9191 18.5366 25.1071 18.4892 25.3034 18.4191C25.4997 18.3495 25.7022 18.2475 25.9114 18.1141C26.1365 17.9698 26.3251 17.8029 26.4776 17.6143C26.6306 17.4253 26.7414 17.2264 26.8104 17.0167C26.88 16.808 26.9052 16.5973 26.8867 16.3856C26.8686 16.1738 26.7996 15.9734 26.6796 15.7859C26.5404 15.569 26.3864 15.4072 26.2179 15.3C26.0494 15.1934 25.8738 15.1249 25.6898 15.0955C25.5064 15.0661 25.3194 15.0667 25.1298 15.0971C24.9407 15.1269 24.7563 15.1728 24.578 15.2341C24.2776 15.3443 24.0247 15.4031 23.8181 15.4118C23.612 15.4206 23.4631 15.3541 23.3724 15.2119C23.3374 15.1578 23.3204 15.0971 23.3209 15.0285C23.3214 14.961 23.3364 14.8925 23.3657 14.8235C23.3956 14.7544 23.4358 14.689 23.4873 14.6267C23.5383 14.5643 23.5976 14.5118 23.664 14.469C23.7645 14.4051 23.867 14.3567 23.9732 14.3242C24.0788 14.2918 24.1813 14.2701 24.2807 14.2598C24.3797 14.249 24.4734 14.2464 24.562 14.2516C24.6507 14.2562 24.73 14.2635 24.8001 14.2712L24.9593 13.3211C24.898 13.3083 24.8099 13.2923 24.695 13.2743C24.5806 13.2567 24.4466 13.2542 24.2936 13.267C24.1396 13.2799 23.9675 13.317 23.7769 13.3773C23.5862 13.4376 23.3843 13.536 23.1715 13.6725C22.9129 13.8379 22.7104 14.0162 22.5646 14.2068C22.4188 14.3974 22.3209 14.5927 22.2694 14.7931C22.2184 14.9935 22.2111 15.1908 22.2477 15.3856C22.2838 15.5798 22.358 15.7648 22.4703 15.9399ZM55.5049 65.0786L54.9222 64.1806L56.4004 63.2218L55.8826 62.4238L54.4045 63.3826L53.8784 62.5716L55.7806 61.3382L55.2463 60.5155L52.4029 62.3599L55.101 66.5186L58.0815 64.5851L57.5436 63.7561L55.5049 65.0786ZM49.0277 14.4299L46.7469 13.7838L47.8268 9.97231L46.7469 9.66628L45.395 14.436L48.7562 15.3881L49.0277 14.4299ZM52.8186 12.9754L52.543 14.9234L51.4461 14.3917L52.8186 12.9754ZM49.9953 15.9183L50.8325 15.0605L52.4044 15.8225L52.2488 17.0116L53.3524 17.5463L53.8841 12.2943L52.7671 11.7529L48.9386 15.4062L49.9953 15.9183ZM54.5451 18.3624C54.7223 18.6499 54.9629 18.9044 55.2674 19.1265C55.4519 19.2599 55.6451 19.3671 55.8476 19.4469C56.05 19.5268 56.252 19.5814 56.4534 19.6118C56.6554 19.6422 56.8532 19.6499 57.048 19.635C57.2427 19.62 57.4241 19.5855 57.5926 19.5304L57.3844 18.5149C57.2747 18.5391 57.1634 18.5613 57.0516 18.5809C56.9393 18.6004 56.8239 18.6051 56.7054 18.5953C56.5869 18.586 56.4637 18.5577 56.336 18.5103C56.2072 18.4634 56.0712 18.3872 55.9269 18.282C55.7507 18.1543 55.6157 18.0069 55.5219 17.841C55.4282 17.6746 55.372 17.4989 55.3535 17.314C55.3349 17.129 55.354 16.9405 55.4107 16.7488C55.4668 16.5577 55.5596 16.3732 55.6878 16.197C55.813 16.0249 55.9588 15.8812 56.1253 15.7663C56.2917 15.6509 56.4668 15.5721 56.6518 15.5288C56.8362 15.4855 57.0248 15.4829 57.217 15.5216C57.4091 15.5602 57.5957 15.6452 57.776 15.7766C58.0047 15.9425 58.1639 16.1362 58.2541 16.3583C58.3437 16.5798 58.3875 16.8184 58.386 17.0744L59.438 16.9291C59.4401 16.5386 59.3515 16.1738 59.1717 15.8353C58.9924 15.4963 58.7162 15.1913 58.3432 14.9203C58.0346 14.6962 57.7131 14.5463 57.3782 14.4716C57.0439 14.3969 56.7162 14.3886 56.3952 14.4463C56.0748 14.5041 55.7703 14.6256 55.4818 14.8116C55.1938 14.9971 54.9418 15.2382 54.7259 15.535C54.5049 15.8395 54.3514 16.1553 54.2669 16.483C54.1819 16.8101 54.1628 17.1331 54.2102 17.4526C54.2566 17.771 54.3689 18.0744 54.5451 18.3624ZM42.9983 10.0063L43.6397 10.0857C43.8468 10.1114 44.0034 10.1975 44.1101 10.3427C44.2167 10.488 44.2574 10.6642 44.2317 10.8708C44.2069 11.0723 44.1266 11.2284 43.9906 11.3391C43.8545 11.4494 43.683 11.4922 43.4764 11.4664L42.8277 11.386L42.9983 10.0063ZM42.7159 12.2856L43.4759 12.3799C43.6969 12.4077 43.9128 12.3989 44.123 12.3551C44.3332 12.3113 44.5238 12.2325 44.6954 12.1192C44.8664 12.0053 45.0101 11.8544 45.1256 11.6668C45.241 11.4788 45.3157 11.2521 45.3486 10.9867C45.3739 10.7801 45.3656 10.5766 45.3234 10.3767C45.2801 10.1768 45.1977 9.99549 45.0756 9.8332C44.9535 9.67091 44.7896 9.53181 44.5841 9.4164C44.379 9.301 44.1235 9.22475 43.819 9.18714L42.0266 8.96457L41.4166 13.8848L42.5011 14.0192L42.7159 12.2856ZM62.9755 75.8356L62.4716 76.6254L61.9584 75.8356H61.571L61.5128 77.6903H61.9193L61.9533 76.5332L62.3845 77.221H62.5396L62.9899 76.4848L63.0234 77.6903H63.4448L63.3871 75.8356H62.9755ZM29.489 13.8714L28.3669 14.3474L28.203 12.3824L29.489 13.8714ZM28.5632 16.4443L28.4678 15.2496L30.0753 14.5669L30.8687 15.4659L31.9975 14.9863L28.3906 11.1315L27.2483 11.6168L27.4822 16.9034L28.5632 16.4443ZM39.5629 13.826L39.4809 12.841L37.0584 13.0424L36.9703 11.9754L38.7256 11.8296L38.6468 10.8816L36.891 11.0274L36.8111 10.0645L39.0703 9.877L38.9889 8.89914L35.6112 9.17992L36.0218 14.1207L39.5629 13.826ZM59.7858 23.125L60.4947 22.4361L58.8018 20.6927L59.5689 19.9472L60.7966 21.2105L61.4788 20.5474L60.2516 19.2841L60.9445 18.6108L62.5241 20.2367L63.2279 19.5536L60.8662 17.1223L57.3102 20.5768L59.7858 23.125ZM59.6333 76.238H60.2536V77.6903H60.7183V76.238H61.3381V75.8356H59.6333V76.238ZM33.4386 14.6921L33.0001 12.8554L34.6339 12.4654L34.4108 11.5329L32.777 11.9229L32.5163 10.8312L34.6637 10.3185L34.434 9.35715L31.1948 10.1305L32.3468 14.9523L33.4386 14.6921Z" fill="#00205b" />
</svg>

large illustrations

alert icon large

<!-- Use this... -->
<img src="assets/toolkit/images/bh-lg-ic-alert.svg" alt="" />

<!-- OR this -->
<?xml version="1.0" encoding="UTF-8"?>
<svg class="bh-svg-inline" 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>bh_lg_ic_alert</title>
	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
		<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="#37393D"></path>
	</g>
</svg>

check icon

<!-- Use this... -->
<img src="assets/toolkit/images/bh-lg-ic-check.svg" alt="" />

<!-- OR this -->
<?xml version="1.0" encoding="UTF-8"?>
<svg class="bh-svg-inline" 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>lg_ic_check</title>
	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
		<g>
			<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" fill="#37393D"></path>
			<g transform="translate(16.000000, 16.000000)">
				<polygon points="11.713333 21.1800002 6.1533333 15.6200002 4.26666673 17.5066669 11.713333 24.9533335 27.7133322 8.95333358 25.8266656 7.06666692" fill="#37393D"></polygon>
			</g>
		</g>
	</g>
</svg>

lock icon

<!-- Use this... -->
<img src="assets/toolkit/images/bh-lg-ic-lock.svg" alt="" />

<!-- OR this -->
<?xml version="1.0" encoding="UTF-8"?>
<svg class="bh-svg-inline" 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>bh-lg-ic-lock</title>
	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
		<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 M32,15.875 C35.45,15.875 38.25,18.675 38.25,22.125 L38.25,22.125 L38.25,24.625 L39.5,24.625 C40.875,24.625 42,25.75 42,27.125 L42,27.125 L42,39.625 C42,41 40.875,42.125 39.5,42.125 L39.5,42.125 L24.5,42.125 C23.125,42.125 22,41 22,39.625 L22,39.625 L22,27.125 C22,25.75 23.125,24.625 24.5,24.625 L24.5,24.625 L25.75,24.625 L25.75,22.125 C25.75,18.675 28.55,15.875 32,15.875 Z M39.5,27.125 L24.5,27.125 L24.5,39.625 L39.5,39.625 L39.5,27.125 Z M32,30.875 C33.375,30.875 34.5,32 34.5,33.375 C34.5,34.75 33.375,35.875 32,35.875 C30.625,35.875 29.5,34.75 29.5,33.375 C29.5,32 30.625,30.875 32,30.875 Z M32,18.375 C29.925,18.375 28.25,20.05 28.25,22.125 L28.25,22.125 L28.25,24.625 L35.75,24.625 L35.75,22.125 C35.75,20.05 34.075,18.375 32,18.375 Z" fill="#37393D"></path>
	</g>
</svg>

passcode icon

Passcode
<!-- Use this... -->
<img src="assets/toolkit/images/bh-lg-ic-passcode.svg" alt="" />

<!-- OR this -->
<svg class="bh-svg-inline bh-lg-ic-passcode" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
	<title>Passcode</title>
	<g clip-path="url(#clip0_2970_101543)">
		<path d="M61.9001 32C61.9001 48.872 48.4906 62.5 32.0096 62.5C15.5286 62.5 2.11914 48.872 2.11914 32C2.11914 15.128 15.5286 1.5 32.0096 1.5C48.4906 1.5 61.9001 15.128 61.9001 32Z" stroke="#37393D" stroke-width="3" />
		<mask id="mask0_2970_101543" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="24" y="23" width="16" height="22">
			<path d="M32.0097 41C30.9306 41 30.0478 41.9 30.0478 43C30.0478 44.1 30.9306 45 32.0097 45C33.0887 45 33.9716 44.1 33.9716 43C33.9716 41.9 33.0887 41 32.0097 41ZM26.124 23C25.0449 23 24.1621 23.9 24.1621 25C24.1621 26.1 25.0449 27 26.124 27C27.203 27 28.0859 26.1 28.0859 25C28.0859 23.9 27.203 23 26.124 23ZM26.124 29C25.0449 29 24.1621 29.9 24.1621 31C24.1621 32.1 25.0449 33 26.124 33C27.203 33 28.0859 32.1 28.0859 31C28.0859 29.9 27.203 29 26.124 29ZM26.124 35C25.0449 35 24.1621 35.9 24.1621 37C24.1621 38.1 25.0449 39 26.124 39C27.203 39 28.0859 38.1 28.0859 37C28.0859 35.9 27.203 35 26.124 35ZM37.8954 27C38.9744 27 39.8573 26.1 39.8573 25C39.8573 23.9 38.9744 23 37.8954 23C36.8164 23 35.9335 23.9 35.9335 25C35.9335 26.1 36.8164 27 37.8954 27ZM32.0097 35C30.9306 35 30.0478 35.9 30.0478 37C30.0478 38.1 30.9306 39 32.0097 39C33.0887 39 33.9716 38.1 33.9716 37C33.9716 35.9 33.0887 35 32.0097 35ZM37.8954 35C36.8164 35 35.9335 35.9 35.9335 37C35.9335 38.1 36.8164 39 37.8954 39C38.9744 39 39.8573 38.1 39.8573 37C39.8573 35.9 38.9744 35 37.8954 35ZM37.8954 29C36.8164 29 35.9335 29.9 35.9335 31C35.9335 32.1 36.8164 33 37.8954 33C38.9744 33 39.8573 32.1 39.8573 31C39.8573 29.9 38.9744 29 37.8954 29ZM32.0097 29C30.9306 29 30.0478 29.9 30.0478 31C30.0478 32.1 30.9306 33 32.0097 33C33.0887 33 33.9716 32.1 33.9716 31C33.9716 29.9 33.0887 29 32.0097 29ZM32.0097 23C30.9306 23 30.0478 23.9 30.0478 25C30.0478 26.1 30.9306 27 32.0097 27C33.0887 27 33.9716 26.1 33.9716 25C33.9716 23.9 33.0887 23 32.0097 23Z" fill="#37393D" />
		</mask>
		<g mask="url(#mask0_2970_101543)">
			<path d="M44.2383 22H20.2383V46H44.2383V22Z" ffill="#37393D" />
		</g>
	</g>
	<defs>
		<clipPath id="clip0_2970_101543">
			<rect width="64" height="64" fill="white" />
		</clipPath>
	</defs>
</svg>

misc

location map pin

Modifier classes: bh-location-map-pin--numbered
Other components needed (SCSS):
- Body copy (bh-body-2-strong)
Other components needed (icons):
- Map pin icon (download)

SCSS file
<button class="bh-location-map-pin">
	<span class="bh-location-map-pin-number bh-body-2-strong"></span>
</button>

<button class="bh-location-map-pin bh-location-map-pin--numbered">
	<span class="bh-location-map-pin-number bh-body-2-strong">8</span>
</button>