Directive Live demo

Template by HTML5 UP · Preview by Xidents

#loading,#stage,#preview-size{display:none!important} header{padding:1rem 1.5rem;gap:1rem 2rem;box-shadow:0 3px 16px #172d2608} .demo-identity{display:flex;align-items:center;gap:1rem;min-width:0} .demo-logo{width:110px;height:auto;display:block} .demo-heading{border-left:1px solid #d7dfd7;padding-left:1rem;min-width:0} .demo-heading h1{margin:0;font-size:1.125rem;line-height:1.4;letter-spacing:-.015em} .demo-heading small{display:block;font-size:.75rem;margin-top:.2rem} .demo-badge{display:inline-block;vertical-align:middle;margin-left:.6rem;padding:.15rem .5rem;border-radius:999px;background:#edf4ee;color:#15765c;font-size:.6875rem;font-weight:600;letter-spacing:.02em} nav{gap:.75rem} nav>a{padding:.6rem .9rem;border-radius:9px;text-decoration:none;font-size:.875rem;font-weight:550;border:1px solid #d7dfd7;gap:.5rem} nav>a:hover{background:#edf4ee;border-color:#9fb7a9} nav>a:last-child{background:#15765c;border-color:#15765c;color:white} nav>a:last-child:hover{background:#105e48} .preview-control{display:flex;align-items:center;gap:.6rem;padding:.2rem .35rem .2rem .75rem;border:1px solid #d7dfd7;border-radius:10px;background:#f6f6ef;font-size:.75rem;color:#50635a} .preview-control select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2315765c' stroke-width='1.5'/%3E%3C/svg%3E") right .65rem center/16px no-repeat;border:1px solid #d7dfd7;padding:.5rem 2rem .5rem .75rem;font-size:.875rem;min-width:125px;cursor:pointer} @media(max-width:1000px){header{padding:1rem}.demo-identity{width:100%}nav{width:100%}} @media(max-width:520px){.demo-logo{width:85px}.demo-heading{padding-left:.75rem}.demo-identity{gap:.75rem}.demo-heading h1{margin:0;font-size:1rem}.demo-badge{margin-left:0}.demo-heading small{font-size:.6875rem}nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem}nav>a{justify-content:center;text-align:center;font-size:.8125rem}.preview-control{grid-column:1/-1;grid-row:2;justify-content:space-between}.preview-control select{flex:1;max-width:65%}} @media(forced-colors:active){nav>a,.preview-control,.preview-control select{border:1px solid ButtonText}}

XIDENTS

Preparing your Directive preview.

Loading the design and its assets. This may take a moment.

Return to the gallery