Help Center - Done
Tabs HTML
<style>
.documentation-category-grid { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));}
</style>
<div class="page-header">
<div class="w-layout-grid grid-2">
<div class="page-header-left">
<div class="breadcrumbs">
<a href="#" class="breadcrumb">Help Center</a>
<div class="breadcrumb-divider">/</div>
<a href="#" class="breadcrumb">My Cases</a>
<div class="breadcrumb-divider">/</div>
<a href="#" class="breadcrumb">Case #123445</a>
</div>
<h1>Help Center<br></h1>
</div>
</div>
</div>
<div class="tabs-wrapper">
<div class="tabs-container">
<div data-current="Home" data-easing="ease" data-duration-in="300" data-duration-out="100" class="tabs w-tabs">
<div class="tabs-menu w-tab-menu">
<a data-w-tab="Home" class="tab w-inline-block w-tab-link w--current">
<div class="tab-icon w-embed">
<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M28.2261,22.812a13.9664,13.9664,0,0,0,0-13.624L28.4141,9a2.0021,2.0021,0,0,0,0-2.8281l-2.5857-2.586a2.0028,2.0028,0,0,0-2.8284,0l-.1877.1875a13.9687,13.9687,0,0,0-13.6243,0L9,3.5859a2.0024,2.0024,0,0,0-2.8284,0L3.5859,6.1719A2.0021,2.0021,0,0,0,3.5859,9l.1878.1875a13.97,13.97,0,0,0,0,13.625L3.5859,23a2.0021,2.0021,0,0,0,0,2.8281l2.5857,2.586a2.0021,2.0021,0,0,0,2.8284,0l.188-.188a13.9687,13.9687,0,0,0,13.6243.0005L23,28.4141a2.0021,2.0021,0,0,0,2.8284,0l2.5857-2.586a2.0021,2.0021,0,0,0,0-2.8281ZM28,16a11.973,11.973,0,0,1-1.2546,5.3315l-3.8948-3.895a6.9808,6.9808,0,0,0,0-2.873l3.8948-3.895A11.973,11.973,0,0,1,28,16ZM27,7.5859l-4.9346,4.9346A7.0434,7.0434,0,0,0,19.48,9.9346L24.4143,5ZM16,21a5,5,0,1,1,5-5A5.0057,5.0057,0,0,1,16,21ZM21.3154,5.2705,17.4365,9.1494a6.9808,6.9808,0,0,0-2.873,0L10.6846,5.2705A12.2484,12.2484,0,0,1,21.3154,5.2705ZM7.5859,5l4.9346,4.9346a7.0449,7.0449,0,0,0-2.5859,2.5859L5,7.5859ZM4,16a11.9716,11.9716,0,0,1,1.2546-5.3311l3.8948,3.8946a6.9808,6.9808,0,0,0,0,2.873L5.2546,21.3311A11.9716,11.9716,0,0,1,4,16ZM7.5857,27,5,24.4141,9.9346,19.48a7.0434,7.0434,0,0,0,2.5859,2.5859Zm3.0989-.27,3.8789-3.8789a6.9808,6.9808,0,0,0,2.873,0L21.3154,26.73A12.2484,12.2484,0,0,1,10.6846,26.73Zm13.73.27L19.48,22.0654A7.0449,7.0449,0,0,0,22.0654,19.48L27,24.4141Z"></path></svg>
</div>
<div class="tab-name">Home</div>
</a>
<a data-w-tab="My Cases" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed">
<svg width="32" height="32" fill="currentColor" viewbox="0 0 32 32"><path d="M28,28H4a2.0021,2.0021,0,0,1-2-2V21H4v5H28V21h2v5A2.0021,2.0021,0,0,1,28,28Z" transform="translate(0 0)"></path><rect x="7" y="21" width="18" height="2"></rect><rect x="7" y="16" width="18" height="2"></rect><rect x="7" y="11" width="18" height="2"></rect><rect x="7" y="6" width="18" height="2"></rect></svg>
</div>
<div class="tab-name">My Cases</div>
<div class="counter">4</div>
</a>
<a data-w-tab="Tutorials" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed">
<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><polygon points="13 11 13 21 21 16 13 11"></polygon><path d="m28,6H4c-1.103,0-2,.8975-2,2v16c0,1.1025.897,2,2,2h24c1.103,0,2-.8975,2-2V8c0-1.1025-.897-2-2-2Zm0,18H4V8h24v16Z"></path></svg>
</div>
<div class="tab-name">Tutorials</div>
</a>
<a data-w-tab="Documentation" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed">
<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><rect x="19" y="10" width="7" height="2"></rect><rect x="19" y="15" width="7" height="2"></rect><rect x="19" y="20" width="7" height="2"></rect><rect x="6" y="10" width="7" height="2"></rect><rect x="6" y="15" width="7" height="2"></rect><rect x="6" y="20" width="7" height="2"></rect><path d="M28,5H4A2.002,2.002,0,0,0,2,7V25a2.002,2.002,0,0,0,2,2H28a2.002,2.002,0,0,0,2-2V7A2.002,2.002,0,0,0,28,5ZM4,7H15V25H4ZM17,25V7H28V25Z"></path></svg>
</div>
<div class="tab-name">Documentation</div>
</a>
<a data-w-tab="Roadmap" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed">
<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M31,8c0-0.4-0.2-0.7-0.5-0.9l-7-4C23.3,3,23.2,3,23,3s-0.3,0-0.5,0.1L16,6.8L9.5,3.1C9.3,3,9.2,3,9,3S8.7,3,8.5,3.1l-7,4 C1.2,7.3,1,7.6,1,8v20c0,0.6,0.4,1,1,1c0.2,0,0.3-0.1,0.5-0.1l0,0L9,25.2l6.5,3.7C15.7,29,15.8,29,16,29s0.3,0,0.5-0.1l6.5-3.7 l6.5,3.7l0,0c0.1,0.1,0.3,0.1,0.5,0.1c0.6,0,1-0.4,1-1V8z M3,8.6l5-2.9v17.7l-5,2.9V8.6z M15,26.3l-5-2.9V5.7l5,2.9V26.3z M22,23.4 l-5,2.9V8.6l5-2.9V23.4z M24,23.4V5.7l5,2.9l0,17.7L24,23.4z"></path></svg>
</div>
<div class="tab-name">Roadmap</div>
</a>
<a data-w-tab="Release Notes" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed">
<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M26,6V8.17L5.64,11.87a2,2,0,0,0-1.64,2v4.34a2,2,0,0,0,1.64,2L8,20.56V24a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V22.74l6,1.09V26h2V6ZM18,24H10V20.93l8,1.45ZM6,18.17V13.83L26,10.2V21.8Z"></path></svg>
</div>
<div class="tab-name">Release Notes</div>
</a>
<a data-w-tab="Service Health" class="tab w-inline-block w-tab-link">
<div class="tab-icon w-embed">
<svg fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M28,16v6H4V6h7V4H4A2,2,0,0,0,2,6V22a2,2,0,0,0,2,2h8v4H8v2H24V28H20V24h8a2,2,0,0,0,2-2V16ZM18,28H14V24h4Z" transform="translate(0 0)"></path><path d="M18,18h-.01a1,1,0,0,1-.9511-.7253L15.2456,11H11V9h5a1,1,0,0,1,.9615.7252l1.0742,3.7589,3.0088-9.7783A1.0142,1.0142,0,0,1,22,3a.98.98,0,0,1,.9487.6838L24.7207,9H30v2H24a1,1,0,0,1-.9487-.6838l-1.0132-3.04L18.9556,17.2942A1,1,0,0,1,18,18Z" transform="translate(0 0)"></path></svg>
</div>
<div class="tab-name">Service Health</div>
</a>
</div>
<div class="tabs-content w-tab-content">
<!-- Tabs go here -->
</div>
</div>
</div>
</div>Script
The following script is needed on the Help Center page