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.
<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>
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.
<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>
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
<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>
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.
<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" name="label" 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" name="label" 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" name="label" 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>
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.
<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>
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
<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>
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Other components needed (JS):
- Text Input Email Create
<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>
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
<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>
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
<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>
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
<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>
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
<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>
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
<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>
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
<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>
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.
<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>
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.
<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>
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.
<input aria-label="Search" type="search" class="bh-search-field" placeholder="Placeholder" name="search" aria-invalid="false" />
<input aria-label="Search" type="search" class="bh-search-field bh-form-field-error" placeholder="Placeholder" name="search" aria-invalid="true" />
<input disabled aria-label="Search" type="search" class="bh-search-field bh-form-field-disabled" placeholder="Placeholder" name="search" aria-disabled="true" />
<input aria-label="Search" type="search" class="bh-search-field bh-search-field--large" placeholder="Placeholder" name="search" aria-invalid="false" />
<input aria-label="Search" type="search" class="bh-search-field bh-search-field--large bh-form-field-error" placeholder="Placeholder" name="search" aria-invalid="true" />
<input disabled aria-label="Search" type="search" class="bh-search-field bh-search-field--large bh-form-field-disabled" placeholder="Placeholder" name="search" aria-disabled="true" />
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" name="search" aria-invalid="false" />
<input aria-label="Search" type="search" class="bh-search-field bh-search-field--on-dark bh-form-field-error" placeholder="Placeholder" name="search" 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" name="search" aria-disabled="true" />
<input aria-label="Search" type="search" class="bh-search-field bh-search-field--on-dark bh-search-field--large" placeholder="Placeholder" name="search" 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" name="search" 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" name="search" aria-disabled="true" />
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
<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" name="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" name="answer" 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" name="answer" aria-disabled="true" />
<div class="bh-text-input-field-error"></div>
</div>
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Notes:
- Only numbers 0-9 allowed
<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>
State classes: bh-form-field-errorbh-form-field-disabled
Other components needed (SCSS):
- Text Input Base
Other components needed (icons):
- Grabber icon
<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..." name="label" 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..." name="label" 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..." name="label" aria-disabled="true"></textarea>
</div>
<div class="bh-text-input-field-helper">Caption text.</div>
</div>
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.
<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..." name="label" 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..." name="label" 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..." name="label" 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>
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.
<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>
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.
<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" name="label" 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" name="label" 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" name="label" aria-disabled="true" />
<div class="bh-text-input-field-error"></div>
</div>
</div>
</div>
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.
<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>
State classes: bh-form-field-disabled
<div class="bh-toggle-switch">
<input type="checkbox" id="bh-toggle-switch-checkbox" class="bh-toggle-switch-checkbox" name="label" 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" name="label" 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>
Modifier classes for bh-tooltip-tip: bh-tooltip-tip--leftbh-tooltip-tip--whitebh-tooltip-tip--rightbh-tooltip-tip--top-leftbh-tooltip-tip--bottom-left
Notes: Media queries and positioning may have to be manually adjusted depending on the amount of content in the tooltip.
Need help? Here are a few tips to get you started:
Need help? Here are a few tips to get you started:
Need help? Here are a few tips to get you started:
Need help? Here are a few tips to get you started:
Need help? Here are a few tips to get you started:
<div class="bh-tooltip bh-tooltip-1">
<button type="button" class="bh-tooltip-trigger">Tool tip with arrow on the 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--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>
<div class="bh-tooltip bh-tooltip-1">
<button type="button" class="bh-tooltip-trigger">Tool tip with white background<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--left bh-tooltip-tip--white" 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 on the right<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--right" 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>
<div class="bh-tooltip bh-tooltip-1">
<button type="button" class="bh-tooltip-trigger">Tool tip with arrow in bottom 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--bottom-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>
<!-- Use this... -->
<img src="assets/toolkit/images/sonora-quest-laboratories-logo.svg" alt="Sonora Quest Laboratories" />
<!-- OR this -->
<svg class="bh-svg-inline bh-sonora-quest-logo" width="337" height="100" viewBox="0 0 337 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<title>Sonora Quest Laboratories</title>
<path d="M63.3682 28.1636C61.7032 27.2122 59.9429 26.4034 58.0876 25.8801L57.8021 25.5947V4.42434H63.5585V19.8382L74.2626 9.13414L85.0619 19.9334L85.1094 19.981L70.5994 34.4909C69.4101 32.9686 68.0305 31.6365 66.5557 30.3996L76.9743 19.9334L74.3102 17.2693L63.3682 28.1636ZM96.5747 37.9638H81.3987L92.2931 27.0694L88.2017 23.0257L73.2636 37.9638V38.392C74.1675 40.0571 74.8811 41.8649 75.3568 43.7678H90.8183V47.5737H76.0704C76.1656 48.5252 76.2132 49.4767 76.2132 50.4282C76.2132 51.3796 76.1656 52.3787 76.0704 53.2826H96.5747V53.235V37.9638ZM83.7298 74.215L81.0657 76.8792L70.647 66.4605C69.4577 67.9829 68.078 69.3149 66.6033 70.5043L81.1133 85.0143L81.1608 84.9667L91.9601 74.1674L81.256 63.4634H96.5747V57.7069H75.4044L75.119 57.9924C74.5481 59.8478 73.7869 61.608 72.7878 63.2731L83.7298 74.215ZM57.1837 90.7231H53.3778V75.9753C52.4263 76.0704 51.4748 76.1656 50.5233 76.1656C49.5243 76.1656 48.5728 76.118 47.6689 75.9753V96.4795H47.7165H62.9877V81.3035L73.882 92.1979L77.9734 88.1066L62.9877 73.1208H62.5595C60.8944 74.0247 59.0866 74.7383 57.1837 75.2141V90.7231ZM26.784 83.6346L24.1199 80.9705L34.5861 70.5518C33.0638 69.3625 31.7317 67.9829 30.5424 66.5081L16.0324 81.0181L16.0799 81.0656L26.8792 91.8649L37.5833 81.1608V96.5747H43.3397V75.4044L43.0543 75.1189C41.1989 74.548 39.4387 73.7869 37.7736 72.8354L26.784 83.6346ZM10.2284 57.0885V53.2826H24.9762C24.8811 52.3311 24.8335 51.3796 24.8335 50.4282C24.8335 49.4767 24.8811 48.4776 24.9762 47.5737H4.51953V47.6213V62.8925H19.6956L8.75359 73.7393L12.8449 77.8306L27.8307 62.8449V62.4167C26.9268 60.7517 26.2132 58.9439 25.7374 57.0409L10.2284 57.0885ZM17.3169 26.6413L19.981 23.9772L30.4472 34.3958C31.6366 32.8734 33.0162 31.5414 34.491 30.3045L20.0286 15.842H19.981L9.18176 26.6413L19.8858 37.3454H4.51953V43.1018H25.6898L25.9753 42.8164C26.5462 40.961 27.3074 39.2008 28.2588 37.5357L17.3169 26.6413ZM43.863 10.1332H47.6689V24.8811C48.6204 24.7859 49.5719 24.7383 50.5233 24.7383C51.5224 24.7383 52.4739 24.7859 53.3778 24.8811V4.37677H53.3302H38.1066V19.5528L27.2122 8.65841L23.1209 12.7497L38.1066 27.7355H38.5348C40.1998 26.8316 42.0076 26.118 43.9106 25.6422V10.1332H43.863Z" fill="#842b37" />
<path d="M108.706 35.3473H109.61C110.371 39.2484 112.464 42.5309 116.889 42.5309C119.886 42.5309 122.407 40.8183 122.407 37.726C122.407 34.2055 119.362 32.8259 116.556 31.7317C113.035 30.3996 109.324 28.5443 109.324 24.1199C109.324 19.7431 112.75 17.1741 116.936 17.1741C119.077 17.1741 121.028 17.8877 122.74 19.1247L123.644 17.6023H124.072L124.263 24.2626H123.359C122.455 21.0752 120.647 18.1732 116.936 18.1732C114.462 18.1732 112.417 19.7431 112.417 22.2645C112.417 25.3092 115.176 26.3559 117.555 27.3549C121.551 29.02 126.023 31.0181 126.023 36.0609C126.023 41.1037 121.313 43.53 116.793 43.53C114.177 43.53 112.131 42.7688 110.038 41.1989L109.134 42.8164H108.706V35.3473ZM146.765 34.7764C146.765 39.962 142.531 43.5776 137.488 43.5776C132.493 43.5776 128.259 39.7241 128.259 34.6337C128.259 29.686 132.826 26.118 137.488 26.118C142.245 26.118 146.765 29.8287 146.765 34.7764ZM132.065 34.7764C132.065 38.4396 133.159 42.6737 137.631 42.6737C141.817 42.6737 142.864 38.4396 142.864 35.0143C142.864 31.3035 141.817 26.9743 137.25 26.9743C133.111 27.0219 132.065 31.4463 132.065 34.7764ZM167.031 38.4872C167.031 41.0086 166.746 42.1979 169.743 42.3882V43.1494C168.363 43.1018 166.936 43.0543 165.557 43.0067C164.034 43.0543 162.607 43.1018 161.085 43.1494V42.3882C163.987 42.1979 163.796 41.2464 163.796 38.725V33.7774C163.796 31.1132 163.891 27.3549 160.228 27.3549C157.231 27.3549 155.281 29.686 155.281 32.5405V38.5347C155.281 41.0562 154.948 42.2455 157.992 42.4358V43.197C156.613 43.1494 155.185 43.1018 153.806 43.0543C152.283 43.1018 150.856 43.1494 149.334 43.197V42.4358C152.236 42.2455 152.046 41.294 152.046 38.7726V34.0152C152.046 32.921 152.046 30.2569 151.855 29.353C151.522 27.9734 150.523 28.1161 149.286 28.1161V27.3549C151.284 27.117 152.712 26.4986 154.615 26.1656L155.138 29.686H155.233C156.565 27.3073 158.658 26.1656 161.418 26.1656C165.081 26.1656 167.174 27.8307 167.174 31.4938V38.4872H167.031ZM190.818 34.7764C190.818 39.962 186.584 43.5776 181.541 43.5776C176.546 43.5776 172.264 39.7241 172.264 34.6337C172.264 29.686 176.832 26.118 181.541 26.118C186.299 26.118 190.818 29.8287 190.818 34.7764ZM176.118 34.7764C176.118 38.4396 177.212 42.6737 181.684 42.6737C185.871 42.6737 186.917 38.4396 186.917 35.0143C186.917 31.3035 185.871 26.9743 181.303 26.9743C177.165 27.0219 176.118 31.4463 176.118 34.7764ZM195.956 33.9677C195.956 32.921 196.004 30.2093 195.718 29.3054C195.385 27.9258 194.386 28.0685 193.197 28.0685V27.3073C195.005 27.2122 196.717 26.4986 198.382 26.118C198.715 27.2598 198.906 28.6394 198.858 30.019H198.953C199.952 27.6879 201.903 26.118 204.567 26.118C205.756 26.118 207.326 26.6889 207.326 28.1161C207.326 28.8297 206.708 29.4957 205.994 29.4957C204.377 29.4957 204.71 27.4976 203.235 27.4976C202.093 27.4976 200.809 28.4491 200.238 29.4006C199.334 30.9705 199.334 32.8735 199.334 34.6337V38.4396C199.334 41.2464 199.048 42.1979 202.283 42.3406V43.1018C200.809 43.0542 199.334 43.0067 197.859 42.9591C196.337 43.0067 194.91 43.0542 193.387 43.1018V42.3406C196.289 42.1503 196.099 41.1989 196.099 38.6775V33.9677H195.956ZM218.221 32.588C218.601 32.3977 218.554 31.8744 218.554 31.4463C218.554 28.8297 218.316 26.9743 215.176 26.9743C213.273 26.9743 211.656 27.117 211.56 29.1627C211.465 30.019 210.989 30.8754 210.038 30.8754C209.182 30.8754 208.563 30.3521 208.563 29.4957C208.563 26.6413 213.701 26.118 215.652 26.118C219.933 26.118 221.884 27.2598 221.884 31.6841V38.059C221.884 39.0105 221.741 41.8649 223.216 41.8649C223.977 41.8649 224.358 41.1513 224.786 40.628L225.499 41.0086C224.881 42.2931 223.454 43.5776 222.027 43.5776C220.457 43.5776 219.077 42.3882 218.696 40.8183C216.889 42.2931 214.653 43.5776 212.274 43.5776C210.228 43.5776 208.278 42.3406 208.278 40.1998C208.278 36.9648 211.941 35.5852 214.415 34.4434L218.221 32.588ZM218.554 33.5395C216.223 34.6813 211.846 36.1561 211.846 39.2484C211.846 40.6756 212.75 42.0076 214.32 42.0076C215.842 42.0076 217.46 40.8659 218.554 39.8192V33.5395ZM248.573 43.6727C242.055 42.0552 236.537 38.059 236.537 30.7326C236.537 22.883 243.244 17.2217 250.856 17.2217C258.087 17.2217 264.653 22.4072 264.653 29.9715C264.653 35.157 261.418 39.5814 256.946 42.0076C253.235 44.0057 250.618 43.1494 247.431 45.3378V45.4329C247.907 45.4329 248.335 45.3854 248.763 45.3378C254.139 45.3378 257.659 48.6204 262.797 48.6204C266.841 48.6204 267.507 46.1465 267.84 46.1465C268.173 46.1465 268.078 46.8601 268.078 47.1456C268.078 50.5233 264.938 52.8069 261.608 52.8069C255.186 52.8069 252.141 46.3844 247.479 46.3844C245.195 46.3844 243.625 48.3825 242.578 48.3825C242.103 48.3825 241.865 48.0019 241.865 47.5738C241.865 46.6699 244.006 46.0514 244.672 45.9087L248.573 43.6727ZM241.389 30.3996C241.389 36.2036 243.72 42.7212 250.618 42.7212C257.088 42.7212 259.848 36.3464 259.848 30.6851C259.848 25.0714 257.517 18.2208 250.809 18.2208C243.911 18.2208 241.389 24.5005 241.389 30.3996ZM272.169 37.0124C272.169 39.2959 272.36 42.3882 275.357 42.3882C278.401 42.3882 280.637 39.6289 280.637 36.6794V31.4938C280.637 28.5443 280.875 27.6879 277.688 27.2122V26.451C278.782 26.5462 279.829 26.5462 280.875 26.6413C281.874 26.5462 282.921 26.5462 283.872 26.451V38.8678C283.872 39.9144 283.872 41.4367 285.3 41.4367C285.775 41.4367 286.251 41.3416 286.774 41.3416V42.2455L281.399 43.6251L280.685 39.962C279.305 42.1028 276.832 43.5776 274.263 43.5776C270.362 43.5776 268.934 41.4367 268.934 38.059V31.4938C268.934 28.5443 269.172 27.6879 265.985 27.2122V26.4986C267.079 26.5462 268.126 26.5937 269.172 26.6413C270.171 26.5937 271.218 26.5462 272.169 26.4986V37.0124ZM304.377 40.295C302.569 42.5309 300.428 43.5776 297.526 43.5776C292.769 43.5776 288.82 40.1998 288.82 35.2997C288.82 30.4948 292.483 26.118 297.479 26.118C301.237 26.118 304.852 28.2588 304.852 32.3977C304.852 32.921 304.282 32.7307 303.901 32.7307H292.816L292.674 34.5861C292.674 38.2493 294.577 42.3406 298.715 42.3406C300.666 42.3406 302.426 41.0086 303.568 39.4862L304.377 40.295ZM299.381 31.7317C300 31.7317 301.284 31.922 301.284 30.9705C301.284 28.5918 299.952 27.0219 297.526 27.0219C294.624 27.0219 293.482 29.2103 293.007 31.7317H299.381ZM307.945 43.2921H307.564L307.421 37.7736H308.183C308.801 40.2474 310.133 42.6737 312.988 42.6737C314.7 42.6737 316.223 41.8173 316.223 39.962C316.223 37.7736 313.987 36.8697 312.322 36.0133C310.086 34.8716 307.707 33.5871 307.707 30.6851C307.707 28.0209 309.848 26.0704 312.464 26.0704C313.654 26.0704 315.128 26.4034 316.223 27.0219L316.984 26.118H317.46L317.364 30.9229H316.603C315.89 28.9724 315.081 26.9268 312.655 26.9268C311.37 26.9268 310.181 27.6404 310.181 29.0676C310.181 31.0657 312.322 31.7793 313.749 32.588C316.413 33.9677 318.839 34.9667 318.839 38.4396C318.839 41.5795 316.127 43.53 313.178 43.53C311.703 43.53 310.086 43.0542 308.944 42.1503L307.945 43.2921ZM321.456 27.8307V27.117C323.406 25.9753 325.309 24.4529 326.118 22.2645H326.689V26.784H331.066V27.8307H326.689V38.8202C326.689 40.5328 327.022 42.3882 329.068 42.3882C330.4 42.3882 331.113 41.627 331.827 40.6756L332.54 41.1989C331.827 43.0542 329.924 43.6727 328.068 43.6727C325.309 43.6727 323.406 42.5785 323.406 39.6765V27.8307H321.456ZM111.56 63.7013C111.56 62.4643 111.56 59.6099 111.18 58.5633C110.656 57.2312 109.087 57.2312 107.85 57.2312V56.3273C109.705 56.3749 111.513 56.4225 113.368 56.47C115.319 56.4225 117.269 56.3749 119.22 56.3273V57.2312C117.983 57.2312 116.413 57.2312 115.89 58.5633C115.509 59.6099 115.509 62.4643 115.509 63.7013V75.1189C115.509 80.0666 116.27 80.8754 121.17 80.8754C122.978 80.8754 125.071 80.9705 126.641 79.9239C128.544 78.7346 128.782 77.2598 129.163 75.1189H130.114L129.781 81.922C129.115 81.8744 128.449 81.8268 127.783 81.7793C121.17 81.8744 114.462 81.8744 107.85 81.922V81.0181C109.087 81.0181 110.656 81.0181 111.18 79.686C111.56 78.6394 111.56 75.785 111.56 74.5481V63.7013ZM141.627 71.3606C142.008 71.1703 141.96 70.647 141.96 70.2189C141.96 67.6023 141.722 65.7469 138.582 65.7469C136.679 65.7469 135.062 65.8896 134.967 67.9353C134.872 68.7916 134.396 69.648 133.444 69.648C132.588 69.648 131.969 69.1247 131.969 68.2683C131.969 65.4139 137.107 64.8906 139.058 64.8906C143.34 64.8906 145.29 66.0324 145.29 70.4567V76.8316C145.29 77.7831 145.147 80.6375 146.622 80.6375C147.383 80.6375 147.764 79.9239 148.192 79.4006L148.906 79.7812C148.287 81.0657 146.86 82.3502 145.433 82.3502C143.863 82.3502 142.483 81.1608 142.103 79.5909C140.295 81.0657 138.059 82.3502 135.68 82.3502C133.635 82.3502 131.684 81.1132 131.684 78.9724C131.684 75.7374 135.347 74.3578 137.821 73.216L141.627 71.3606ZM141.96 72.3121C139.629 73.4539 135.252 74.9287 135.252 78.021C135.252 79.4482 136.156 80.7802 137.726 80.7802C139.248 80.7802 140.866 79.6385 141.96 78.5918V72.3121ZM155.376 67.0314C156.851 65.5091 158.516 64.8906 160.609 64.8906C165.557 64.8906 168.982 68.8392 168.982 73.549C168.982 78.4015 165.319 82.3977 160.323 82.3977C158.278 82.3977 155.852 81.5414 154.472 79.9239L152.616 82.1599H152.093V62.7498C152.093 61.7983 152.093 59.4196 151.713 58.6109C151.237 57.6594 150.095 57.707 149.191 57.6118V56.8506L155.376 55.6137V67.0314ZM155.376 77.2598C155.376 79.8288 156.803 81.256 159.515 81.256C163.891 81.256 165.128 77.3073 165.128 73.5966C165.128 70.0286 163.844 66.0799 159.61 66.0799C158.278 66.0799 156.47 66.7935 155.852 68.078C155.471 68.8392 155.376 69.981 155.376 70.9325V77.2598ZM189.819 73.549C189.819 78.7346 185.585 82.3502 180.542 82.3502C175.547 82.3502 171.313 78.4967 171.313 73.4063C171.313 68.4586 175.88 64.8906 180.542 64.8906C185.3 64.8906 189.819 68.5538 189.819 73.549ZM175.119 73.549C175.119 77.2122 176.213 81.4463 180.685 81.4463C184.871 81.4463 185.918 77.2122 185.918 73.7869C185.918 70.0761 184.871 65.7469 180.304 65.7469C176.166 65.7469 175.119 70.1713 175.119 73.549ZM195.005 72.7403C195.005 71.6936 195.052 68.9819 194.767 68.078C194.434 66.6984 193.435 66.8411 192.198 66.8411V66.0799C194.006 65.9848 195.718 65.2712 197.383 64.8906C197.716 66.0324 197.907 67.412 197.859 68.7916H197.954C198.953 66.4605 200.904 64.8906 203.568 64.8906C204.757 64.8906 206.327 65.4615 206.327 66.8887C206.327 67.6023 205.709 68.2683 204.995 68.2683C203.378 68.2683 203.711 66.2702 202.236 66.2702C201.094 66.2702 199.81 67.2217 199.239 68.2208C198.335 69.7907 198.335 71.6936 198.335 73.4539V77.2598C198.335 80.0666 198.049 81.0181 201.284 81.1608V81.922C199.81 81.8744 198.335 81.8268 196.86 81.7793C195.338 81.8268 193.911 81.8744 192.388 81.922V81.1608C195.29 80.9705 195.1 80.019 195.1 77.4976V72.7403H195.005ZM217.222 71.3606C217.602 71.1703 217.555 70.647 217.555 70.2189C217.555 67.6023 217.317 65.7469 214.177 65.7469C212.274 65.7469 210.656 65.8896 210.561 67.9353C210.466 68.7916 209.99 69.648 209.039 69.648C208.183 69.648 207.564 69.1247 207.564 68.2683C207.564 65.4139 212.702 64.8906 214.653 64.8906C218.934 64.8906 220.885 66.0324 220.885 70.4567V76.8316C220.885 77.7831 220.742 80.6375 222.217 80.6375C222.978 80.6375 223.359 79.9239 223.787 79.4006L224.5 79.7812C223.882 81.0657 222.455 82.3502 221.028 82.3502C219.458 82.3502 218.078 81.1608 217.697 79.5909C215.89 81.0657 213.654 82.3502 211.275 82.3502C209.229 82.3502 207.279 81.1132 207.279 78.9724C207.279 75.7374 210.942 74.3578 213.416 73.216L217.222 71.3606ZM217.602 72.3121C215.271 73.4539 210.894 74.9287 210.894 78.021C210.894 79.4482 211.798 80.7802 213.368 80.7802C214.891 80.7802 216.508 79.6385 217.602 78.5918V72.3121ZM225.832 66.5557V65.8421C227.783 64.7003 229.686 63.1779 230.495 60.9895H231.066V65.5091H235.442V66.5557H231.066V77.5452C231.066 79.2579 231.399 81.1132 233.444 81.1132C234.776 81.1132 235.49 80.3521 236.204 79.4006L236.917 79.9239C236.204 81.7793 234.301 82.3977 232.445 82.3977C229.686 82.3977 227.783 81.3035 227.783 78.4491V66.6508H225.832V66.5557ZM256.185 73.549C256.185 78.7346 251.95 82.3502 246.908 82.3502C241.912 82.3502 237.631 78.4967 237.631 73.4063C237.631 68.4586 242.198 64.8906 246.908 64.8906C251.665 64.8906 256.185 68.5538 256.185 73.549ZM241.484 73.549C241.484 77.2122 242.578 81.4463 247.05 81.4463C251.237 81.4463 252.283 77.2122 252.283 73.7869C252.283 70.0761 251.237 65.7469 246.67 65.7469C242.531 65.7469 241.484 70.1713 241.484 73.549ZM261.322 72.7403C261.322 71.6936 261.37 68.9819 261.085 68.078C260.752 66.6984 259.753 66.8411 258.563 66.8411V66.0799C260.371 65.9848 262.084 65.2712 263.749 64.8906C264.082 66.0324 264.272 67.412 264.225 68.7916H264.32C265.319 66.4605 267.269 64.8906 269.933 64.8906C271.123 64.8906 272.693 65.4615 272.693 66.8887C272.693 67.6023 272.074 68.2683 271.361 68.2683C269.743 68.2683 270.076 66.2702 268.601 66.2702C267.46 66.2702 266.175 67.2217 265.604 68.2208C264.7 69.7907 264.7 71.6936 264.7 73.4539V77.2598C264.7 80.0666 264.415 81.0181 267.65 81.1608V81.922C266.175 81.8744 264.7 81.8268 263.225 81.7793C261.703 81.8268 260.276 81.8744 258.754 81.922V81.1608C261.656 80.9705 261.465 80.019 261.465 77.4976V72.7403H261.322ZM279.401 64.8906V77.2598C279.496 79.7812 279.068 80.9705 282.112 81.1608V81.922C280.78 81.8744 279.353 81.8268 277.973 81.7793C276.451 81.8268 274.976 81.8744 273.454 81.922V81.1608C276.308 80.9705 276.07 80.019 276.118 77.4976V71.9791C276.118 71.2655 276.118 68.2683 275.975 67.6974C275.69 66.746 274.072 66.7935 273.311 66.8411V66.0799L279.401 64.8906ZM275.214 57.9924C275.214 56.8506 276.118 55.8992 277.307 55.8992C278.449 55.8992 279.353 56.8031 279.353 57.9924C279.353 59.1342 278.449 60.0381 277.402 60.0381C276.213 60.0381 275.214 59.1817 275.214 57.9924ZM299.905 79.0676C298.097 81.3035 295.956 82.3502 293.054 82.3502C288.297 82.3502 284.348 78.9724 284.348 74.0723C284.348 69.2674 288.011 64.8906 293.007 64.8906C296.765 64.8906 300.381 67.0314 300.381 71.1703C300.381 71.6936 299.81 71.5033 299.429 71.5033H288.344L288.202 73.3587C288.202 77.0219 290.152 81.1132 294.244 81.1132C296.194 81.1132 297.954 79.7812 299.096 78.2588L299.905 79.0676ZM294.862 70.4567C295.48 70.4567 296.765 70.647 296.765 69.6955C296.765 67.3169 295.433 65.7469 293.007 65.7469C290.105 65.7469 288.963 67.9353 288.487 70.4567H294.862ZM303.473 82.0647H303.092L302.95 76.5462H303.711C304.329 79.02 305.661 81.4463 308.516 81.4463C310.228 81.4463 311.751 80.5899 311.751 78.7346C311.751 76.5462 309.515 75.6423 307.85 74.7859C305.614 73.6442 303.235 72.3597 303.235 69.4577C303.235 66.7935 305.376 64.843 307.992 64.843C309.182 64.843 310.656 65.176 311.751 65.7945L312.512 64.8906H312.988L312.892 69.6955H312.131C311.418 67.745 310.609 65.7469 308.183 65.7469C306.898 65.7469 305.709 66.4605 305.709 67.8877C305.709 69.8858 307.85 70.5994 309.277 71.4082C311.941 72.7878 314.367 73.7869 314.367 77.2598C314.367 80.3996 311.656 82.3502 308.706 82.3502C307.231 82.3502 305.614 81.8744 304.472 80.9705L303.473 82.0647Z" fill="#455560" />
<path d="M315.871 64.1594V59.689H314.201V59.0909H318.219V59.689H316.542V64.1594H315.871Z" fill="#455560" />
<path d="M318.889 64.1594V59.0909H319.899L321.099 62.6796C321.209 63.0138 321.29 63.2639 321.341 63.4299C321.398 63.2455 321.488 62.9747 321.61 62.6174L322.824 59.0909H323.726V64.1594H323.08V59.9172L321.607 64.1594H321.002L319.536 59.8446V64.1594H318.889Z" fill="#455560" />
</svg>
Modifier classes for bh-progress-indicator-circular: bh-progress-indicator-circular--surface
<div class="bh-progress-indicator bh-progress-indicator-circular"></div>
<div class="bh-progress-indicator bh-progress-indicator-circular--surface">
<div class="bh-progress-indicator-circular"></div>
</div>
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)
<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>
© Banner Health