The Avatar is designed to be paired with inline svg illustration elements or texts.
<div class="section">
<div class="Avatar Avatar--centered">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--centered center-sm">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--centered end-sm">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--vertical Avatar--centered">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--centered">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
<span class="Avatar-text">Jane Doe</span>
</div>
<div class="Avatar Avatar--centered">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<span class="Avatar-text">Baby Yoda</span>
</div>
<div class="Avatar Avatar--vertical Avatar--centered">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text">John Doe</div>
<div class="Avatar-text"><small>Sourcefit Inc.</small></div>
</div>
</div>
<div class="Avatar Avatar--centered">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
<div>
<div class="Avatar-text">Jane Doe</div>
<div class="Avatar-text"><small>Banh mi tumeric deep v letterpress butcher raw denim</small></div>
</div>
</div>
<div class="Avatar Avatar--centered">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<div>
<div class="Avatar-text">Baby Yoda</div>
<div class="Avatar-text"><small>Personal Account</small></div>
</div>
</div>
</div>
<div class="section">
<div class="Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Callout Callout--light">
This is a light callout.
</div>
</div>
</div>
</div>
<div class="Avatar">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
<div>
<div class="Avatar-text"><small>2:14 PM</small></div>
<div class="Avatar-text">
<div class="Callout Callout--light">
This is a light callout.
</div>
</div>
</div>
</div>
<div class="Avatar">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<div>
<div class="Avatar-text"><small>1:43 PM</small></div>
<div class="Avatar-text">
<div class="Callout Callout--light">
This is a light callout.
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="Avatar Avatar--inline Avatar--xxxl Avatar--centered">
<span class="Avatar-initials">XXXL</span>
<span class="Avatar-text">XXXL</span>
</div>
<div class="Avatar Avatar--inline Avatar--xxl Avatar--centered">
<span class="Avatar-initials">XXL</span>
<span class="Avatar-text">XXL</span>
</div>
<div class="Avatar Avatar--inline Avatar--xl Avatar--centered">
<span class="Avatar-initials">XL</span>
<span class="Avatar-text">XL</span>
</div>
<div class="Avatar Avatar--inline Avatar--lg Avatar--centered">
<span class="Avatar-initials">LG</span>
<span class="Avatar-text">Large</span>
</div>
<div class="Avatar Avatar--inline Avatar--sm Avatar--centered">
<span class="Avatar-initials">SM</span>
<span class="Avatar-text">S Mall</span>
</div>
<div class="Avatar Avatar--inline Avatar--xs Avatar--centered">
<span class="Avatar-initials">XS</span>
<span class="Avatar-text">Xtra Small</span>
</div>
</div>
<div class="section">
<h3>Sizes only on Initials</h3>
<div class="Avatar Avatar--inline Avatar--initials-xxl Avatar--centered">
<span class="Avatar-initials">XXL</span>
<span class="Avatar-text">XXL</span>
</div>
<div class="Avatar Avatar--inline Avatar--initials-xl Avatar--centered">
<span class="Avatar-initials">XL</span>
<span class="Avatar-text">XL</span>
</div>
<div class="Avatar Avatar--inline Avatar--initials-lg Avatar--centered">
<span class="Avatar-initials">LG</span>
<span class="Avatar-text">Large</span>
</div>
<div class="Avatar Avatar--inline Avatar--initials-sm Avatar--centered">
<span class="Avatar-initials">SM</span>
<span class="Avatar-text">S Mall</span>
</div>
<div class="Avatar Avatar--inline Avatar--initials-xs Avatar--centered">
<span class="Avatar-initials">XS</span>
<span class="Avatar-text">Xtra Small</span>
</div>
</div>
<div class="section">
<div class="Callout Callout--light">
<div class="Avatar Avatar--centered">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">Jane Doe</span>
</div>
</div>
</div>
<div class="section">
<div class="Callout Callout--primary">
<div class="Avatar Avatar--reverse Avatar--centeredv">
<button class="Avatar-initials Avatar-btn">HP</button>
<span class="Avatar-text">Harry Potter</span>
</div>
</div>
</div>
<div class="section">
<div class="Callout Callout--light">
<h3>Avatar Rounded Square</h3>
<p>
<div class="Avatar Avatar--inline Avatar--roundedSquare Avatar--xxl Avatar--centered">
<span class="Avatar-initials">XXL</span>
<span class="Avatar-text">XXL</span>
</div>
<div class="Avatar Avatar--inline Avatar--roundedSquare Avatar--xl Avatar--centered">
<span class="Avatar-initials">XL</span>
<span class="Avatar-text">XL</span>
</div>
<div class="Avatar Avatar--inline Avatar--roundedSquare Avatar--lg Avatar--centered">
<span class="Avatar-initials">LG</span>
<span class="Avatar-text">LG</span>
</div>
<div class="Avatar Avatar--inline Avatar--roundedSquare Avatar--sm Avatar--centered">
<span class="Avatar-initials">SM</span>
<span class="Avatar-text">SM</span>
</div>
<div class="Avatar Avatar--inline Avatar--roundedSquare Avatar--xs Avatar--centered">
<span class="Avatar-initials">XS</span>
<span class="Avatar-text">XS</span>
</div>
</p>
</div>
</div>
<div class="section">
<h3>Avatar Square</h3>
<p>
<div class="Avatar Avatar--inline Avatar--square Avatar--xxl Avatar--centered">
<span class="Avatar-initials">XXL</span>
<span class="Avatar-text">XXL</span>
</div>
<div class="Avatar Avatar--inline Avatar--square Avatar--xl Avatar--centered">
<span class="Avatar-initials">XL</span>
<span class="Avatar-text">XL</span>
</div>
<div class="Avatar Avatar--inline Avatar--square Avatar--lg Avatar--centered">
<span class="Avatar-initials">LG</span>
<span class="Avatar-text">LG</span>
</div>
<div class="Avatar Avatar--inline Avatar--square Avatar--sm Avatar--centered">
<span class="Avatar-initials">SM</span>
<span class="Avatar-text">SM</span>
</div>
<div class="Avatar Avatar--inline Avatar--square Avatar--xs Avatar--centered">
<span class="Avatar-initials">XS</span>
<span class="Avatar-text">XS</span>
</div>
</p>
</div>
<div class="section">
<h3>Avatar with notification</h3>
<p>
<div class="Avatar Avatar--inline Avatar--xxl Avatar--centered">
<span class="Avatar-initials">XXL
<span class="Avatar-notification">
1
</span>
</span>
</div>
<div class="Avatar Avatar--inline Avatar--xl Avatar--centered">
<span class="Avatar-initials">XL
<span class="Avatar-notification">
99
</span>
</span>
</div>
<div class="Avatar Avatar--inline Avatar--lg Avatar--centered">
<span class="Avatar-initials">LG
<span class="Avatar-notification">
99
</span>
</span>
</div>
<div class="Avatar Avatar--inline Avatar--sm Avatar--centered">
<span class="Avatar-initials">SM
<span class="Avatar-notification">
99+
</span>
</span>
</div>
<div class="Avatar Avatar--inline Avatar--xs Avatar--centered">
<span class="Avatar-initials">XS
<span class="Avatar-notification">
9+
</span>
</span>
</div>
</p>
</div>
<div class="section">
<h3>Avatar with icon</h3>
<p>
<div class="Avatar Avatar--inline Avatar--xxl Avatar--centered">
<span class="Avatar-initials">XXL</span>
<svg class="Avatar-icon Icon Icon--circle Icon--filled Icon--success" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
<div class="Avatar Avatar--inline Avatar--xl Avatar--centered">
<span class="Avatar-initials">XL</span>
<svg class="Avatar-icon Icon Icon--circle Icon--filled Icon--success" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
<div class="Avatar Avatar--inline Avatar--lg Avatar--centered">
<span class="Avatar-initials">LG</span>
<svg class="Avatar-icon Icon Icon--circle Icon--filled Icon--success Icon--lg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
<div class="Avatar Avatar--inline Avatar--sm Avatar--centered">
<span class="Avatar-initials">SM</span>
<svg class="Avatar-icon Icon Icon--circle Icon--filled Icon--success" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
<div class="Avatar Avatar--inline Avatar--xs Avatar--centered">
<span class="Avatar-initials">XS</span>
<svg class="Avatar-icon Icon Icon--circle Icon--filled Icon--success" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
</p>
</div>
<div class="section">
<h3>Avatar - Outlined</h3>
<p>
<div class="Avatar Avatar--outline Avatar--inline Avatar--xxl Avatar--centered">
<span class="Avatar-initials">XXL</span>
</div>
<div class="Avatar Avatar--outline Avatar--inline Avatar--xl Avatar--centered">
<span class="Avatar-initials">XL</span>
</div>
<div class="Avatar Avatar--outline Avatar--inline Avatar--lg Avatar--centered">
<span class="Avatar-initials">LG</span>
</div>
<div class="Avatar Avatar--outline Avatar--inline Avatar--sm Avatar--centered">
<span class="Avatar-initials">SM</span>
</div>
<div class="Avatar Avatar--outline Avatar--inline Avatar--xs Avatar--centered">
<span class="Avatar-initials">XS</span>
</div>
</p>
</div>
<div class="section">
<h3>Avatar with icon - Outlined</h3>
<p>
<div class="Avatar Avatar--outline Avatar--inline Avatar--xxl Avatar--centered">
<span class="Avatar-initials">XXL</span>
<svg class="Avatar-icon Icon Icon--circle Icon--filled Icon--success" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
<div class="Avatar Avatar--outline Avatar--inline Avatar--xl Avatar--centered">
<span class="Avatar-initials">XL</span>
<svg class="Avatar-icon Icon Icon--circle Icon--filled Icon--success" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
<div class="Avatar Avatar--outline Avatar--inline Avatar--lg Avatar--centered">
<span class="Avatar-initials">LG</span>
<svg class="Avatar-icon Icon Icon--circle Icon--filled Icon--success Icon--lg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
<div class="Avatar Avatar--outline Avatar--inline Avatar--sm Avatar--centered">
<span class="Avatar-initials">SM</span>
<svg class="Avatar-icon Icon Icon--circle Icon--filled Icon--success" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
<div class="Avatar Avatar--outline Avatar--inline Avatar--xs Avatar--centered">
<span class="Avatar-initials">XS</span>
<svg class="Avatar-icon Icon Icon--circle Icon--filled Icon--success" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
</p>
</div>
<div class="section">
<h3>Avatar with button (appears on hover)</h3>
<ul class="List List--none row gutter-y-xs gutter-x-xs start-sm is-margin-top-xs is-margin-bottom-none">
<li class="col-sm col-sm-shrink-0 col-sm-grow-0 is-relative ControlledAvatar">
<div class="Avatar Avatar--centered Avatar--light Avatar--xxl">
<span class="Avatar-initials">XXL</span>
</div>
<button class="TypeBtn">
<svg class="Icon Icon--xxl" title="block accent clear icon" role="img">
<use xlink:href="#closeCircleFilled"></use>
</svg>
</button>
</li>
<li class="col-sm col-sm-shrink-0 col-sm-grow-0 is-relative ControlledAvatar ControlledAvatar">
<div class="Avatar Avatar--centered Avatar--light Avatar--xl">
<span class="Avatar-initials">XL</span>
</div>
<button class="TypeBtn">
<svg class="Icon Icon--xl" title="block accent clear icon" role="img">
<use xlink:href="#closeCircleFilled"></use>
</svg>
</button>
</li>
<li class="col-sm col-sm-shrink-0 col-sm-grow-0 is-relative ControlledAvatar">
<div class="Avatar Avatar--centered Avatar--light Avatar--lg">
<span class="Avatar-initials">LG</span>
</div>
<button class="TypeBtn">
<svg class="Icon Icon--lg" title="block accent clear icon" role="img">
<use xlink:href="#closeCircleFilled"></use>
</svg>
</button>
</li>
<li class="col-sm col-sm-shrink-0 col-sm-grow-0 is-relative ControlledAvatar">
<div class="Avatar Avatar--centered Avatar--light">
<span class="Avatar-initials">BS</span>
</div>
<button class="TypeBtn">
<svg class="Icon" title="block accent clear icon" role="img">
<use xlink:href="#closeCircleFilled"></use>
</svg>
</button>
</li>
</ul>
</div>
<div class="Avatar Avatar--centered Avatar--primary">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--centered Avatar--secondary">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--centered Avatar--success">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--centered Avatar--neutral">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--centered Avatar--attention">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--centered Avatar--error">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--centered Avatar--dark">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
<div class="Avatar Avatar--centered Avatar--light">
<span class="Avatar-initials">JD</span>
<span class="Avatar-text">John Doe</span>
</div>
Avatar can be group together:
<div class="section">
<div class="Callout Callout--light">
<h3>Avatar Group</h3>
<p>
<div class="AvatarGroup">
<div class="Avatar Avatar--primary">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<p>
<div class="AvatarGroup">
<div class="Avatar Avatar--primary Avatar--sm">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials"><span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary Avatar--sm">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials"><span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<p>
<div class="AvatarGroup">
<div class="Avatar Avatar--primary Avatar--xs">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials"><span class="Interactive Interactive--xs Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary Avatar--xs">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials"><span class="Interactive Interactive--xs Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<h3>Avatar Group - Overlapping</h3>
<p>
<div class="AvatarGroup AvatarGroup--overlap">
<div class="Avatar Avatar--primary">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<p>
<div class="AvatarGroup AvatarGroup--overlap">
<div class="Avatar Avatar--primary Avatar--sm">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials"><span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary Avatar--sm">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials"><span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<p>
<div class="AvatarGroup AvatarGroup--overlap">
<div class="Avatar Avatar--primary Avatar--xs">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials"><span class="Interactive Interactive--xs Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary Avatar--xs">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials"><span class="Interactive Interactive--xs Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<h3>Avatar Group - Rounded square edge</h3>
<p>
<div class="AvatarGroup AvatarGroup--roundedSquareEdge">
<div class="Avatar Avatar--primary Avatar--square">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar Avatar--square">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar Avatar--square">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary Avatar--square">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar Avatar--square">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar Avatar--square">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--square">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<p>
<div class="AvatarGroup AvatarGroup--roundedSquareEdge">
<div class="Avatar Avatar--primary Avatar--square Avatar--sm">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar Avatar--square Avatar--sm">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar Avatar--square Avatar--sm">
<span class="Avatar-initials"><span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary Avatar--square Avatar--sm">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar Avatar--square Avatar--sm">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar Avatar--square Avatar--sm">
<span class="Avatar-initials"><span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--square Avatar--sm">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<p>
<div class="AvatarGroup AvatarGroup--roundedSquareEdge">
<div class="Avatar Avatar--primary Avatar--square Avatar--xs">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar Avatar--square Avatar--xs">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar Avatar--square Avatar--xs">
<span class="Avatar-initials"><span class="Interactive Interactive--xs Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary Avatar--square Avatar--xs">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar Avatar--square Avatar--xs">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar Avatar--square Avatar--xs">
<span class="Avatar-initials"><span class="Interactive Interactive--xs Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--square Avatar--xs">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<h3>Avatar Group - Diagonal</h3>
<p>
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--primary">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar">
<span class="Avatar-initials"><span class="Interactive Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<p>
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--primary Avatar--sm">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials"><span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary Avatar--sm">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials"><span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--sm">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
<p>
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--primary Avatar--xs">
<span class="Avatar-initials">AB</span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials"><span class="Interactive Interactive--xs Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--secondary Avatar--xs">
<span class="Avatar-initials">CD</span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials">EF</span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials"><span class="Interactive Interactive--xs Interactive--blankUser" title="Blank User icon"></span></span>
</div>
<div class="Avatar Avatar--xs">
<span class="Avatar-initials">GH</span>
</div>
</div>
</p>
</div>
</div>
This is the Knit brand logo. You can change the size of it by overriding the width and height of the BrandLogo module. The logo is applied as a background image so the widths and heights must remain proportional to the logo.
<!-- sections used for Style Guide spacing -->
<div class="section">
<span class="BrandLogo" title="Knit"></span>
</div>
Callouts are used as a visual container for content. They define consistent padding and styling for content that requires increased hierarchical attention from users.
Callout for drag here preview.
<!-- sections used for Style Guide spacing -->
<div class="section">
<div class="Callout">This is a callout.</div>
</div>
<div class="section">
<div class="Callout Callout--ghost">This is a ghost callout.</div>
</div>
<div class="section">
<div class="Callout Callout--glassy Callout--reverse">This is a callout with decreased opacity of whatever color it has.</div>
</div>
<div class="section">
<div class="Callout Callout--dark Callout--glassyDark Callout--reverse">This is a callout with decreased opacity of dark color.</div>
</div>
<div class="section">
<div class="Callout Callout--edged">This is a callout with decreased edged.</div>
</div>
<div class="section">
<div class="Callout">
<div class="Callout-titleIcon">
<svg
class="Icon Icon--circle Icon--filled Icon--xxxl Icon--success"
title="check icon"
role="img"
>
<use xlink:href="#check"></use>
</svg>
</div>
This is a callout that sets the content position with offset of 2rem.
</div>
</div>
<div class="section">
<div class="Callout Callout--noPadding">This is callout with no padding. Used in Dashboard.</div>
</div>
<div class="section">
<div class="Callout Callout--reverse Callout--dark">
<div class="Callout-textOverlay">This is a callout with a center overlay</div>
<div class="row">
<div class="col-sm-3">
<div class="Callout Callout--secondary"></div>
</div>
<div class="col-sm-3">
<div class="Callout Callout--secondary"></div>
</div>
</div>
</div>
</div>
<div class="section">
<p>Callout for drag here preview.</p>
<div class="Callout Callout--reverse Callout--secondary is-padding-xxxs is-border-radius-xxs">
<div class="row">
<div class="col-sm-1">
<div class="Callout Callout--light is-border-dashed is-border-radius-xxs"></div>
</div>
<div class="col-sm-1">
<div class="Callout Callout--light is-border-dashed is-border-radius-xxs"></div>
</div>
<div class="col-sm-1">
<div class="Callout Callout--light is-border-dashed is-border-radius-xxs"></div>
</div>
<div class="col-sm-1">
<div class="Callout Callout--light is-border-dashed is-border-radius-xxs"></div>
</div>
<div class="col-sm-1">
<div class="Callout Callout--light is-border-dashed is-border-radius-xxs"></div>
</div>
<div class="col-sm-1">
<div class="Callout Callout--light is-border-dashed is-border-radius-xxs"></div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="Callout Callout--form">
This is a callout for forms.
</div>
</div>
<div class="section">
<div class="Callout Callout--primary">This is a primary callout.</div>
</div>
<div class="section">
<div class="Callout Callout--secondary">This is a secondary callout.</div>
</div>
<div class="section">
<div class="Callout Callout--success">This is a success callout.</div>
</div>
<div class="section">
<div class="Callout Callout--neutral">This is a neutral callout.</div>
</div>
<div class="section">
<div class="Callout Callout--attention">This is a attention callout.</div>
</div>
<div class="section">
<div class="Callout Callout--error">This is a error callout.</div>
</div>
<div class="section">
<div class="Callout Callout--dark">This is a dark callout.</div>
</div>
<div class="section">
<div class="Callout Callout--light">This is a light callout.</div>
</div>
<div class="section">
<div class="Callout Callout--clearPrimary">This is a primary callout.</div>
</div>
<div class="section">
<div class="Callout Callout--clearSecondary">This is a secondary callout.</div>
</div>
<div class="section">
<div class="Callout Callout--clearSuccess">This is a success callout.</div>
</div>
<div class="section">
<div class="Callout Callout--clearNeutral">This is a neutral callout.</div>
</div>
<div class="section">
<div class="Callout Callout--clearAttention">This is a attention callout.</div>
</div>
<div class="section">
<div class="Callout Callout--clearError">This is a error callout.</div>
</div>
<div class="section">
<div class="Callout Callout--clearDark">This is a dark callout.</div>
</div>
<div class="section">
<div class="Callout Callout--clearLight">This is a light callout.</div>
</div>
Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.
Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.
<div class="row section">
<div class="col-sm-3">
<div class="Callout">
<div class="Callout-header">
<h3>Callout with header section</h3>
</div>
<p>Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.</p>
</div>
</div>
<div class="col-sm-3">
<div class="Callout Callout--secondary Callout--reverse">
<div class="Callout-header">
<h3>Callout with header section</h3>
</div>
<p>Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.</p>
</div>
</div>
</div>
<div class="section">
<div class="Callout Callout--light Callout--split">
<div class="Callout-col">
<h3>Split callout</h3>
<div>Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard.</div>
</div>
<div class="Callout-col">
<div class="section-centered">
<div>
Some text
</div>
<button class="Btn Btn--primary" type="button">
Button
</button>
</div>
</div>
</div>
</div>
<div class="Callout Callout--light Callout--split">
<div class="Callout-header">
<h2>Or combine them all</h2>
</div>
</div>
Bubble are just like callouts except that it has a pointer.
<div class="section bg-mountains">
<div class="section">
<div class="row around-sm">
<div class="col-sm-2">
<div class="Bubble Bubble-LeftTPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
<div class="col-sm-2">
<div class="Bubble Bubble-LeftCPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
<div class="col-sm-2">
<div class="Bubble Bubble-LeftBPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
</div>
</div>
<div class="section">
<div class="row around-sm">
<div class="col-sm-2">
<div class="Bubble Bubble-RightTPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
<div class="col-sm-2">
<div class="Bubble Bubble-RightCPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
<div class="col-sm-2">
<div class="Bubble Bubble-RightBPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
</div>
</div>
<div class="section">
<div class="row">
<div class="col-sm-2">
<div class="Bubble Bubble-BottomLPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
<div class="col-sm-2">
<div class="Bubble Bubble-BottomCPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
<div class="col-sm-2">
<div class="Bubble Bubble-BottomRPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
</div>
</div>
<div class="section">
<div class="row">
<div class="col-sm-2">
<div class="Bubble Bubble-TopLPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
<div class="col-sm-2">
<div class="Bubble Bubble-TopCPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
<div class="col-sm-2">
<div class="Bubble Bubble-TopRPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="section section-centered">
<div class="row center-sm">
<div class="col-sm-1">
<div class="Bubble Bubble--shadow Bubble-LeftTPointer">
<span>
Viral gastropub pickled, craft beer fixie succulents.
</span>
</div>
</div>
<div class="col-sm-1">
<div class="Bubble Bubble--shadow Bubble-LeftCPointer">
<small>
pour-over air plant. cliche celiac hot.
</small>
</div>
</div>
<div class="col-sm-2">
<div class="Bubble Bubble--shadow Bubble-LeftBPointer">
<span>
pour-over air plant. Lumbersexual cliche celiac hot chicken.
Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia.
</span>
</div>
</div>
</div>
</div>
A container with arrow graphics that points to different direction.
<div class="section-lg">
<div class="section-lg">
<div class="row around-sm">
<div class="col-sm-3">
<div class="Callout Callout--light Pointer Pointer--topCenter">
<span class="Graphic Graphic--arrowDownLeft Pointer-arrow"></span>
<span>
Pointer top center
</span>
</div>
</div>
<div class="col-sm-3">
<div class="Callout Callout--light Pointer Pointer--bottomCenter">
<span class="Graphic Graphic--arrowDownLeft Pointer-arrow"></span>
<span>
Pointer bottom center
</span>
</div>
</div>
</div>
</div>
<div class="section-lg">
<div class="row around-sm">
<div class="col-sm-3">
<div class="Callout Callout--light Pointer Pointer--rightTop">
<span class="Graphic Graphic--arrowDownLeft Pointer-arrow"></span>
<span>
Pointer top right
</span>
</div>
</div>
<div class="col-sm-3">
<div class="Callout Callout--light Pointer Pointer--rightBottom">
<span class="Graphic Graphic--arrowDownLeft Pointer-arrow"></span>
<span>
Pointer bottom right
</span>
</div>
</div>
</div>
</div>
</div>
<div class="section-lg">
<div class="row around-sm">
<div class="col-sm-3">
<div class="Callout Callout--light Pointer Pointer--leftTop">
<span class="Graphic Graphic--arrowDownRight Pointer-arrow Graphic--xlg"></span>
<span>
Pointer top left with bigger pointer image
</span>
</div>
</div>
<div class="col-sm-3 ">
<div class="Callout Callout--light Pointer Pointer--bottomLeft">
<span class="Graphic Graphic--arrowDownRight Pointer-arrow Graphic--xlg"></span>
<span>
Pointer bottom left with bigger pointer image
</span>
</div>
</div>
</div>
</div>
<div class="section-lg">
<div class="row around-sm">
<div class="col-sm-3">
<div class="Callout Callout--light Pointer Pointer--sideLeftTop">
<span class="Graphic Graphic--arrowDownRight Pointer-arrow"></span>
<span>
Side pointer top left <br/><br/><br/><br/><br/>
Lorem ipsum, or lipsum as it is sometimes known, <br/>
is dummy text used in laying out print, graphic or web designs. <br/>
is dummy text used in laying out print, graphic or web designs. <br/>
</span>
</div>
</div>
<div class="col-sm-3">
<div class="Callout Callout--light Pointer Pointer--sideRightTop">
<span class="Graphic Graphic--arrowDownLeft Pointer-arrow"></span>
<span>
Side pointer top right <br/><br/><br/><br/><br/>
Lorem ipsum, or lipsum as it is sometimes known, <br/>
is dummy text used in laying out print, graphic or web designs. <br/>
is dummy text used in laying out print, graphic or web designs. <br/>
</span>
</div>
</div>
</div>
</div>
<div class="section-lg">
<div class="row around-sm">
<div class="col-sm-3">
<div class="Callout Callout--light Pointer Pointer--sideLeftTopCenter">
<span class="Graphic Graphic--arrowDownRight Pointer-arrow"></span>
<span>
Side pointer center left <br/><br/><br/><br/><br/>
Lorem ipsum, or lipsum as it is sometimes known, <br/>
is dummy text used in laying out print, graphic or web designs. <br/>
The passage is attributed to an unknown typesetter in the 15th <br/>
century who is thought to have scrambled parts of Cicero's <br/>
De Finibus Bonorum et Malorum for use in a type specimen book. <br/>
It usually begins with<br/>
</span>
</div>
</div>
<div class="col-sm-3">
<div class="Callout Callout--light Pointer Pointer--sideRightTopCenter">
<span class="Graphic Graphic--arrowDownLeft Pointer-arrow"></span>
<span>
Side pointer center right <br/><br/><br/><br/><br/>
Lorem ipsum, or lipsum as it is sometimes known, <br/>
is dummy text used in laying out print, graphic or web designs. <br/>
The passage is attributed to an unknown typesetter in the 15th <br/>
century who is thought to have scrambled parts of Cicero's <br/>
De Finibus Bonorum et Malorum for use in a type specimen book. <br/>
It usually begins with<br/>
</span>
</div>
</div>
</div>
</div>
Chats are used as a visual container of chat messages for user's interactivity with each other.
Say hi to them with a smiley
<div class="row section">
<div class="col-sm-3">
<div class="Chat">
<div class="Chat-header">
<h3 class="Chat-title">Chat with header section</h3>
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
</div>
<div class="Chat-content is-scrollable-y">
<div class="Chat-date Divider Divider--text">
Tuesday, January 15, 2021
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
doloremque laudantium
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
<div class="Chat-date Divider Divider--text">
Today
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
</div>
<div class="Chat-footer">
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="Chat Chat--secondary">
<div class="Chat-header">
<h3 class="Chat-title">Chat with header section</h3>
<button class="IconBtn">
<svg class="Icon" title="plus icon" role="img">
<use xlink:href="#plus"></use>
</svg>
</button>
</div>
<div class="Chat-content is-scrollable-y">
<div class="Chat-date Divider Divider--text">
Tuesday, January 15, 2021
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
doloremque laudantium
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
<div class="Chat-date Divider Divider--text">
Today
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
</div>
<div class="Chat-footer">
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row section">
<div class="col-sm-3">
<h3>Chat with selecting recipients</h3>
<div class="Chat Chat--headerPacked">
<div class="Chat-header">
<div class="Input Input--inline">
<label>To:</label>
<div>
<span class="Badge Badge--person Badge--light">
<div class="Avatar Avatar--sm Avatar--centered">
<span class="Avatar-initials">GH</span>
</div>
<span>
Light
</span>
</span>
<span class="Badge Badge--person Badge--light">
<div class="Avatar Avatar--sm Avatar--centered">
<span class="Avatar-initials">GH</span>
</div>
<span>
Light
</span>
<button class="IconBtn IconBtn--unspaced">
<small><svg class="Icon" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg></small>
</button>
</span>
<div class="Drop Drop--inline Drop--input" data-drop-direction="down">
<div class="Input Input--ghost">
<div class="Input-field">
<input type="text" data-input-dynamic Drop-toggle />
</div>
</div>
<div class="Drop-menu">
<h4 class="Drop-header">Connections</h4>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials">
<span class="Interactive Interactive--blankUser" title="Blank User icon"></span>
</span>
<div>
<div class="Avatar-text">John Doe</div>
<div class="Avatar-text">
<small>Sourcefit Inc.</small>
</div>
</div>
</div>
</a>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials">JD</span>
<div class="Avatar-text">Jane Doe</div>
</div>
</a>
<a class="Drop-item" href="#">
<div class="Avatar">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<div>
<div class="Avatar-text">Baby Yoda</div>
<div class="Avatar-text">
<small>Lorem Ipsum</small>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
</div>
<div class="Chat-content is-scrollable-y">
<div class="Chat-welcome">
<div class="mediaObject">
<figure class="mediaObject-figure">
<span class="Graphic Graphic--whiteSheepSayHi" title="White Sheep Say Hi icon"></span>
</figure>
<div class="mediaObject-body">
<p>Say hi to them with a smiley</p>
<button class="Btn Btn--primary Btn--expanded">Say Hi</button>
</div>
</div>
</div>
</div>
<div class="Chat-footer">
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<h3>Chat with actions</h3>
<div class="Chat Chat--headerPacked">
<div class="Chat-header">
<div class="Avatar">
<div>
<div class="Avatar-text capitalize">
Stephen Curry
</div>
<div class="Avatar-text">
<small class="fineprint">
<svg title="close icon" role="img" class="Icon Icon--circle Icon--filled Icon--light"></svg>
<span>Offline</span>
</small>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon Icon--lg" title="Information icon" role="img">
<use xlink:href="#info"></use>
</svg>
</button>
</div>
<div class="Chat-content is-scrollable-y">
<div class="Chat-date Divider Divider--text">
Tuesday, January 15, 2021
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Chat-time Avatar-text"><small>1:23 AM</small></div>
<div class="Chat-inner Avatar-text">
<div class="Chat-message">
doloremque laudantium
</div>
<div id="chat-actions-1" class="Chat-actions">
<div class="Drop" data-drop-direction="up" data-drop-alignment="center" data-drop-toggle-class="Chat-actions-is-active" data-drop-toggle-class-to="#chat-actions-1">
<button class="IconBtn" data-drop-toggle>
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<div class="Drop-menu" data-drop-arrow="bottom-center">
<a class="Drop-item" href="#">Edit</a>
<a class="Drop-item" href="#">Copy</a>
<a class="Drop-item" href="#">Forward</a>
<a class="Drop-item" href="#">Select</a>
<a class="Drop-item" href="#">Unset</a>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="share icon" role="img">
<use xlink:href="#share"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Chat-time Avatar-text"><small>1:23 AM</small></div>
<div class="Chat-inner Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
<div id="chat-actions-2" class="Chat-actions">
<div class="Drop" data-drop-direction="up" data-drop-alignment="center" data-drop-toggle-class="Chat-actions-is-active" data-drop-toggle-class-to="#chat-actions-2">
<button class="IconBtn" data-drop-toggle>
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<div class="Drop-menu" data-drop-arrow="bottom-center">
<a class="Drop-item" href="#">Edit</a>
<a class="Drop-item" href="#">Copy</a>
<a class="Drop-item" href="#">Forward</a>
<a class="Drop-item" href="#">Select</a>
<a class="Drop-item" href="#">Unset</a>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="share icon" role="img">
<use xlink:href="#share"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="Chat-date Divider Divider--text">
Today
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Chat-time Avatar-text"><small>1:23 AM</small></div>
<div class="Chat-inner Avatar-text">
<div class="Chat-message">
Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.
</div>
<div id="chat-actions-3" class="Chat-actions">
<div class="Drop" data-drop-direction="up" data-drop-alignment="center" data-drop-toggle-class="Chat-actions-is-active" data-drop-toggle-class-to="#chat-actions-3">
<button class="IconBtn" data-drop-toggle>
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<div class="Drop-menu" data-drop-arrow="bottom-center">
<a class="Drop-item" href="#">Edit</a>
<a class="Drop-item" href="#">Copy</a>
<a class="Drop-item" href="#">Forward</a>
<a class="Drop-item" href="#">Select</a>
<a class="Drop-item" href="#">Unset</a>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="share icon" role="img">
<use xlink:href="#share"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Chat-time Avatar-text"><small>1:23 AM</small></div>
<div class="Chat-inner Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
<div id="chat-actions-4" class="Chat-actions">
<div class="Drop" data-drop-direction="up" data-drop-alignment="center" data-drop-toggle-class="Chat-actions-is-active" data-drop-toggle-class-to="#chat-actions-4">
<button class="IconBtn" data-drop-toggle>
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<div class="Drop-menu" data-drop-arrow="bottom-center">
<a class="Drop-item" href="#">Edit</a>
<a class="Drop-item" href="#">Copy</a>
<a class="Drop-item" href="#">Forward</a>
<a class="Drop-item" href="#">Select</a>
<a class="Drop-item" href="#">Unset</a>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="share icon" role="img">
<use xlink:href="#share"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="Chat-footer">
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
<div class="Chat-sidebar">
<div class="Avatar Avatar--vertical Avatar--centered Avatar--lg">
<span class="Avatar-initials">SC</span>
<div>
<div class="Avatar-text"><strong>Stephen Curry</strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row section">
<div class="col-sm-3">
<h3>Chat with selecting message</h3>
<div class="Chat Chat--tertiary">
<div class="Chat-header">
<div class="Avatar">
<div>
<div class="Avatar-text capitalize">
<strong>1 Message Selected</strong>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon Icon--lg" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
</button>
</div>
<div class="Chat-subheader">
<button class="Btn Btn--primary">Copy</button>
<button class="Btn Btn--primary">Forward</button>
<button class="Btn Btn--primary">Remove</button>
</div>
<div class="Chat-content is-scrollable-y">
<div class="Chat-date Divider Divider--text">
Tuesday, January 15, 2021
</div>
<div class="Checkbox Checkbox--right Checkbox--avatar">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">
<span class="Checkbox-button"></span>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Chat-time Avatar-text"><small>1:23 AM</small></div>
<div class="Chat-inner Avatar-text">
<div class="Chat-message">
doloremque laudantium
</div>
</div>
</div>
</div>
</label>
</div>
<div class="Checkbox Checkbox--right Checkbox--avatar">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">
<span class="Checkbox-button"></span>
<div class="Chat-sender Avatar">
<div>
<div class="Chat-time Avatar-text"><small>1:23 AM</small></div>
<div class="Chat-inner Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
</label>
</div>
<div class="Chat-date Divider Divider--text">
Today
</div>
<div class="Checkbox Checkbox--right Checkbox--avatar">
<input type="checkbox" id="checkbox3">
<label for="checkbox3">
<span class="Checkbox-button"></span>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Chat-time Avatar-text"><small>1:23 AM</small></div>
<div class="Chat-inner Avatar-text">
<div class="Chat-message">
Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.
</div>
</div>
</div>
</div>
</label>
</div>
<div class="Checkbox Checkbox--right Checkbox--avatar">
<input type="checkbox" id="checkbox4">
<label for="checkbox4">
<span class="Checkbox-button"></span>
<div class="Chat-sender Avatar">
<div>
<div class="Chat-time Avatar-text"><small>1:23 AM</small></div>
<div class="Chat-inner Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
</label>
</div>
</div>
<div class="Chat-footer">
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
<div class="Chat-sidebar">
<div class="Avatar Avatar--vertical Avatar--centered Avatar--lg">
<span class="Avatar-initials">SC</span>
<div>
<div class="Avatar-text"><strong>Stephen Curry</strong></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<h3>Chat with labels</h3>
<div class="Chat Chat--headerPacked">
<div class="Chat-header">
<div class="Avatar">
<div>
<div class="Avatar-text capitalize">
Stephen Curry
</div>
<div class="Avatar-text">
<small class="fineprint">
<svg title="close icon" role="img" class="Icon Icon--circle Icon--filled Icon--light"></svg>
<span>Offline</span>
</small>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon Icon--lg" title="Information icon" role="img">
<use xlink:href="#info"></use>
</svg>
</button>
</div>
<div class="Chat-content is-scrollable-y">
<p> </p>
<p> </p>
<p> </p>
<div class="Divider Divider--textOnly">
Stephen Curry created this group.
</div>
<div class="Divider Divider--textOnly">
Stephen Curry added Kobe Bryant to this conversation.
</div>
<div class="Divider Divider--textOnly">
<strong>Missed call from Kevin Durant</strong>
</div>
<div class="Divider Divider--text">
<strong>Unread messages</strong>
</div>
</div>
<div class="Chat-footer">
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row section">
<div class="col-sm-4">
<h3>Chat with sidebar</h3>
<div class="Chat Chat--headerPacked Chat--sidebarDisplayed">
<div class="Chat-header">
<div class="Avatar">
<div>
<div class="Avatar-text capitalize">
Stephen Curry
</div>
<div class="Avatar-text">
<small class="fineprint">
<svg title="close icon" role="img" class="Icon Icon--circle Icon--filled Icon--light"></svg>
<span>Offline</span>
</small>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon Icon--lg" title="Information icon" role="img">
<use xlink:href="#info"></use>
</svg>
</button>
</div>
<div class="Chat-content is-scrollable-y">
<div class="Chat-date Divider Divider--text">
Tuesday, January 15, 2021
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
doloremque laudantium
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
<div class="Chat-date Divider Divider--text">
Today
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
</div>
<div class="Chat-footer">
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
<div class="Chat-sidebar">
<button class="Chat-sidebarClose IconBtn">
<svg class="Icon" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
</button>
<div class="Chat-sidebarHead">
<div class="Avatar Avatar--vertical Avatar--centered Avatar--fixed-lg Avatar--groupDiagonal is-ellipsed">
<div class="Avatar-group">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<span class="Avatar-initials" style="background-image: url(https://avatars.githubusercontent.com/u/128577?v=4?s=200)"></span>
</div>
<div class="Avatar-text is-ellipsed">
<strong>Stephen Curry, Lebron James, Kobe Bryant</strong>
</div>
<div class="Avatar-text">
<small>Group Chat</small>
</div>
</div>
</div>
<div class="Chat-sidebarBody is-scrollable-y">
<div class="Accordion Accordion--light">
<div class="Accordion-top" data-accordion-header="">
Members
<div>
<svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
<use xlink:href="#arrowRightSolid"></use>
</svg>
<svg class="Icon spin is-hidden" title="arrow up icon" role="img" data-accordion-minus="">
<use xlink:href="#arrowUpSolid"></use>
</svg>
</div>
</div>
<div class="Accordion-bottom is-slide-closed" data-accordion-body="">
<div class="Accordion-content">
<ul class="List List-group List--ghost">
<li class="List-item List-item-is-clickable">
<div class="List-holder is-ellipsed">
<div class="List-content Avatar Avatar--sm Avatar--centered is-ellipsed">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<div>
<span class="Avatar-text is-ellipsed">
Stephen Cury
</span>
</div>
</div>
</div>
<div class="List-holder">
<button class="List-menu" type="button">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
</div>
</li>
<li class="List-item List-item-is-clickable">
<div class="List-holder is-ellipsed">
<div class="List-content Avatar Avatar--sm Avatar--centered is-ellipsed">
<span class="Avatar-initials" style="background-image: url(https://avatars.githubusercontent.com/u/128577?v=4?s=200)"></span>
<div>
<span class="Avatar-text is-ellipsed">
Lebron James
</span>
</div>
</div>
</div>
<div class="List-holder">
<button class="List-menu" type="button">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
</div>
</li>
<li class="List-item List-item-is-clickable">
<div class="List-holder is-ellipsed">
<div class="List-content Avatar Avatar--sm Avatar--centered is-ellipsed">
<span class="Interactive Interactive--sm Interactive--blankUser" title="Blank User icon"></span>
<div>
<span class="Avatar-text is-ellipsed">
Kobe Bryant
</span>
</div>
</div>
</div>
<div class="List-holder">
<button class="List-menu" type="button">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
</div>
</li>
<li class="List-item List-item-is-clickable">
<div class="List-holder is-ellipsed">
<div class="List-content Avatar Avatar--sm Avatar--centered is-ellipsed">
<span class="Avatar-initials">KD</span>
<div>
<span class="Avatar-text is-ellipsed">
Kevin Durant
</span>
</div>
</div>
</div>
<div class="List-holder">
<button class="List-menu" type="button">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
</div>
</li>
<li class="List-item List-item-is-clickable">
<div class="List-holder is-ellipsed">
<div class="List-content Avatar Avatar--sm Avatar--centered is-ellipsed">
<span class="Avatar-initials">LB</span>
<div>
<span class="Avatar-text is-ellipsed">
Larry Bird
</span>
</div>
</div>
</div>
<div class="List-holder">
<button class="List-menu" type="button">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="Accordion Accordion--light">
<div class="Accordion-top" data-accordion-header="">
Customize Chat
<div>
<svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
<use xlink:href="#arrowRightSolid"></use>
</svg>
<svg class="Icon spin is-hidden" title="arrow up icon" role="img" data-accordion-minus="">
<use xlink:href="#arrowUpSolid"></use>
</svg>
</div>
</div>
<div class="Accordion-bottom is-slide-closed" data-accordion-body="">
<div class="Accordion-content">
<ul class="List List-group List--ghost">
<li class="List-item List-item-is-clickable">
<div class="List-holder">
<div class="List-content Avatar Avatar--centered Avatar--ellipsed">
<span>
<svg class="Icon" title="search icon" role="img">
<use xlink:href="#search"></use>
</svg>
</span>
<span class="List-content">
<span class="Avatar-text is-ellipsed">
Search in conversation
</span>
</span>
</div>
</div>
</li>
<li class="List-item List-item-is-clickable">
<div class="List-holder">
<div class="List-content Avatar Avatar--centered Avatar--ellipsed">
<span>
<svg class="Icon" title="pen outlined icon" role="img">
<use xlink:href="#penOutlined"></use>
</svg>
</span>
<span class="List-content">
<span class="Avatar-text is-ellipsed">
Change chat name
</span>
</span>
</div>
</div>
</li>
<li class="List-item List-item-is-clickable">
<div class="List-holder">
<div class="List-content Avatar Avatar--centered Avatar--ellipsed">
<span>
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
</span>
<span class="List-content">
<span class="Avatar-text is-ellipsed">
Change photo
</span>
</span>
</div>
</div>
</li>
<li class="List-item List-item-is-clickable">
<div class="List-holder">
<div class="List-content Avatar Avatar--centered Avatar--ellipsed">
<span>
<svg class="Icon" title="favorites icon" role="img">
<use xlink:href="#favorites"></use>
</svg>
</span>
<span class="List-content">
<span class="Avatar-text is-ellipsed">
Change theme
</span>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="Accordion Accordion--light">
<div class="Accordion-top" data-accordion-header="">
Settings and Privacy
<div>
<svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
<use xlink:href="#arrowRightSolid"></use>
</svg>
<svg class="Icon spin is-hidden" title="arrow up icon" role="img" data-accordion-minus="">
<use xlink:href="#arrowUpSolid"></use>
</svg>
</div>
</div>
<div class="Accordion-bottom is-slide-closed" data-accordion-body="">
<div class="Accordion-content">
<ul class="List List-group List--ghost">
<li class="List-item List-item-is-clickable">
<div class="List-holder">
<div class="List-content Avatar Avatar--centered Avatar--ellipsed">
<span>
<svg class="Icon" title="notification icon" role="img">
<use xlink:href="#notification"></use>
</svg>
</span>
<span class="List-content">
<span class="Avatar-text is-ellipsed">
Mute notifications
</span>
</span>
</div>
</div>
</li>
<li class="List-item List-item-is-clickable">
<div class="List-holder">
<div class="List-content Avatar Avatar--centered Avatar--ellipsed">
<span>
<svg class="Icon" title="request a copy icon" role="img">
<use xlink:href="#requestACopy"></use>
</svg>
</span>
<span class="List-content">
<span class="Avatar-text is-ellipsed">
Ignore messages
</span>
</span>
</div>
</div>
</li>
<li class="List-item List-item-is-clickable">
<div class="List-holder">
<div class="List-content Avatar Avatar--centered Avatar--ellipsed">
<span>
<svg class="Icon" title="stop icon" role="img">
<use xlink:href="#stop"></use>
</svg>
</span>
<span class="List-content">
<span class="Avatar-text is-ellipsed">
Block messages
</span>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="Accordion Accordion--light">
<div class="Accordion-top" data-accordion-header="">
Shared Files
<div>
<svg class="Icon spin" title="arrow right icon" role="img" data-accordion-plus="">
<use xlink:href="#arrowRightSolid"></use>
</svg>
<svg class="Icon spin is-hidden" title="arrow up icon" role="img" data-accordion-minus="">
<use xlink:href="#arrowUpSolid"></use>
</svg>
</div>
</div>
<div class="Accordion-bottom is-slide-closed" data-accordion-body="">
<div class="Accordion-content">
<p>Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt? Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<h3>Chat Favorites</h3>
<div class="Chat Chat--secondary">
<div class="Chat-header">
<h3 class="Chat-title">Favorites</h3>
<button class="IconBtn">
<svg class="Icon" title="plus icon" role="img">
<use xlink:href="#plus"></use>
</svg>
</button>
</div>
<div class="Chat-bookmarks">
<button class="IconBtn IconBtn--unspaced" tabindex="-1">
<svg class="Icon Icon--lg is-margin-right-xs" role="img">
<use href="#arrowLeftOutlined" xlink:href="#arrowLeftOutlined"></use>
</svg>
</button>
<div class="Chat-bookmarksList">
<div class="Chat-bookmarksWrapper">
<button class="IconBtn IconBtn--unspaced Chat-bookmarksRemove is-absolute" tabindex="-1">
<svg class="Icon Icon--xs Icon--error is-margin-right-xs Chat-bookmarkClose" role="img">
<use href="#closeCircleFilled" xlink:href="#closeCircleFilled"></use>
</svg>
</button>
<button class="IconBtn IconBtn Chat-bookmarkIcon">
<div class="is-relative">
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--vertical Avatar--centered AvatarSingle">
<span class="Avatar-initials" style="background-image: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg)"></span>
<div class=""></div>
</div>
</div>
<small></small>
</div>
</button>
</div>
<div class="Chat-bookmarksWrapper is-selected">
<button class="IconBtn IconBtn--unspaced Chat-bookmarksRemove is-absolute" tabindex="-1">
<svg class="Icon Icon--xs Icon--error is-margin-right-xs Chat-bookmarkClose" role="img">
<use href="#closeCircleFilled" xlink:href="#closeCircleFilled"></use>
</svg>
</button>
<button class="IconBtn IconBtn Chat-bookmarkIcon">
<div class="is-relative">
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--centered Avatar--vertical Avatar--primary"><span
class="Avatar-initials">SU</span></div>
</div>
<small>
<svg class="Icon Icon--success Icon--circle Icon--filled is-zindex-ui-plus Avatar-icon"
role="img"></svg>
</small>
</div>
</button>
</div>
<div class="Chat-bookmarksWrapper">
<button class="IconBtn IconBtn--unspaced Chat-bookmarksRemove is-absolute" tabindex="-1">
<svg class="Icon Icon--xs Icon--error is-margin-right-xs Chat-bookmarkClose" role="img">
<use href="#closeCircleFilled" xlink:href="#closeCircleFilled"></use>
</svg>
</button>
<button class="IconBtn IconBtn Chat-bookmarkIcon">
<div class="is-relative">
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--vertical Avatar--centered AvatarSingle">
<span class="Avatar-initials" style="background-image: url(https://avatars.githubusercontent.com/u/128577?v=4?s=200)"></span>
<div class=""></div>
</div>
</div>
<small>
<svg class="Icon Icon--success Icon--circle Icon--filled is-zindex-ui-plus Avatar-icon"
role="img"></svg>
</small>
</div>
</button>
</div>
<div class="Chat-bookmarksWrapper">
<button class="IconBtn IconBtn--unspaced Chat-bookmarksRemove is-absolute" tabindex="-1">
<svg class="Icon Icon--xs Icon--error is-margin-right-xs Chat-bookmarkClose" role="img">
<use href="#closeCircleFilled" xlink:href="#closeCircleFilled"></use>
</svg>
</button>
<button class="IconBtn IconBtn Chat-bookmarkIcon">
<div class="is-relative">
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--centered Avatar--vertical Avatar--warning"><span
class="Avatar-initials">ME</span></div>
</div>
<small>
<svg class="Icon Icon--success Icon--circle Icon--filled is-zindex-ui-plus Avatar-icon"
role="img"></svg>
</small>
</div>
</button>
</div>
<div class="Chat-bookmarksWrapper">
<button class="IconBtn IconBtn--unspaced Chat-bookmarksRemove is-absolute" tabindex="-1">
<svg class="Icon Icon--xs Icon--error is-margin-right-xs Chat-bookmarkClose" role="img">
<use href="#closeCircleFilled" xlink:href="#closeCircleFilled"></use>
</svg>
</button>
<button class="IconBtn IconBtn Chat-bookmarkIcon">
<div class="is-relative">
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--centered Avatar--vertical Avatar--error"><span
class="Avatar-initials">IE</span></div>
</div>
<small>
<svg class="Icon Icon--success Icon--circle Icon--filled is-zindex-ui-plus Avatar-icon"
role="img"></svg>
</small>
</div>
</button>
</div>
<div class="Chat-bookmarksWrapper">
<button class="IconBtn IconBtn--unspaced Chat-bookmarksRemove is-absolute" tabindex="-1">
<svg class="Icon Icon--xs Icon--error is-margin-right-xs Chat-bookmarkClose" role="img">
<use href="#closeCircleFilled" xlink:href="#closeCircleFilled"></use>
</svg>
</button>
<button class="IconBtn IconBtn Chat-bookmarkIcon">
<div class="is-relative">
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--centered Avatar--vertical Avatar--info"><span
class="Avatar-initials">AI</span></div>
</div>
<small>
<svg class="Icon Icon--success Icon--circle Icon--filled is-zindex-ui-plus Avatar-icon"
role="img"></svg>
</small>
</div>
</button>
</div>
<div class="Chat-bookmarksWrapper">
<button class="IconBtn IconBtn--unspaced Chat-bookmarksRemove is-absolute" tabindex="-1">
<svg class="Icon Icon--xs Icon--error is-margin-right-xs Chat-bookmarkClose" role="img">
<use href="#closeCircleFilled" xlink:href="#closeCircleFilled"></use>
</svg>
</button>
<button class="IconBtn IconBtn Chat-bookmarkIcon">
<div class="is-relative">
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--centered Avatar--vertical Avatar--warning"><span
class="Avatar-initials">SP</span></div>
</div>
<small>
<svg class="Icon Icon--success Icon--circle Icon--filled is-zindex-ui-plus Avatar-icon"
role="img"></svg>
</small>
</div>
</button>
</div>
<div class="Chat-bookmarksWrapper">
<button class="IconBtn IconBtn--unspaced Chat-bookmarksRemove is-absolute" tabindex="-1">
<svg class="Icon Icon--xs Icon--error is-margin-right-xs Chat-bookmarkClose" role="img">
<use href="#closeCircleFilled" xlink:href="#closeCircleFilled"></use>
</svg>
</button>
<button class="IconBtn IconBtn Chat-bookmarkIcon">
<div class="is-relative">
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--centered Avatar--vertical Avatar--success"><span
class="Avatar-initials">US</span></div>
</div>
<small>
<svg class="Icon Icon--success Icon--circle Icon--filled is-zindex-ui-plus Avatar-icon"
role="img"></svg>
</small>
</div>
</button>
</div>
</div>
<button class="IconBtn IconBtn--unspaced" tabindex="-1">
<svg class="Icon Icon--lg is-margin-right-xs" role="img">
<use href="#arrowRightOutlined" xlink:href="#arrowRightOutlined"></use>
</svg>
</button>
</div>
<div class="Chat-bookmarkInfo">
<div class="is-full-width content middle-sm">
<div class="is-relative">
<div class="AvatarGroup AvatarGroup--diagonal">
<div class="Avatar Avatar--centered Avatar--vertical Avatar--quaternary"><span
class="Avatar-initials">SC</span></div>
</div>
</div>
<div class="content middle-sm">
<div class="is-grow">
<div class="Avatar-text is-ellipsed is-margin-bottom-none">Stephen Curry</div>
<small class="Avatar-text mono-5-text is-ellipsed is-margin-bottom-none">
<svg class="Icon Icon--success Icon--circle Icon--filled is-zindex-ui-plus" role="img"></svg>
<span class="is-margin-left-xxs">Active</span>
</small>
</div>
</div>
</div>
</div>
<div class="Chat-content is-scrollable-y">
<div class="Chat-date Divider Divider--text">
Tuesday, January 15, 2021
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
doloremque laudantium
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
<div class="Chat-date Divider Divider--text">
Today
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
</div>
<div class="Chat-footer">
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row section">
<div class="col-sm-2">
<h3>Small Size Chat</h3>
<div class="Chat Chat--sm">
<div class="Chat-header">
<div class="Avatar">
<div>
<div class="Avatar-text capitalize">
Stephen Curry
</div>
<div class="Avatar-text">
<small class="fineprint">
<svg title="close icon" role="img" class="Icon Icon--circle Icon--filled Icon--light"></svg>
<span>Offline</span>
</small>
</div>
</div>
</div>
<div>
<button class="IconBtn is-margin-right-xs">
<svg class="Icon Icon--lg" title="Minimize icon" role="img">
<use xlink:href="#minus"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon Icon--lg" title="Close icon" role="img">
<use xlink:href="#close"></use>
</svg>
</button>
</div>
</div>
<div class="Chat-content is-scrollable-y">
<div class="Chat-date Divider Divider--text">
Tuesday, January 15, 2021
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
doloremque laudantium
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
<div class="Chat-date Divider Divider--text">
Today
</div>
<div class="Chat-receiver Avatar">
<span class="Avatar-initials">JD</span>
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.
</div>
</div>
</div>
</div>
<div class="Chat-sender Avatar">
<div>
<div class="Avatar-text Chat-time"><small>1:23 AM</small></div>
<div class="Avatar-text">
<div class="Chat-message">
efficitur ut dictum id
</div>
</div>
</div>
</div>
</div>
<div class="Chat-footer">
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<h3>Reaction</h3>
<div>
<div class="is-padding-y-xxxxl">
<div class="is-margin-bottom-xxs">
<div class="hoverable">
<div class="Chat-container Chat-receiver content top-md">
<div class="Chat-avatar is-margin-right-xs">
<div class="Avatar Avatar--centered Avatar--sm Avatar--error">
<span class="Avatar-initials">IE</span>
<div class=""></div>
</div>
</div>
<div class="Chat-wrapper is-margin-left-md">
<div class="content middle-md end-md is-flex-row-reverse">
<div class="Chat-messageSettings">
<div class="is-fixed is-top-left is-full-width is-full-height is-featured" style="display: none;"></div>
<div class="content middle-md is-relative is-featured is-flex-row-reverse">
<div data-tooltip="" data-tooltip-position="top" title="React" aria-label="React to message" data-tooltip-text="React" data-tooltip-id="tooltip-xe3rbtf6deg">
<div class="Bubble Bubble--shadow Bubble-BottomCPointer Chat-reactOptions is-padding-x-none is-padding-y-xs is-border-radius-xxs" show="">
<div>
<div class="BtnGroup BtnGroup--gap-xxs BtnGroup--expanded">
<button class="IconBtn is-padding-right-none" disabled="">
<svg class="Icon Icon--sm Icon--ghost" role="img">
<use href="#arrowLeftOutlined" xlink:href="#arrowLeftOutlined"></use>
</svg>
</button>
<div class="Chat-reactIcons">
<button class="IconBtn is-padding-xxxs Chat-reactOptions-is-active">
<svg class="Icon Icon--lg Icon--ghost" role="img">
<use href="#ratingThumbsUp" xlink:href="#ratingThumbsUp"></use>
</svg>
</button>
<button class="IconBtn is-padding-xxxs Chat-reactOptions-is-active">
<svg class="Icon Icon--lg Icon--ghost" role="img">
<use href="#ratingHeart" xlink:href="#ratingHeart"></use>
</svg>
</button>
<button class="IconBtn is-padding-xxxs Chat-reactOptions-is-active">
<svg class="Icon Icon--lg Icon--ghost" role="img">
<use href="#ratingSmiley" xlink:href="#ratingSmiley"></use>
</svg>
</button>
<button class="IconBtn is-padding-xxxs Chat-reactOptions-is-active">
<svg class="Icon Icon--lg Icon--ghost" role="img">
<use href="#ratingStar" xlink:href="#ratingStar"></use>
</svg>
</button>
<button class="IconBtn is-padding-xxxs">
<svg class="Icon Icon--lg Icon--ghost" role="img">
<use href="#ratingEmoticon1" xlink:href="#ratingEmoticon1"></use>
</svg>
</button>
<button class="IconBtn is-padding-xxxs">
<svg class="Icon Icon--lg Icon--ghost" role="img">
<use href="#ratingEmoticon3" xlink:href="#ratingEmoticon3"></use>
</svg>
</button>
</div>
<button class="IconBtn is-padding-left-none">
<svg class="Icon Icon--sm Icon--ghost" role="img">
<use href="#arrowRightOutlined" xlink:href="#arrowRightOutlined"></use>
</svg>
</button>
</div>
</div>
</div>
<button class="IconBtn is-padding-none is-margin-x-xs" type="button">
<svg class="Icon Icon--sm" role="img" id="react-bubble-2979">
<use href="#smiley" xlink:href="#smiley"></use>
</svg>
</button>
</div>
<button data-tooltip="" data-tooltip-position="top" title="Reply" class="IconBtn is-padding-x-none" aria-label="Reply to message" data-tooltip-text="Reply" data-tooltip-id="tooltip-64b6ggd10n8">
<svg class="Icon Icon--sm" role="img">
<use href="#backward" xlink:href="#backward"></use>
</svg>
</button>
<div>
<div class="Drop is-margin-x-xs" id="ChatMessageSettings-1859" data-drop-id="ChatMessageSettings-1859" data-drop-direction="down" data-drop-advanced="false">
<button data-tooltip="" data-tooltip-position="top" title="More" class="IconBtn IconBtn--unspaced Drop-toggle" aria-label="Open message options" tabindex="-1">
<svg class="Icon Icon--sm" role="img">
<use href="#meatball" xlink:href="#meatball"></use>
</svg>
</button>
<div class="Drop-menu" data-slider-keep="" data-popover-keep="">
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.copy.arialabel">
Copy
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Forward message">
Forward
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Select message">
Select
</a>
</div>
</div>
</div>
</div>
</div>
<div class="Chat-inner">
<div class="Chat-message text-left">
<div>
<div>
<div class="TextEditor-content">
Hello
</div>
</div>
</div>
<div class="Chat-reaction">
<div id="popover-ax3aucu4cqf" class="Popover" faded="" data-popover="popover-ax3aucu4cqf">
<div class="Popover-body"></div>
</div>
<button class="IconBtn IconBtn--unspaced IconBtn--plain is-margin-right-xxxs is-padding-x-xxxs">
<svg class="Icon Icon--xxs Icon--light" role="img">
<use href="#ratingHeart" xlink:href="#ratingHeart"></use>
</svg>
</button>
<button class="IconBtn IconBtn--unspaced IconBtn--plain is-margin-right-xxxs is-padding-x-xxxs">
<svg class="Icon Icon--xxs Icon--light" role="img">
<use href="#ratingThumbsUp" xlink:href="#ratingThumbsUp"></use>
</svg>
<small class="is-margin-left-xxxs">2</small>
</button>
<button class="IconBtn IconBtn--unspaced IconBtn--plain is-margin-right-xxxs is-padding-x-xxxs">
<svg class="Icon Icon--xxs Icon--light" role="img">
<use href="#ratingSmiley" xlink:href="#ratingSmiley"></use>
</svg>
</button>
<button class="IconBtn IconBtn--unspaced IconBtn--plain is-margin-right-xxxs is-padding-x-xxxs">
<svg class="Icon Icon--xxs Icon--light" role="img">
<use href="#ratingStar" xlink:href="#ratingStar"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<h3>Message Read</h3>
<div>
<div>
<div class="is-margin-bottom-xxs">
<div class="hoverable text-right end-md">
<div class="Chat-container Chat-sender content top-md">
<div class="Chat-wrapper is-margin-left-md">
<div class="content middle-md end-md">
<div class="Chat-messageSettings">
<div class="is-fixed is-top-left is-full-width is-full-height is-featured" style="display: none;"></div>
<div class="content middle-md is-relative is-featured">
<div data-tooltip="" data-tooltip-position="top" title="" aria-label="React to message" data-tooltip-id="tooltip-pznlxjd6dz9" data-tooltip-text="React">
<button class="IconBtn is-padding-none is-margin-x-xs" type="button">
<svg class="Icon Icon--sm" role="img" id="react-bubble-3067">
<use href="#smiley" xlink:href="#smiley"></use>
</svg>
</button>
</div>
<button data-tooltip="" data-tooltip-position="top" title="Reply" class="IconBtn is-padding-x-none" aria-label="Reply to message">
<svg class="Icon Icon--sm" role="img">
<use href="#backward" xlink:href="#backward"></use>
</svg>
</button>
<div>
<div class="Drop is-margin-x-xs" id="ChatMessageSettings-2430" data-drop-id="ChatMessageSettings-2430" data-drop-direction="down" data-drop-advanced="false">
<button data-tooltip="" data-tooltip-position="top" title="More" class="IconBtn IconBtn--unspaced Drop-toggle" aria-label="Open message options" tabindex="-1">
<svg class="Icon Icon--sm" role="img">
<use href="#meatball" xlink:href="#meatball"></use>
</svg>
</button>
<div class="Drop-menu" data-slider-keep="" data-popover-keep="">
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Edit message">
Edit
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.copy.arialabel">
Copy
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Forward message">
Forward
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Select message">
Select
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.remove.yourself.arialabel">
Remove for Yourself
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.remove.everyone.arialabel">
Remove for Everyone
</a>
</div>
</div>
</div>
</div>
</div>
<div class="Chat-inner">
<div class="Chat-message text-left">
<div>
<div>
<div data-v-2c669a32="" class="TextEditor-content">
Read
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="Chat-reader">
<div class="AvatarGroup AvatarGroup--diagonal is-margin-bottom-xs">
<div class="Avatar Avatar--xs Avatar--centered Avatar--vertical Avatar--error"><span class="Avatar-initials">IE</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Message Sent</h3>
<div>
<div>
<div class="is-margin-bottom-xxs">
<div class="hoverable text-right end-md">
<div class="Chat-container Chat-sender content top-md">
<div class="Chat-wrapper is-margin-left-md">
<div class="content middle-md end-md">
<div class="Chat-messageSettings">
<div class="is-fixed is-top-left is-full-width is-full-height is-featured" style="display: none;"></div>
<div class="content middle-md is-relative is-featured">
<div data-tooltip="" data-tooltip-position="top" title="" aria-label="React to message" data-tooltip-id="tooltip-pznlxjd6dz9" data-tooltip-text="React">
<button class="IconBtn is-padding-none is-margin-x-xs" type="button">
<svg class="Icon Icon--sm" role="img" id="react-bubble-3067">
<use href="#smiley" xlink:href="#smiley"></use>
</svg>
</button>
</div>
<button data-tooltip="" data-tooltip-position="top" title="Reply" class="IconBtn is-padding-x-none" aria-label="Reply to message">
<svg class="Icon Icon--sm" role="img">
<use href="#backward" xlink:href="#backward"></use>
</svg>
</button>
<div>
<div class="Drop is-margin-x-xs" id="ChatMessageSettings-2430" data-drop-id="ChatMessageSettings-2430" data-drop-direction="down" data-drop-advanced="false">
<button data-tooltip="" data-tooltip-position="top" title="More" class="IconBtn IconBtn--unspaced Drop-toggle" aria-label="Open message options" tabindex="-1">
<svg class="Icon Icon--sm" role="img">
<use href="#meatball" xlink:href="#meatball"></use>
</svg>
</button>
<div class="Drop-menu" data-slider-keep="" data-popover-keep="">
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Edit message">
Edit
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.copy.arialabel">
Copy
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Forward message">
Forward
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Select message">
Select
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.remove.yourself.arialabel">
Remove for Yourself
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.remove.everyone.arialabel">
Remove for Everyone
</a>
</div>
</div>
</div>
</div>
</div>
<div class="Chat-inner">
<div class="Chat-message text-left">
<div>
<div>
<div data-v-2c669a32="" class="TextEditor-content">
Sent
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="Chat-messageStatus">
<svg class="Icon Icon--circle Icon--filled" role="img">
<use href="#check" xlink:href="#check"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Message Sending</h3>
<div>
<div>
<div class="is-margin-bottom-xxs">
<div class="hoverable text-right end-md">
<div class="Chat-container Chat-sender content top-md">
<div class="Chat-wrapper is-margin-left-md">
<div class="content middle-md end-md">
<div class="Chat-messageSettings">
<div class="is-fixed is-top-left is-full-width is-full-height is-featured" style="display: none;"></div>
<div class="content middle-md is-relative is-featured">
<div data-tooltip="" data-tooltip-position="top" title="" aria-label="React to message" data-tooltip-id="tooltip-pznlxjd6dz9" data-tooltip-text="React">
<button class="IconBtn is-padding-none is-margin-x-xs" type="button">
<svg class="Icon Icon--sm" role="img" id="react-bubble-3067">
<use href="#smiley" xlink:href="#smiley"></use>
</svg>
</button>
</div>
<button data-tooltip="" data-tooltip-position="top" title="Reply" class="IconBtn is-padding-x-none" aria-label="Reply to message">
<svg class="Icon Icon--sm" role="img">
<use href="#backward" xlink:href="#backward"></use>
</svg>
</button>
<div>
<div class="Drop is-margin-x-xs" id="ChatMessageSettings-2430" data-drop-id="ChatMessageSettings-2430" data-drop-direction="down" data-drop-advanced="false">
<button data-tooltip="" data-tooltip-position="top" title="More" class="IconBtn IconBtn--unspaced Drop-toggle" aria-label="Open message options" tabindex="-1">
<svg class="Icon Icon--sm" role="img">
<use href="#meatball" xlink:href="#meatball"></use>
</svg>
</button>
<div class="Drop-menu" data-slider-keep="" data-popover-keep="">
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Edit message">
Edit
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.copy.arialabel">
Copy
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Forward message">
Forward
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Select message">
Select
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.remove.yourself.arialabel">
Remove for Yourself
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.remove.everyone.arialabel">
Remove for Everyone
</a>
</div>
</div>
</div>
</div>
</div>
<div class="Chat-inner">
<div class="Chat-message text-left">
<div>
<div>
<div data-v-2c669a32="" class="TextEditor-content">
Sending
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="Chat-messageStatus">
<svg class="Icon Icon--circle" role="img">
<use href="#" xlink:href="#"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Message Failed</h3>
<div>
<div>
<div class="is-margin-bottom-xxs">
<div class="hoverable text-right end-md">
<div class="Chat-container Chat-sender content top-md">
<div class="Chat-wrapper is-margin-left-md">
<div class="content middle-md end-md">
<div class="Chat-messageSettings">
<div class="is-fixed is-top-left is-full-width is-full-height is-featured" style="display: none;"></div>
<div class="content middle-md is-relative is-featured">
<div data-tooltip="" data-tooltip-position="top" title="" aria-label="React to message" data-tooltip-id="tooltip-pznlxjd6dz9" data-tooltip-text="React">
<button class="IconBtn is-padding-none is-margin-x-xs" type="button">
<svg class="Icon Icon--sm" role="img" id="react-bubble-3067">
<use href="#smiley" xlink:href="#smiley"></use>
</svg>
</button>
</div>
<button data-tooltip="" data-tooltip-position="top" title="Reply" class="IconBtn is-padding-x-none" aria-label="Reply to message">
<svg class="Icon Icon--sm" role="img">
<use href="#backward" xlink:href="#backward"></use>
</svg>
</button>
<div>
<div class="Drop is-margin-x-xs" id="ChatMessageSettings-2430" data-drop-id="ChatMessageSettings-2430" data-drop-direction="down" data-drop-advanced="false">
<button data-tooltip="" data-tooltip-position="top" title="More" class="IconBtn IconBtn--unspaced Drop-toggle" aria-label="Open message options" tabindex="-1">
<svg class="Icon Icon--sm" role="img">
<use href="#meatball" xlink:href="#meatball"></use>
</svg>
</button>
<div class="Drop-menu" data-slider-keep="" data-popover-keep="">
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Edit message">
Edit
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.copy.arialabel">
Copy
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Forward message">
Forward
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="Select message">
Select
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.remove.yourself.arialabel">
Remove for Yourself
</a>
<a class="Drop-item" data-slider-keep="" data-popover-keep="" aria-label="chat.messages.remove.everyone.arialabel">
Remove for Everyone
</a>
</div>
</div>
</div>
</div>
</div>
<div class="Chat-inner">
<div class="Chat-message text-left">
<div>
<div>
<div data-v-2c669a32="" class="TextEditor-content">
Failed
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="Chat-messageStatus">
<a class="TypeBtn TypeBtn--unspaced">
<span class="fs primary-font fw-normal">
Resend
<svg class="Icon Icon--error is-180deg-rotated" role="img">
<use href="#info" xlink:href="#info"></use>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row section is-padding-top-lg">
<div class="col-sm-3">
<h3>Reply to a message</h3>
<div>
<div class="ChatMain Chat Chat--headerPacked Chat--sidebarDisplayed Chat--primary is-full-height" id="">
<div class="Chat-header">
<div class="is-full-width content middle-sm center-sm">
<div class="is-grow">
<div>
<h3 class="Chat-title">Stephen Curry</h3>
<small class="content middle-md is-margin-top-xxs">
<svg class="Icon Icon--success Icon--circle Icon--filled is-zindex-ui-plus" role="img">
</svg>
<span class="is-margin-left-xxs">Active</span>
</small>
</div>
</div>
<div>
<button class="IconBtn">
<svg class="Icon Icon--xl" role="img">
<use href="#video" xlink:href="#video"></use>
</svg>
</button>
<button class="IconBtn is-margin-left-xs">
<svg class="Icon Icon--lg" role="img">
<use href="#phone" xlink:href="#phone"></use>
</svg>
</button>
<button class="IconBtn is-margin-left-xs">
<svg class="Icon Icon--xl Icon--ghost" role="img">
<use href="#info" xlink:href="#info"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="messageList is-relative">
<div class="DynamicContainer is-scrollable Chat-content is-scrollable-y">
<div id="message-7bs3rtx4qis-3798" class="Message-container">
<div class="Chat-date Divider Divider--text is-padding-bottom-xs">Today</div>
<div modelvalue="" id="checkbox-message-7bs3rtx4qis-3798" right="" value="3798">
<div class="is-margin-bottom-xxs">
<div class="hoverable text-right end-md">
<div class="Chat-container Chat-sender content top-md">
<div class="Chat-wrapper is-relative is-margin-left-md">
<div class="Chat-time is-margin-bottom-xxxs">
<small>
<span>04:22 PM</span>
</small>
</div>
<div class="Chat-messageWrapper content middle-md end-md">
<div class="Chat-inner">
<div class="Chat-message text-left">
<div>
<div>
<div class="TextEditor-content">Hi!</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Chat-footer">
<div class="is-relative is-padding-sm">
<div class="is-padding-bottom-xxs"><span
class="fs-xs primary-font fw-normal">Replying to</span><strong> (Yourself)</strong></div>
<div class="Chat-reply is-padding-right-xxxxl is-ellipsed">
<div>Hi!</div>
</div>
<button class="IconBtn Chat-replyClose is-absolute" type="button">
<svg class="Icon Icon--sm" role="img">
<use href="#close" xlink:href="#close"></use>
</svg>
</button>
</div>
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<h3>Replied to a message</h3>
<div>
<div class="ChatMain Chat Chat--headerPacked Chat--sidebarDisplayed Chat--primary is-full-height" id="">
<div class="Chat-header">
<div class="is-full-width content middle-sm center-sm">
<div class="is-grow">
<div>
<h3 class="Chat-title">LeBron James</h3>
<small class="content middle-md is-margin-top-xxs">
<svg class="Icon Icon--success Icon--circle Icon--filled is-zindex-ui-plus" role="img">
</svg>
<span class="is-margin-left-xxs">Active</span>
</small>
</div>
</div>
<div>
<button class="IconBtn">
<svg class="Icon Icon--xl" role="img">
<use href="#video" xlink:href="#video"></use>
</svg>
</button>
<button class="IconBtn is-margin-left-xs">
<svg class="Icon Icon--lg" role="img">
<use href="#phone" xlink:href="#phone"></use>
</svg>
</button>
<button class="IconBtn is-margin-left-xs">
<svg class="Icon Icon--xl Icon--ghost" role="img">
<use href="#info" xlink:href="#info"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="messageList is-relative">
<div class="DynamicContainer is-scrollable Chat-content is-scrollable-y">
<div id="message-7bs3rtx4qis-4216" class="Message-container">
<div class="Chat-date Divider Divider--text is-padding-bottom-xs">Today</div>
<div modelvalue="" id="checkbox-message-7bs3rtx4qis-4216" right="" value="4216">
<div class="is-margin-bottom-xxs">
<div class="hoverable text-right end-md">
<div class="Chat-container Chat-sender content top-md">
<div class="Chat-wrapper is-relative is-margin-left-md">
<div class="Chat-time is-margin-bottom-xxxs">
<small>
<span>
<svg class="Icon Icon--xs" role="img" title="backward icon">
<use href="#backward" xlink:href="#backward"></use>
</svg>
You
replied to LeBron James 10:13 AM
</span>
</small>
</div>
<div class="Chat-replied content middle-md end-md">
<div class="Chat-repliedBody">
<div data-v-2c669a32="" class="TextEditor-content">
<div>Hello</div>
</div>
</div>
</div>
<div class="Chat-messageWrapper content middle-md end-md">
<div class="Chat-inner">
<div class="Chat-message text-left">
<div>
<div>
<div data-v-2c669a32="" class="TextEditor-content">
<div>Good morning</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="message-7bs3rtx4qis-4217" class="Message-container">
<div modelvalue="" id="checkbox-message-7bs3rtx4qis-4217" right="" value="4217">
<div class="is-margin-bottom-xxs">
<div class="hoverable">
<div class="Chat-container Chat-receiver content top-md">
<div class="Chat-avatar is-margin-right-xs">
<div class="Avatar Avatar--centered Avatar--sm Avatar--error">
<span class="Avatar-initials">LJ</span>
<div class="">
</div>
</div>
</div>
<div class="Chat-wrapper is-relative is-margin-left-md">
<div class="Chat-time is-margin-bottom-xxxs">
<small>
<span>
10:15 AM
<svg class="Icon Icon--xs" role="img" title="backward icon">
<use href="#backward" xlink:href="#backward"></use>
</svg>
LeBron James
replied to You
</span>
</small>
</div>
<div class="Chat-replied content middle-md end-md is-flex-row-reverse">
<div class="Chat-repliedBody">
<div data-v-2c669a32="" class="TextEditor-content">
<div>Good morning</div>
</div>
</div>
</div>
<div class="Chat-messageWrapper content middle-md end-md is-flex-row-reverse">
<div class="Chat-inner">
<div class="Chat-message text-left">
<div>
<div>
<div data-v-2c669a32="" class="TextEditor-content">
<div>Hey good morning! How are you?</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="message-7bs3rtx4qis-4219" class="Message-container">
<div modelvalue="" id="checkbox-message-7bs3rtx4qis-4219" right="" value="4219">
<div class="is-margin-bottom-xxs">
<div class="hoverable text-right end-md">
<div class="Chat-container Chat-sender content top-md">
<div class="Chat-wrapper is-relative is-margin-left-md">
<div class="Chat-time is-margin-bottom-xxxs">
<small>
<span>10:16 AM</span>
</small>
</div>
<div class="Chat-messageWrapper content middle-md end-md">
<div class="Chat-inner">
<div class="Chat-message text-left">
<div>
<div>
<div data-v-2c669a32="" class="TextEditor-content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet pretium aliquet. Cras tortor enim, dictum et varius id, pellentesque a mi.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="message-7bs3rtx4qis-4220" class="Message-container">
<div modelvalue="" id="checkbox-message-7bs3rtx4qis-4220" right="" value="4220">
<div class="is-margin-bottom-xxs">
<div class="hoverable">
<div class="Chat-container Chat-receiver content top-md">
<div class="Chat-avatar is-margin-right-xs">
<div class="Avatar Avatar--centered Avatar--sm Avatar--error">
<span class="Avatar-initials">LJ</span>
<div class="">
</div>
</div>
</div>
<div class="Chat-wrapper is-relative is-margin-left-md">
<div class="Chat-time is-margin-bottom-xxxs">
<small>
<span>
10:16 AM
<svg class="Icon Icon--xs" role="img" title="backward icon">
<use href="#backward" xlink:href="#backward"></use>
</svg>
LeBron James
replied to You
</span>
</small>
</div>
<div class="Chat-replied content middle-md end-md is-flex-row-reverse">
<div class="Chat-repliedBody">
<div data-v-2c669a32="" class="TextEditor-content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet pretium aliquet. Cras tortor enim, dictum et varius id, pellentesque a mi.</div>
</div>
</div>
</div>
<div class="Chat-messageWrapper content middle-md end-md is-flex-row-reverse">
<div class="Chat-inner">
<div class="Chat-message text-left">
<div>
<div>
<div data-v-2c669a32="" class="TextEditor-content">
<div>Okay...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="Chat-reader">
<div data-tooltip="" data-tooltip-position="top" title="10:16 AM" class="AvatarGroup AvatarGroup--diagonal is-margin-bottom-xs" data-tooltip-text="10:16 AM">
<div class="Avatar Avatar--xs Avatar--centered Avatar--vertical Avatar--error"><span class="Avatar-initials">LJ</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Chat-footer">
<div class="Chat-input Input Input-group">
<button class="IconBtn">
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
</button>
<button class="IconBtn">
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
</button>
<div class="Field">
<div class="Field-control">
<div class="Input Input--addon">
<input type="text" placeholder="Type a message">
<div class="Input-addon">
<button class="IconBtn">
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<button class="IconBtn">
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
All colors should be selected from the following color pallette. Under no exception should other colors be used, nor should colors be manipulated, either with opacity or SCSS functions, such as darken().
All color themes should be selected from the following color pallette. Under no exception should other colors be used, nor should colors be manipulated.
<div class="Counter Counter--attention Callout Callout--edged Callout--noPadding">
<div class="Counter-item Counter--attention-item">
<div class="mediaObject mediaObject--middle">
<figure class="mediaObject-figure">
<span class="Graphic Graphic--whiteSheepSent" title="White Sheep Sent icon"></span>
</figure>
<div class="mediaObject-body">
<span class="Counter-title">Reminders</span>
<span class="Counter-count">0</span>
</div>
</div>
</div>
<div class="Counter-item Counter--attention-item">
<div class="mediaObject mediaObject--middle">
<figure class="mediaObject-figure">
<span class="Graphic Graphic--whiteSheepSent" title="White Sheep Sent icon"></span>
</figure>
<div class="mediaObject-body">
<span class="Counter-title">Reminders</span>
<span class="Counter-count">0</span>
</div>
</div>
</div>
<div class="Counter-item Counter--attention-item">
<div class="mediaObject mediaObject--middle">
<figure class="mediaObject-figure">
<span class="Graphic Graphic--whiteSheepSent" title="White Sheep Sent icon"></span>
</figure>
<div class="mediaObject-body">
<span class="Counter-title">Reminders</span>
<span class="Counter-count">0</span>
</div>
</div>
</div>
<div class="Counter-item Counter--attention-item">
<div class="mediaObject mediaObject--middle">
<figure class="mediaObject-figure">
<span class="Graphic Graphic--whiteSheepSent" title="White Sheep Sent icon"></span>
</figure>
<div class="mediaObject-body">
<span class="Counter-title">Reminders</span>
<span class="Counter-count">0</span>
</div>
</div>
</div>
</div>
<div data-collapse-id="Counter" class="Collapsible Collapsible--leftInsetToggle Collapsible--wideToggleY Collapsible--borderless is-horizontally Collapsible--toRight is-shown is-expanded is-faded">
<button class="Collapsible-toggle IconBtn IconBtn--unspaced" data-collapse data-collapse-target="Counter">
<small>
<svg class="Icon Icon--reverse" title="arrow right icon" collapse-plus="">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
<svg class="Icon Icon--reverse is-hidden" title="arrow left icon" collapse-minus="">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
</small>
</button>
<div data-collapse-body="" class="Collapsible-collapse">
<div class="Counter Callout Callout--edged Callout--noPadding">
<div class="Counter-item">
<div class="mediaObject mediaObject--middle">
<figure class="mediaObject-figure">
<span class="Graphic Graphic--whiteSheepSent" title="White Sheep Sent icon"></span>
</figure>
<div class="mediaObject-body">
<span class="Counter-title">Reminders</span>
<span class="Counter-count">0</span>
</div>
</div>
</div>
<div class="Counter-item">
<div class="mediaObject mediaObject--middle">
<figure class="mediaObject-figure">
<span class="Graphic Graphic--whiteSheepSent" title="White Sheep Sent icon"></span>
</figure>
<div class="mediaObject-body">
<span class="Counter-title">Reminders</span>
<span class="Counter-count">0</span>
</div>
</div>
</div>
<div class="Counter-item">
<div class="mediaObject mediaObject--middle">
<figure class="mediaObject-figure">
<span class="Graphic Graphic--whiteSheepSent" title="White Sheep Sent icon"></span>
</figure>
<div class="mediaObject-body">
<span class="Counter-title">Reminders</span>
<span class="Counter-count">0</span>
</div>
</div>
</div>
<div class="Counter-item">
<div class="mediaObject mediaObject--middle">
<figure class="mediaObject-figure">
<span class="Graphic Graphic--whiteSheepSent" title="White Sheep Sent icon"></span>
</figure>
<div class="mediaObject-body">
<span class="Counter-title">Reminders</span>
<span class="Counter-count">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="Dropzone">
<div class="Dropzone-caption">
Drag a form element here
</div>
<div class="Dropzone-body"></div>
</div>
</div>
<div class="section">
<div class="Dropzone Dropzone--lined">
<div class="Dropzone-line"></div>
</div>
</div>
All gradients.
The Graphic is designed to be paired with inline svg illustration elements.
<span class="Graphic Graphic--arrowDownLeft" title="Curve arrow pointing to bottom left"></span>
<span class="Graphic Graphic--arrowDownRight" title="Curve arrow pointing to bottom right"></span>
<span class="Graphic Graphic--arrowDownTopRight" title="Curve arrow pointing from top to bottom right"></span>
<span class="Graphic Graphic--blackAndWhiteSheepEditingCalendar" title="Black and White Sheep Editing Calendar icon"></span>
<span class="Graphic Graphic--blackAndWhiteSheepTakingOffOnRocket" title="Black and White Sheep Taking Off On Rocket icon"></span>
<span class="Graphic Graphic--blackAndWhiteSheepNearWaterCooler" title="Black and White Sheep Near Water Cooler icon"></span>
<span class="Graphic Graphic--blackSheep" title="Black Sheep icon"></span>
<span class="Graphic Graphic--blackSheepCreateCompany" title="Black Sheep icon"></span>
<span class="Graphic Graphic--blackSheepCreateGroup" title="Black Sheep icon"></span>
<span class="Graphic Graphic--blackSheepDisplay" title="Black Sheep Display"></span>
<span class="Graphic Graphic--blackSheepRightHandRaised" title="Black Sheep Right Hand Raised"></span>
<span class="Graphic Graphic--blackSheepRightHandRaisedHalf" title="Black Sheep Right Hand Raised Half"></span>
<span class="Graphic Graphic--blackSheepStanding" title="Black Sheep Standing"></span>
<span class="Graphic Graphic--blackSheepWithChecklist" title="Black Sheep With Checklist"></span>
<span class="Graphic Graphic--blackSheepWithChecklistAndPen" title="Black Sheep With Checklist and Pen"></span>
<span class="Graphic Graphic--blackSheepWithChecklistCentered" title="Black Sheep With Checklist Centered"></span>
<span class="Graphic Graphic--blackSheepWithChecklistCenteredHalf" title="Black Sheep With Checklist Centered Half"></span>
<span class="Graphic Graphic--blackSheepWithGear" title="Black Sheep With Gear"></span>
<span class="Graphic Graphic--blackSheepWithLaptop" title="Black Sheep With Laptop"></span>
<span class="Graphic Graphic--chatBubble" title="Chat Bubble icon"></span>
<span class="Graphic Graphic--chatBubbleNoTail" title="No Tail Chat Bubble icon"></span>
<span class="Graphic Graphic--einsteinSheep" title="Einstein Sheep"></span>
<span class="Graphic Graphic--sheepDressedAsRoosterGoingToMeeting" title="Sheep Dressed As Rooster Going To Meting"></span>
<span class="Graphic Graphic--sheepRockstar" title="Sheep Rockstar icon"></span>
<span class="Graphic Graphic--sheepNewTask" title="Sheep with task list"></span>
<span class="Graphic Graphic--welcomeSheepWithShadow" title="Welcome Sheep With Shadow icon"></span>
<span class="Graphic Graphic--whiteSheep" title="White Sheep icon"></span>
<span class="Graphic Graphic--whiteSheepAndRoosterAdjustingClock" title="White Sheep And Rooster Adjucting Clock icon"></span>
<span class="Graphic Graphic--whiteSheepAppearance" title="White Sheep Appearance"></span>
<span class="Graphic Graphic--whiteSheepOnCouchWithLaptop" title="White Sheep On Coach With Laptop"></span>
<span class="Graphic Graphic--whiteSheepDubpose" title="White Sheep icon"></span>
<span class="Graphic Graphic--whiteSheepEditingCalendar" title="White Sheep Editing Calendar icon"></span>
<span class="Graphic Graphic--whiteSheepEditingFile" title="White Sheep Editing File icon"></span>
<span class="Graphic Graphic--whiteSheepHoldingDocument" title="White Sheep Holding Document icon"></span>
<span class="Graphic Graphic--whiteSheepInBlackSuit" title="White Sheep In Black Suit icon"></span>
<span class="Graphic Graphic--whiteSheepInBusinessSuit" title="White Sheep In Black Business Suit icon"></span>
<span class="Graphic Graphic--whiteSheepInBusinessSuiteDubPose" title="White Sheep Business Suit Dup Pose icon"></span>
<span class="Graphic Graphic--whiteSheepInSuitWithDocument" title="White Sheep In Suit With Document icon"></span>
<span class="Graphic Graphic--whiteSheepOnCouch" title="White Sheep Chat On Couch"></span>
<span class="Graphic Graphic--whiteSheepOnCouchWithPc" title="White Sheep Chat On Couch With PC"></span>
<span class="Graphic Graphic--whiteSheepPointingLeft" title="White Sheep First Chat Walkthrough"></span>
<span class="Graphic Graphic--whiteSheepPointingRight" title="White Sheep Second Chat Walkthrough"></span>
<span class="Graphic Graphic--whiteSheepSayHi" title="White Sheep Say Hi icon"></span>
<span class="Graphic Graphic--whiteSheepSent" title="White Sheep Sent icon"></span>
<span class="Graphic Graphic--whiteSheepShadow" title="White Sheep Shadow icon"></span>
<span class="Graphic Graphic--whiteSheepSitting" title="White Sheep Sitting"></span>
<span class="Graphic Graphic--whiteSheepSickShaded" title="White Sheep Sick Shaded"></span>
<span class="Graphic Graphic--whiteSheepSleeping" title="White Sheep Chat Without Conversation"></span>
<span class="Graphic Graphic--whiteSheepSocialMedia" title="White Sheep Social Media"></span>
<span class="Graphic Graphic--whiteSheepStandingBeforeWhiteboard" title="White Sheep Standing Before Whiteboard icon"></span>
<span class="Graphic Graphic--whiteSheepStandingOnChairAndDesk" title="White Sheep Standing On Chair And Desk icon"></span>
<span class="Graphic Graphic--whiteSheepStar" title="White Sheep Chat Favorites Added"></span>
<span class="Graphic Graphic--whiteSheepStunned" title="White Sheep Stunned icon"></span>
<span class="Graphic Graphic--whiteSheepStunnedShaded" title="White Sheep Stunned Shaded icon"></span>
<span class="Graphic Graphic--whiteSheepStyle" title="White Sheep Style"></span>
<span class="Graphic Graphic--whiteSheepTakesNotes" title="White Sheep Takes Notes"></span>
<span class="Graphic Graphic--whiteSheepThrilled" title="White Sheep Chat First Step Walktrough"></span>
<span class="Graphic Graphic--whiteSheepThumbsUp" title="White Sheep Thumbs Up"></span>
<span class="Graphic Graphic--whiteSheepTwoHandsPointingToLeft" title="White Sheep With Two Hands Pointing to Left"></span>
<span class="Graphic Graphic--whiteSheepTwoHandsPointingToLeftHalf" title="White Sheep With Two Hands Pointing to Left Hald"></span>
<span class="Graphic Graphic--whiteSheepWentToJourney" title="White Sheep Went To Journey icon"></span>
<span class="Graphic Graphic--whiteSheepWhatIsSmartblock" title="White Sheep What is Smartblock"></span>
<span class="Graphic Graphic--whiteSheepWithBox" title="White Sheep Whith Box icon"></span>
<span class="Graphic Graphic--whiteSheepWhatIsSmartblockHorizontal" title="White Sheep What is Smartblock Horizontal"></span>
<span class="Graphic Graphic--whiteSheepWithCalendar" title="White Sheep With Calendar icon"></span>
<span class="Graphic Graphic--whiteSheepWithCar" title="White Sheep With Car icon"></span>
<span class="Graphic Graphic--whiteSheepWithCoinsAndCash" title="White Sheep With Coins And Cash icon"></span>
<span class="Graphic Graphic--whiteSheepWithMagnifyingGlassStandsOnCalendar" title="White Sheep With Magnifying Glass Stands On Calendar icon"></span>
<span class="Graphic Graphic--whiteSheepWithHourglass" title="White Sheep With Hourglass icon"></span>
<span class="Graphic Graphic--whiteSheepWithHourglassAndBriefcase" title="White Sheep With Hourglass And Briefcase icon"></span>
<span class="Graphic Graphic--whiteSheepWithStopwatch" title="White Sheep With Stopwatch icon"></span>
<span class="Graphic Graphic--whiteSheepWithRedAndBlueTShirt" title="White Sheep With Red and Blue T-Shirt icon"></span>
<span class="Graphic Graphic--whiteSheepWithWorkTable" title="White Sheep With WorkTable icon"></span>
<span class="Graphic Graphic--whiteSheepWithSunglass" title="White Sheep With Sun Glass"></span>
<span class="Graphic Graphic--whiteSheepWithSunglassAndShadow" title="White Sheep With Sun Glass and Shadow"></span>
<span class="Graphic Graphic--whiteSheepWithTicket" title="White Sheep With Ticket"></span>
<span class="Graphic Graphic--whiteSheepWithTicketHalf" title="White Sheep With Ticket Half"></span>
<span class="Graphic Graphic--whiteSheepWithTie" title="White Sheep With Tie icon"></span>
<span class="Graphic Graphic--whiteSheepThrilledSecondary" title="White Sheep Thrilled"></span>
<span class="Graphic Graphic--whiteSheepChoosesClothes" title="White Sheep Chooses Clothes"></span>
<span class="Graphic Graphic--whiteSheepSick" title="White Sheep is Sick"></span>
<span class="Graphic Graphic--whiteSheepWorkingOvertime" title="White Sheep Working Overtime icon"></span>
Graphic icon sizes align to the graphic icon size variables.
<span class="Graphic Graphic--blackSheep Graphic--xs" title="Black Sheep icon"></span>
<span class="Graphic Graphic--blackSheep Graphic--sm" title="Black Sheep icon"></span>
<span class="Graphic Graphic--blackSheep" title="Black Sheep icon"></span>
<span class="Graphic Graphic--blackSheep Graphic--md" title="Black Sheep icon"></span>
<span class="Graphic Graphic--blackSheep Graphic--lg" title="Black Sheep icon"></span>
<span class="Graphic Graphic--blackSheep Graphic--xlg" title="Black Sheep icon"></span>
<span class="Graphic Graphic--blackSheep Graphic--xxlg" title="Black Sheep icon"></span>
<span class="Graphic Graphic--blackSheep Graphic--xxxlg" title="Black Sheep icon"></span>
Any graphic icon can be converted to a circular graphic icon by using the --circle sub-module.
<div class="Callout Callout--light">
<span class="Graphic Graphic--circle Graphic--blackSheep"></span>
<span class="Graphic Graphic--circle Graphic--whiteSheep"></span>
<span class="Graphic Graphic--circle Graphic--whiteSheepShadow"></span>
</div>
Graphic icon with floated animation.
<span class="Graphic Graphic--whiteSheep Graphic--float" title="Floated White Sheep Shadow icon"></span>
Graphic icon with expanded animation.
<span class="Graphic Graphic--whiteSheepShadow Graphic--expand" title="Expanded White Sheep Shadow icon"></span>
This is a grouped graphic animated icons specific for home page
<div class="section-primary section-reverse section-distinct">
<div class="row">
<div class="col-sm-6 col-lg-4 col-xxl-3">
<span class="heading-home">A job worth doing is worth doing together</span>
</div>
</div>
<div class="row end-sm">
<div class="col-sm-6 col-xl-2 col-lg-6">
<span class="heading-home-subgroup">Meeeeehnagement<br/> Collaboration Software.</span>
</div>
<div class="col-sm-6 col-lg-4 col-xl-4">
<div class="Graphic--home">
<span class="Graphic Graphic--blackSheep Graphic--xxlg" title="Animated graphic hero image"></span>
<span class="Graphic Graphic--whiteSheep Graphic--xxlg Graphic--float" title="Animated graphic hero image"></span>
<span class="Graphic Graphic--whiteSheepShadow Graphic--xxlg Graphic--expand" title="Animated graphic hero image"></span>
</div>
</div>
</div>
</div>
<div class="section section-primary section-reverse section-distinct">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
To add new icons to the set:
<svg class="Icon" title="addComment icon" role="img">
<use xlink:href="#addComment"></use>
</svg>
<svg class="Icon" title="addDescription icon" role="img">
<use xlink:href="#addDescription"></use>
</svg>
<svg class="Icon" title="addSubtask icon" role="img">
<use xlink:href="#addSubtask"></use>
</svg>
<svg class="Icon" title="addTask icon" role="img">
<use xlink:href="#addTask"></use>
</svg>
<svg class="Icon" title="ampersand icon" role="img">
<use xlink:href="#ampersand"></use>
</svg>
<svg class="Icon" title="andOr icon" role="img">
<use xlink:href="#andOr"></use>
</svg>
<svg class="Icon" title="apps icon" role="img">
<use xlink:href="#apps"></use>
</svg>
<svg class="Icon" title="arithmetic icon" role="img">
<use xlink:href="#arithmetic"></use>
</svg>
<svg class="Icon" title="arrowDownOutlined icon" role="img">
<use xlink:href="#arrowDownOutlined"></use>
</svg>
<svg class="Icon" title="arrowDownSolid icon" role="img">
<use xlink:href="#arrowDownSolid"></use>
</svg>
<svg class="Icon" title="arrowLeft icon" role="img">
<use xlink:href="#arrowLeft"></use>
</svg>
<svg class="Icon" title="arrowLeftOutlined icon" role="img">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
<svg class="Icon" title="arrowLeftSolid icon" role="img">
<use xlink:href="#arrowLeftSolid"></use>
</svg>
<svg class="Icon" title="arrowRightOutlined icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
<svg class="Icon" title="arrowRightSolid icon" role="img">
<use xlink:href="#arrowRightSolid"></use>
</svg>
<svg class="Icon" title="arrowUpOutlined icon" role="img">
<use xlink:href="#arrowUpOutlined"></use>
</svg>
<svg class="Icon" title="arrowUpSolid icon" role="img">
<use xlink:href="#arrowUpSolid"></use>
</svg>
<svg class="Icon" title="assignTask icon" role="img">
<use xlink:href="#assignTask"></use>
</svg>
<svg class="Icon" title="attachment icon" role="img">
<use xlink:href="#attachment"></use>
</svg>
<svg class="Icon" title="backward icon" role="img">
<use xlink:href="#backward"></use>
</svg>
<svg class="Icon" title="blockAccentClear icon" role="img">
<use xlink:href="#blockAccentClear"></use>
</svg>
<svg class="Icon" title="blockAccentSolid icon" role="img">
<use xlink:href="#blockAccentSolid"></use>
</svg>
<svg class="Icon" title="blockClearClear icon" role="img">
<use xlink:href="#blockClearClear"></use>
</svg>
<svg class="Icon" title="blockClearSolid icon" role="img">
<use xlink:href="#blockClearSolid"></use>
</svg>
<svg class="Icon" title="blockFilledEdgetFourColumns icon" role="img">
<use xlink:href="#blockFilledEdgetFourColumns"></use>
</svg>
<svg class="Icon" title="blockFilledEdgetOneColumn icon" role="img">
<use xlink:href="#blockFilledEdgetOneColumn"></use>
</svg>
<svg class="Icon" title="blockFilledEdgetThreeColumns icon" role="img">
<use xlink:href="#blockFilledEdgetThreeColumns"></use>
</svg>
<svg class="Icon" title="blockFilledEdgetTwoColumns icon" role="img">
<use xlink:href="#blockFilledEdgetTwoColumns"></use>
</svg>
<svg class="Icon" title="blockFilledVerticalThreeColumns icon" role="img">
<use xlink:href="#blockFilledVerticalThreeColumns"></use>
</svg>
<svg class="Icon" title="blockFilledVerticalTwoColumns icon" role="img">
<use xlink:href="#blockFilledVerticalTwoColumns"></use>
</svg>
<svg class="Icon" title="blocks icon" role="img">
<use xlink:href="#blocks"></use>
</svg>
<svg class="Icon" title="blockSolidClear icon" role="img">
<use xlink:href="#blockSolidClear"></use>
</svg>
<svg class="Icon" title="blockSolidSolid icon" role="img">
<use xlink:href="#blockSolidSolid"></use>
</svg>
<svg class="Icon" title="blockTwoColumnsFilled icon" role="img">
<use xlink:href="#blockTwoColumnsFilled"></use>
</svg>
<svg class="Icon" title="brackets icon" role="img">
<use xlink:href="#brackets"></use>
</svg>
<svg class="Icon" title="calendar icon" role="img">
<use xlink:href="#calendar"></use>
</svg>
<svg class="Icon" title="calendarLargeCells icon" role="img">
<use xlink:href="#calendarLargeCells"></use>
</svg>
<svg class="Icon" title="calendarSmall icon" role="img">
<use xlink:href="#calendarSmall"></use>
</svg>
<svg class="Icon" title="camera icon" role="img">
<use xlink:href="#camera"></use>
</svg>
<svg class="Icon" title="case icon" role="img">
<use xlink:href="#case"></use>
</svg>
<svg class="Icon" title="centerAlign icon" role="img">
<use xlink:href="#centerAlign"></use>
</svg>
<svg class="Icon" title="chat icon" role="img">
<use xlink:href="#chat"></use>
</svg>
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon" title="checkCircle icon" role="img">
<use xlink:href="#checkCircle"></use>
</svg>
<svg class="Icon" title="checkCircleFilled icon" role="img">
<use xlink:href="#checkCircleFilled"></use>
</svg>
<svg class="Icon" title="circle icon" role="img">
<use xlink:href="#circle"></use>
</svg>
<svg class="Icon" title="clock icon" role="img">
<use xlink:href="#clock"></use>
</svg>
<svg class="Icon" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon" title="closeBracket icon" role="img">
<use xlink:href="#closeBracket"></use>
</svg>
<svg class="Icon" title="closeCircleFilled icon" role="img">
<use xlink:href="#closeCircleFilled"></use>
</svg>
<svg class="Icon" title="closeCurlyBracket icon" role="img">
<use xlink:href="#closeCurlyBracket"></use>
</svg>
<svg class="Icon" title="closeParenthesis icon" role="img">
<use xlink:href="#closeParenthesis"></use>
</svg>
<svg class="Icon" title="cloudDownload icon" role="img">
<use xlink:href="#cloudDownload"></use>
</svg>
<svg class="Icon" title="collapseRight icon" role="img">
<use xlink:href="#collapseRight"></use>
</svg>
<svg class="Icon" title="color icon" role="img">
<use xlink:href="#color"></use>
</svg>
<svg class="Icon" title="colorPlaceholder icon" role="img">
<use xlink:href="#colorPlaceholder"></use>
</svg>
<svg class="Icon" title="comma icon" role="img">
<use xlink:href="#comma"></use>
</svg>
<svg class="Icon" title="convertToSubtask icon" role="img">
<use xlink:href="#convertToSubtask"></use>
</svg>
<svg class="Icon" title="createACopy icon" role="img">
<use xlink:href="#createACopy"></use>
</svg>
<svg class="Icon" title="createSubProject icon" role="img">
<use xlink:href="#createSubProject"></use>
</svg>
<svg class="Icon" title="criticalPath icon" role="img">
<use xlink:href="#criticalPath"></use>
</svg>
<svg class="Icon" title="crown icon" role="img">
<use xlink:href="#crown"></use>
</svg>
<svg class="Icon" title="crownBlack icon" role="img">
<use xlink:href="#crownBlack"></use>
</svg>
<svg class="Icon" title="crownOutline icon" role="img">
<use xlink:href="#crownOutline"></use>
</svg>
<svg class="Icon" title="datePeriod icon" role="img">
<use xlink:href="#datePeriod"></use>
</svg>
<svg class="Icon" title="dateTime icon" role="img">
<use xlink:href="#dateTime"></use>
</svg>
<svg class="Icon" title="display icon" role="img">
<use xlink:href="#display"></use>
</svg>
<svg class="Icon" title="divide icon" role="img">
<use xlink:href="#divide"></use>
</svg>
<svg class="Icon" title="dividedby icon" role="img">
<use xlink:href="#dividedby"></use>
</svg>
<svg class="Icon" title="dotList icon" role="img">
<use xlink:href="#dotList"></use>
</svg>
<svg class="Icon" title="download icon" role="img">
<use xlink:href="#download"></use>
</svg>
<svg class="Icon" title="dragIndicator icon" role="img">
<use xlink:href="#dragIndicator"></use>
</svg>
<svg class="Icon" title="duplicate icon" role="img">
<use xlink:href="#duplicate"></use>
</svg>
<svg class="Icon" title="edit icon" role="img">
<use xlink:href="#edit"></use>
</svg>
<svg class="Icon" title="endCall icon" role="img">
<use xlink:href="#endCall"></use>
</svg>
<svg class="Icon" title="equal icon" role="img">
<use xlink:href="#equal"></use>
</svg>
<svg class="Icon" title="eraser icon" role="img">
<use xlink:href="#eraser"></use>
</svg>
<svg class="Icon" title="expand icon" role="img">
<use xlink:href="#expand"></use>
</svg>
<svg class="Icon" title="eye icon" role="img">
<use xlink:href="#eye"></use>
</svg>
<svg class="Icon" title="eyeDrop icon" role="img">
<use xlink:href="#eyeDrop"></use>
</svg>
<svg class="Icon" title="facebookWhite icon" role="img">
<use xlink:href="#facebookWhite"></use>
</svg>
<svg class="Icon" title="favorites icon" role="img">
<use xlink:href="#favorites"></use>
</svg>
<svg class="Icon" title="filter icon" role="img">
<use xlink:href="#filter"></use>
</svg>
<svg class="Icon" title="folder icon" role="img">
<use xlink:href="#folder"></use>
</svg>
<svg class="Icon" title="formulas icon" role="img">
<use xlink:href="#formulas"></use>
</svg>
<svg class="Icon" title="gear icon" role="img">
<use xlink:href="#gear"></use>
</svg>
<svg class="Icon" title="gearOutline icon" role="img">
<use xlink:href="#gearOutline"></use>
</svg>
<svg class="Icon" title="graph icon" role="img">
<use xlink:href="#graph"></use>
</svg>
<svg class="Icon" title="greaterThan icon" role="img">
<use xlink:href="#greaterThan"></use>
</svg>
<svg class="Icon" title="gridView icon" role="img">
<use xlink:href="#gridView"></use>
</svg>
<svg class="Icon" title="info icon" role="img">
<use xlink:href="#info"></use>
</svg>
<svg class="Icon" title="instagramWhite icon" role="img">
<use xlink:href="#instagramWhite"></use>
</svg>
<svg class="Icon" title="invite icon" role="img">
<use xlink:href="#invite"></use>
</svg>
<svg class="Icon" title="layers icon" role="img">
<use xlink:href="#layers"></use>
</svg>
<svg class="Icon" title="leftAlign icon" role="img">
<use xlink:href="#leftAlign"></use>
</svg>
<svg class="Icon" title="lessThan icon" role="img">
<use xlink:href="#lessThan"></use>
</svg>
<svg class="Icon" title="lessThanEqual icon" role="img">
<use xlink:href="#lessThanEqual"></use>
</svg>
<svg class="Icon" title="link icon" role="img">
<use xlink:href="#link"></use>
</svg>
<svg class="Icon" title="linkTimelineToolbar icon" role="img">
<use xlink:href="#linkTimelineToolbar"></use>
</svg>
<svg class="Icon" title="listView icon" role="img">
<use xlink:href="#listView"></use>
</svg>
<svg class="Icon" title="mail icon" role="img">
<use xlink:href="#mail"></use>
</svg>
<svg class="Icon" title="meatball icon" role="img">
<use xlink:href="#meatball"></use>
</svg>
<svg class="Icon" title="micOff icon" role="img">
<use xlink:href="#micOff"></use>
</svg>
<svg class="Icon" title="micOn icon" role="img">
<use xlink:href="#micOn"></use>
</svg>
<svg class="Icon" title="minus icon" role="img">
<use xlink:href="#minus"></use>
</svg>
<svg class="Icon" title="minusCircle icon" role="img">
<use xlink:href="#minusCircle"></use>
</svg>
<svg class="Icon" title="mobilePhone icon" role="img">
<use xlink:href="#mobilePhone"></use>
</svg>
<svg class="Icon" title="move icon" role="img">
<use xlink:href="#move"></use>
</svg>
<svg class="Icon" title="moveOut icon" role="img">
<use xlink:href="#moveOut"></use>
</svg>
<svg class="Icon" title="multiply icon" role="img">
<use xlink:href="#multiply"></use>
</svg>
<svg class="Icon" title="newDashboard icon" role="img">
<use xlink:href="#newDashboard"></use>
</svg>
<svg class="Icon" title="noiseCancel icon" role="img">
<use xlink:href="#noiseCancel"></use>
</svg>
<svg class="Icon" title="notEqual icon" role="img">
<use xlink:href="#notEqual"></use>
</svg>
<svg class="Icon" title="notification icon" role="img">
<use xlink:href="#notification"></use>
</svg>
<svg class="Icon" title="notificationOff icon" role="img">
<use xlink:href="#notificationOff"></use>
</svg>
<svg class="Icon" title="officeBuilding icon" role="img">
<use xlink:href="#officeBuilding"></use>
</svg>
<svg class="Icon" title="openBracket icon" role="img">
<use xlink:href="#openBracket"></use>
</svg>
<svg class="Icon" title="openCurlyBracket icon" role="img">
<use xlink:href="#openCurlyBracket"></use>
</svg>
<svg class="Icon" title="openParenthesis icon" role="img">
<use xlink:href="#openParenthesis"></use>
</svg>
<svg class="Icon" title="or icon" role="img">
<use xlink:href="#or"></use>
</svg>
<svg class="Icon" title="page icon" role="img">
<use xlink:href="#page"></use>
</svg>
<svg class="Icon" title="paperClip icon" role="img">
<use xlink:href="#paperClip"></use>
</svg>
<svg class="Icon" title="participants icon" role="img">
<use xlink:href="#participants"></use>
</svg>
<svg class="Icon" title="participantsFilled icon" role="img">
<use xlink:href="#participantsFilled"></use>
</svg>
<svg class="Icon" title="paste icon" role="img">
<use xlink:href="#paste"></use>
</svg>
<svg class="Icon" title="pen icon" role="img">
<use xlink:href="#pen"></use>
</svg>
<svg class="Icon" title="penOutlined icon" role="img">
<use xlink:href="#penOutlined"></use>
</svg>
<svg class="Icon" title="penSquare icon" role="img">
<use xlink:href="#penSquare"></use>
</svg>
<svg class="Icon" title="people icon" role="img">
<use xlink:href="#people"></use>
</svg>
<svg class="Icon" title="period icon" role="img">
<use xlink:href="#period"></use>
</svg>
<svg class="Icon" title="permission icon" role="img">
<use xlink:href="#permission"></use>
</svg>
<svg class="Icon" title="person icon" role="img">
<use xlink:href="#person"></use>
</svg>
<svg class="Icon" title="phone icon" role="img">
<use xlink:href="#phone"></use>
</svg>
<svg class="Icon" title="pinSettings icon" role="img">
<use xlink:href="#pinSettings"></use>
</svg>
<svg class="Icon" title="planner icon" role="img">
<use xlink:href="#planner"></use>
</svg>
<svg class="Icon" title="plus icon" role="img">
<use xlink:href="#plus"></use>
</svg>
<svg class="Icon" title="plusCircle icon" role="img">
<use xlink:href="#plusCircle"></use>
</svg>
<svg class="Icon" title="plusCircleFilled icon" role="img">
<use xlink:href="#plusCircleFilled"></use>
</svg>
<svg class="Icon" title="plusSquare icon" role="img">
<use xlink:href="#plusSquare"></use>
</svg>
<svg class="Icon" title="plusThin icon" role="img">
<use xlink:href="#plusThin"></use>
</svg>
<svg class="Icon" title="printer icon" role="img">
<use xlink:href="#printer"></use>
</svg>
<svg class="Icon" title="pulse icon" role="img">
<use xlink:href="#pulse"></use>
</svg>
<svg class="Icon" title="ratingBlock icon" role="img">
<use xlink:href="#ratingBlock"></use>
</svg>
<svg class="Icon" title="ratingCheck icon" role="img">
<use xlink:href="#ratingCheck"></use>
</svg>
<svg class="Icon" title="ratingCrown icon" role="img">
<use xlink:href="#ratingCrown"></use>
</svg>
<svg class="Icon" title="ratingEmoticon1 icon" role="img">
<use xlink:href="#ratingEmoticon1"></use>
</svg>
<svg class="Icon" title="ratingEmoticon2 icon" role="img">
<use xlink:href="#ratingEmoticon2"></use>
</svg>
<svg class="Icon" title="ratingEmoticon3 icon" role="img">
<use xlink:href="#ratingEmoticon3"></use>
</svg>
<svg class="Icon" title="ratingEmoticon4 icon" role="img">
<use xlink:href="#ratingEmoticon4"></use>
</svg>
<svg class="Icon" title="ratingEmoticon5 icon" role="img">
<use xlink:href="#ratingEmoticon5"></use>
</svg>
<svg class="Icon" title="ratingHeart icon" role="img">
<use xlink:href="#ratingHeart"></use>
</svg>
<svg class="Icon" title="ratingMain icon" role="img">
<use xlink:href="#ratingMain"></use>
</svg>
<svg class="Icon" title="ratingNumber1 icon" role="img">
<use xlink:href="#ratingNumber1"></use>
</svg>
<svg class="Icon" title="ratingNumber2 icon" role="img">
<use xlink:href="#ratingNumber2"></use>
</svg>
<svg class="Icon" title="ratingNumber3 icon" role="img">
<use xlink:href="#ratingNumber3"></use>
</svg>
<svg class="Icon" title="ratingNumber4 icon" role="img">
<use xlink:href="#ratingNumber4"></use>
</svg>
<svg class="Icon" title="ratingNumber5 icon" role="img">
<use xlink:href="#ratingNumber5"></use>
</svg>
<svg class="Icon" title="ratingNumberBox1 icon" role="img">
<use xlink:href="#ratingNumberBox1"></use>
</svg>
<svg class="Icon" title="ratingNumberBox2 icon" role="img">
<use xlink:href="#ratingNumberBox2"></use>
</svg>
<svg class="Icon" title="ratingNumberBox3 icon" role="img">
<use xlink:href="#ratingNumberBox3"></use>
</svg>
<svg class="Icon" title="ratingNumberBox4 icon" role="img">
<use xlink:href="#ratingNumberBox4"></use>
</svg>
<svg class="Icon" title="ratingNumberBox5 icon" role="img">
<use xlink:href="#ratingNumberBox5"></use>
</svg>
<svg class="Icon" title="ratingSheep1 icon" role="img">
<use xlink:href="#ratingSheep1"></use>
</svg>
<svg class="Icon" title="ratingSheep2 icon" role="img">
<use xlink:href="#ratingSheep2"></use>
</svg>
<svg class="Icon" title="ratingSheep3 icon" role="img">
<use xlink:href="#ratingSheep3"></use>
</svg>
<svg class="Icon" title="ratingSheep4 icon" role="img">
<use xlink:href="#ratingSheep4"></use>
</svg>
<svg class="Icon" title="ratingSheep5 icon" role="img">
<use xlink:href="#ratingSheep5"></use>
</svg>
<svg class="Icon" title="ratingSmiley icon" role="img">
<use xlink:href="#ratingSmiley"></use>
</svg>
<svg class="Icon" title="ratingStar icon" role="img">
<use xlink:href="#ratingStar"></use>
</svg>
<svg class="Icon" title="ratingStarEmote1 icon" role="img">
<use xlink:href="#ratingStarEmote1"></use>
</svg>
<svg class="Icon" title="ratingStarEmote2 icon" role="img">
<use xlink:href="#ratingStarEmote2"></use>
</svg>
<svg class="Icon" title="ratingStarEmote3 icon" role="img">
<use xlink:href="#ratingStarEmote3"></use>
</svg>
<svg class="Icon" title="ratingStarEmote4 icon" role="img">
<use xlink:href="#ratingStarEmote4"></use>
</svg>
<svg class="Icon" title="ratingStarEmote5 icon" role="img">
<use xlink:href="#ratingStarEmote5"></use>
</svg>
<svg class="Icon" title="ratingThumbsUp icon" role="img">
<use xlink:href="#ratingThumbsUp"></use>
</svg>
<svg class="Icon" title="record icon" role="img">
<use xlink:href="#record"></use>
</svg>
<svg class="Icon" title="redo icon" role="img">
<use xlink:href="#redo"></use>
</svg>
<svg class="Icon" title="removeAsDefaultDashboard icon" role="img">
<use xlink:href="#removeAsDefaultDashboard"></use>
</svg>
<svg class="Icon" title="replace icon" role="img">
<use xlink:href="#replace"></use>
</svg>
<svg class="Icon" title="replaceThin icon" role="img">
<use xlink:href="#replaceThin"></use>
</svg>
<svg class="Icon" title="requestACopy icon" role="img">
<use xlink:href="#requestACopy"></use>
</svg>
<svg class="Icon" title="rightAlign icon" role="img">
<use xlink:href="#rightAlign"></use>
</svg>
<svg class="Icon" title="rowSettings icon" role="img">
<use xlink:href="#rowSettings"></use>
</svg>
<svg class="Icon" title="saveFloppy icon" role="img">
<use xlink:href="#saveFloppy"></use>
</svg>
<svg class="Icon" title="search icon" role="img">
<use xlink:href="#search"></use>
</svg>
<svg class="Icon" title="security icon" role="img">
<use xlink:href="#security"></use>
</svg>
<svg class="Icon" title="select icon" role="img">
<use xlink:href="#select"></use>
</svg>
<svg class="Icon" title="send icon" role="img">
<use xlink:href="#send"></use>
</svg>
<svg class="Icon" title="setAsDefaultDashboard icon" role="img">
<use xlink:href="#setAsDefaultDashboard"></use>
</svg>
<svg class="Icon" title="share icon" role="img">
<use xlink:href="#share"></use>
</svg>
<svg class="Icon" title="shareScreen icon" role="img">
<use xlink:href="#shareScreen"></use>
</svg>
<svg class="Icon" title="slash icon" role="img">
<use xlink:href="#slash"></use>
</svg>
<svg class="Icon" title="smiley icon" role="img">
<use xlink:href="#smiley"></use>
</svg>
<svg class="Icon" title="sort icon" role="img">
<use xlink:href="#sort"></use>
</svg>
<svg class="Icon" title="statusBlock icon" role="img">
<use xlink:href="#statusBlock"></use>
</svg>
<svg class="Icon" title="stop icon" role="img">
<use xlink:href="#stop"></use>
</svg>
<svg class="Icon" title="subtask icon" role="img">
<use xlink:href="#subtask"></use>
</svg>
<svg class="Icon" title="sun icon" role="img">
<use xlink:href="#sun"></use>
</svg>
<svg class="Icon" title="sunBig icon" role="img">
<use xlink:href="#sunBig"></use>
</svg>
<svg class="Icon" title="sunSmall icon" role="img">
<use xlink:href="#sunSmall"></use>
</svg>
<svg class="Icon" title="surveyMain icon" role="img">
<use xlink:href="#surveyMain"></use>
</svg>
<svg class="Icon" title="symbolCirc icon" role="img">
<use xlink:href="#symbolCirc"></use>
</svg>
<svg class="Icon" title="symbolRect icon" role="img">
<use xlink:href="#symbolRect"></use>
</svg>
<svg class="Icon" title="symbolSquare icon" role="img">
<use xlink:href="#symbolSquare"></use>
</svg>
<svg class="Icon" title="tagsBlock icon" role="img">
<use xlink:href="#tagsBlock"></use>
</svg>
<svg class="Icon" title="target icon" role="img">
<use xlink:href="#target"></use>
</svg>
<svg class="Icon" title="taskIcon icon" role="img">
<use xlink:href="#taskIcon"></use>
</svg>
<svg class="Icon" title="textBlock icon" role="img">
<use xlink:href="#textBlock"></use>
</svg>
<svg class="Icon" title="ticketsBlock icon" role="img">
<use xlink:href="#ticketsBlock"></use>
</svg>
<svg class="Icon" title="time icon" role="img">
<use xlink:href="#time"></use>
</svg>
<svg class="Icon" title="timeDelimiter icon" role="img">
<use xlink:href="#timeDelimiter"></use>
</svg>
<svg class="Icon" title="timeTrackerBlock icon" role="img">
<use xlink:href="#timeTrackerBlock"></use>
</svg>
<svg class="Icon" title="trashBin icon" role="img">
<use xlink:href="#trashBin"></use>
</svg>
<svg class="Icon" title="trashOutlined icon" role="img">
<use xlink:href="#trashOutlined"></use>
</svg>
<svg class="Icon" title="trashRect icon" role="img">
<use xlink:href="#trashRect"></use>
</svg>
<svg class="Icon" title="twitterWhite icon" role="img">
<use xlink:href="#twitterWhite"></use>
</svg>
<svg class="Icon" title="typography icon" role="img">
<use xlink:href="#typography"></use>
</svg>
<svg class="Icon" title="undo icon" role="img">
<use xlink:href="#undo"></use>
</svg>
<svg class="Icon" title="unlinkTimelineToolbar icon" role="img">
<use xlink:href="#unlinkTimelineToolbar"></use>
</svg>
<svg class="Icon" title="userGroup icon" role="img">
<use xlink:href="#userGroup"></use>
</svg>
<svg class="Icon" title="video icon" role="img">
<use xlink:href="#video"></use>
</svg>
<svg class="Icon" title="videoOff icon" role="img">
<use xlink:href="#videoOff"></use>
</svg>
<svg class="Icon" title="viewChange icon" role="img">
<use xlink:href="#viewChange"></use>
</svg>
<svg class="Icon" title="visibilityOff icon" role="img">
<use xlink:href="#visibilityOff"></use>
</svg>
<svg class="Icon" title="visibilityOn icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
<svg class="Icon" title="weave icon" role="img">
<use xlink:href="#weave"></use>
</svg>
<svg class="Icon" title="weaveFormPreview icon" role="img">
<use xlink:href="#weaveFormPreview"></use>
</svg>
<svg class="Icon" title="whiteboard icon" role="img">
<use xlink:href="#whiteboard"></use>
</svg>
<svg class="Icon" title="whiteListWithGreenBullets icon" role="img">
<use xlink:href="#whiteListWithGreenBullets"></use>
</svg>
<svg class="Icon" title="worked icon" role="img">
<use xlink:href="#worked"></use>
</svg>
<svg class="Icon" title="working icon" role="img">
<use xlink:href="#working"></use>
</svg>
<svg class="Icon" title="zoomIn icon" role="img">
<use xlink:href="#zoomIn"></use>
</svg>
<svg class="Icon" title="zoomOut icon" role="img">
<use xlink:href="#zoomOut"></use>
</svg>
<svg class="Icon" title="absentColored icon" role="img">
<use xlink:href="#absentColored"></use>
</svg>
<svg class="Icon" title="batteryColored icon" role="img">
<use xlink:href="#batteryColored"></use>
</svg>
<svg class="Icon" title="beachChairColored icon" role="img">
<use xlink:href="#beachChairColored"></use>
</svg>
<svg class="Icon" title="blocksColored icon" role="img">
<use xlink:href="#blocksColored"></use>
</svg>
<svg class="Icon" title="blocksRedColored icon" role="img">
<use xlink:href="#blocksRedColored"></use>
</svg>
<svg class="Icon" title="blocksYellowColored icon" role="img">
<use xlink:href="#blocksYellowColored"></use>
</svg>
<svg class="Icon" title="calendarColored icon" role="img">
<use xlink:href="#calendarColored"></use>
</svg>
<svg class="Icon" title="chartBarColored icon" role="img">
<use xlink:href="#chartBarColored"></use>
</svg>
<svg class="Icon" title="chartColored icon" role="img">
<use xlink:href="#chartColored"></use>
</svg>
<svg class="Icon" title="chartGraphColored icon" role="img">
<use xlink:href="#chartGraphColored"></use>
</svg>
<svg class="Icon" title="chartGridColored icon" role="img">
<use xlink:href="#chartGridColored"></use>
</svg>
<svg class="Icon" title="chartLineColored icon" role="img">
<use xlink:href="#chartLineColored"></use>
</svg>
<svg class="Icon" title="chartPieColored icon" role="img">
<use xlink:href="#chartPieColored"></use>
</svg>
<svg class="Icon" title="chartPolarColored icon" role="img">
<use xlink:href="#chartPolarColored"></use>
</svg>
<svg class="Icon" title="chartRadarColored icon" role="img">
<use xlink:href="#chartRadarColored"></use>
</svg>
<svg class="Icon" title="chartScatterColored icon" role="img">
<use xlink:href="#chartScatterColored"></use>
</svg>
<svg class="Icon" title="chatColored icon" role="img">
<use xlink:href="#chatColored"></use>
</svg>
<svg class="Icon" title="choiceColored icon" role="img">
<use xlink:href="#choiceColored"></use>
</svg>
<svg class="Icon" title="cityColored icon" role="img">
<use xlink:href="#cityColored"></use>
</svg>
<svg class="Icon" title="clockDownColored icon" role="img">
<use xlink:href="#clockDownColored"></use>
</svg>
<svg class="Icon" title="clockUpColored icon" role="img">
<use xlink:href="#clockUpColored"></use>
</svg>
<svg class="Icon" title="countryColored icon" role="img">
<use xlink:href="#countryColored"></use>
</svg>
<svg class="Icon" title="criticalPriorityColored icon" role="img">
<use xlink:href="#criticalPriorityColored"></use>
</svg>
<svg class="Icon" title="crownYellowColored icon" role="img">
<use xlink:href="#crownYellowColored"></use>
</svg>
<svg class="Icon" title="currencyColored icon" role="img">
<use xlink:href="#currencyColored"></use>
</svg>
<svg class="Icon" title="dateAndTimeBlockColored icon" role="img">
<use xlink:href="#dateAndTimeBlockColored"></use>
</svg>
<svg class="Icon" title="dateColored icon" role="img">
<use xlink:href="#dateColored"></use>
</svg>
<svg class="Icon" title="dateTimeColored icon" role="img">
<use xlink:href="#dateTimeColored"></use>
</svg>
<svg class="Icon" title="facebookColored icon" role="img">
<use xlink:href="#facebookColored"></use>
</svg>
<svg class="Icon" title="fileBlockColored icon" role="img">
<use xlink:href="#fileBlockColored"></use>
</svg>
<svg class="Icon" title="fileFontColored icon" role="img">
<use xlink:href="#fileFontColored"></use>
</svg>
<svg class="Icon" title="fileTextColored icon" role="img">
<use xlink:href="#fileTextColored"></use>
</svg>
<svg class="Icon" title="folderArchivedColored icon" role="img">
<use xlink:href="#folderArchivedColored"></use>
</svg>
<svg class="Icon" title="folderAudiosColored icon" role="img">
<use xlink:href="#folderAudiosColored"></use>
</svg>
<svg class="Icon" title="folderColored icon" role="img">
<use xlink:href="#folderColored"></use>
</svg>
<svg class="Icon" title="folderImagesColored icon" role="img">
<use xlink:href="#folderImagesColored"></use>
</svg>
<svg class="Icon" title="folderVideosColored icon" role="img">
<use xlink:href="#folderVideosColored"></use>
</svg>
<svg class="Icon" title="formulaBlockColored icon" role="img">
<use xlink:href="#formulaBlockColored"></use>
</svg>
<svg class="Icon" title="formulaColored icon" role="img">
<use xlink:href="#formulaColored"></use>
</svg>
<svg class="Icon" title="ganttColored icon" role="img">
<use xlink:href="#ganttColored"></use>
</svg>
<svg class="Icon" title="gapColored icon" role="img">
<use xlink:href="#gapColored"></use>
</svg>
<svg class="Icon" title="googleColored icon" role="img">
<use xlink:href="#googleColored"></use>
</svg>
<svg class="Icon" title="happyMoonColored icon" role="img">
<use xlink:href="#happyMoonColored"></use>
</svg>
<svg class="Icon" title="hierarchyChartColored icon" role="img">
<use xlink:href="#hierarchyChartColored"></use>
</svg>
<svg class="Icon" title="highPriorityColored icon" role="img">
<use xlink:href="#highPriorityColored"></use>
</svg>
<svg class="Icon" title="imageColored icon" role="img">
<use xlink:href="#imageColored"></use>
</svg>
<svg class="Icon" title="infoColored icon" role="img">
<use xlink:href="#infoColored"></use>
</svg>
<svg class="Icon" title="inputColored icon" role="img">
<use xlink:href="#inputColored"></use>
</svg>
<svg class="Icon" title="linkBlockColored icon" role="img">
<use xlink:href="#linkBlockColored"></use>
</svg>
<svg class="Icon" title="linkColored icon" role="img">
<use xlink:href="#linkColored"></use>
</svg>
<svg class="Icon" title="locationBlockColored icon" role="img">
<use xlink:href="#locationBlockColored"></use>
</svg>
<svg class="Icon" title="locationCityColored icon" role="img">
<use xlink:href="#locationCityColored"></use>
</svg>
<svg class="Icon" title="locationCountryColored icon" role="img">
<use xlink:href="#locationCountryColored"></use>
</svg>
<svg class="Icon" title="locationPostalColored icon" role="img">
<use xlink:href="#locationPostalColored"></use>
</svg>
<svg class="Icon" title="locationStateColored icon" role="img">
<use xlink:href="#locationStateColored"></use>
</svg>
<svg class="Icon" title="locationStreetColored icon" role="img">
<use xlink:href="#locationStreetColored"></use>
</svg>
<svg class="Icon" title="lowPriorityColored icon" role="img">
<use xlink:href="#lowPriorityColored"></use>
</svg>
<svg class="Icon" title="manOnPillowColored icon" role="img">
<use xlink:href="#manOnPillowColored"></use>
</svg>
<svg class="Icon" title="mapColored icon" role="img">
<use xlink:href="#mapColored"></use>
</svg>
<svg class="Icon" title="mapPinColored icon" role="img">
<use xlink:href="#mapPinColored"></use>
</svg>
<svg class="Icon" title="modulesColored icon" role="img">
<use xlink:href="#modulesColored"></use>
</svg>
<svg class="Icon" title="moonColored icon" role="img">
<use xlink:href="#moonColored"></use>
</svg>
<svg class="Icon" title="newsfeedColored icon" role="img">
<use xlink:href="#newsfeedColored"></use>
</svg>
<svg class="Icon" title="noPrioritySetColored icon" role="img">
<use xlink:href="#noPrioritySetColored"></use>
</svg>
<svg class="Icon" title="normalPriorityColored icon" role="img">
<use xlink:href="#normalPriorityColored"></use>
</svg>
<svg class="Icon" title="numberBlockColored icon" role="img">
<use xlink:href="#numberBlockColored"></use>
</svg>
<svg class="Icon" title="numberColored icon" role="img">
<use xlink:href="#numberColored"></use>
</svg>
<svg class="Icon" title="numberGeneralColored icon" role="img">
<use xlink:href="#numberGeneralColored"></use>
</svg>
<svg class="Icon" title="numbersColored icon" role="img">
<use xlink:href="#numbersColored"></use>
</svg>
<svg class="Icon" title="onLeaveManColored icon" role="img">
<use xlink:href="#onLeaveManColored"></use>
</svg>
<svg class="Icon" title="onLeaveWomanColored icon" role="img">
<use xlink:href="#onLeaveWomanColored"></use>
</svg>
<svg class="Icon" title="paintColored icon" role="img">
<use xlink:href="#paintColored"></use>
</svg>
<svg class="Icon" title="pcColored icon" role="img">
<use xlink:href="#pcColored"></use>
</svg>
<svg class="Icon" title="percentageColored icon" role="img">
<use xlink:href="#percentageColored"></use>
</svg>
<svg class="Icon" title="personBlockColored icon" role="img">
<use xlink:href="#personBlockColored"></use>
</svg>
<svg class="Icon" title="personEmailColored icon" role="img">
<use xlink:href="#personEmailColored"></use>
</svg>
<svg class="Icon" title="personNameColored icon" role="img">
<use xlink:href="#personNameColored"></use>
</svg>
<svg class="Icon" title="personPhoneColored icon" role="img">
<use xlink:href="#personPhoneColored"></use>
</svg>
<svg class="Icon" title="personPhotoColored icon" role="img">
<use xlink:href="#personPhotoColored"></use>
</svg>
<svg class="Icon" title="pollMainColored icon" role="img">
<use xlink:href="#pollMainColored"></use>
</svg>
<svg class="Icon" title="progressBlockColored icon" role="img">
<use xlink:href="#progressBlockColored"></use>
</svg>
<svg class="Icon" title="searchColored icon" role="img">
<use xlink:href="#searchColored"></use>
</svg>
<svg class="Icon" title="sectionColored icon" role="img">
<use xlink:href="#sectionColored"></use>
</svg>
<svg class="Icon" title="signInColored icon" role="img">
<use xlink:href="#signInColored"></use>
</svg>
<svg class="Icon" title="smartBlockColored icon" role="img">
<use xlink:href="#smartBlockColored"></use>
</svg>
<svg class="Icon" title="textColored icon" role="img">
<use xlink:href="#textColored"></use>
</svg>
<svg class="Icon" title="textWidgetColored icon" role="img">
<use xlink:href="#textWidgetColored"></use>
</svg>
<svg class="Icon" title="threadColored icon" role="img">
<use xlink:href="#threadColored"></use>
</svg>
<svg class="Icon" title="ticketAvatarColored icon" role="img">
<use xlink:href="#ticketAvatarColored"></use>
</svg>
<svg class="Icon" title="ticketIdColored icon" role="img">
<use xlink:href="#ticketIdColored"></use>
</svg>
<svg class="Icon" title="ticketInputIdColored icon" role="img">
<use xlink:href="#ticketInputIdColored"></use>
</svg>
<svg class="Icon" title="ticketInputTypeColored icon" role="img">
<use xlink:href="#ticketInputTypeColored"></use>
</svg>
<svg class="Icon" title="ticketTitleColored icon" role="img">
<use xlink:href="#ticketTitleColored"></use>
</svg>
<svg class="Icon" title="ticketTypeColored icon" role="img">
<use xlink:href="#ticketTypeColored"></use>
</svg>
<svg class="Icon" title="timeColored icon" role="img">
<use xlink:href="#timeColored"></use>
</svg>
<svg class="Icon" title="timelineColored icon" role="img">
<use xlink:href="#timelineColored"></use>
</svg>
<svg class="Icon" title="timerCountDownColored icon" role="img">
<use xlink:href="#timerCountDownColored"></use>
</svg>
<svg class="Icon" title="timerCountUpColored icon" role="img">
<use xlink:href="#timerCountUpColored"></use>
</svg>
<svg class="Icon" title="timeTrackerColored icon" role="img">
<use xlink:href="#timeTrackerColored"></use>
</svg>
<svg class="Icon" title="todoColored icon" role="img">
<use xlink:href="#todoColored"></use>
</svg>
<svg class="Icon" title="veryLowPriorityColored icon" role="img">
<use xlink:href="#veryLowPriorityColored"></use>
</svg>
<svg class="Icon" title="weavesColored icon" role="img">
<use xlink:href="#weavesColored"></use>
</svg>
Icon sizes align to the font size variables.
Note: If a size sub-module is ommitted, the icon size will be relative to it's parent container (1em).
<svg class="Icon Icon--xxs" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--xs" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--sm" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--lg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--xl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--xxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--xxxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
Any icon can be converted to a circular icon by using the --circle sub-module.
<svg class="Icon Icon--circle Icon--xxs" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--circle Icon--xs" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--circle Icon--sm" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--circle" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--circle Icon--lg" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--circle Icon--xl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--circle Icon--xxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--circle Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--outline Icon--xxs" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--outline Icon--xs" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--outline Icon--sm" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--outline" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--outline Icon--lg" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--outline Icon--xl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--outline Icon--xxl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--outline Icon--xxxl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon Icon--success Icon--lg" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon Icon--error Icon--xl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--outline Icon--primary Icon--xxl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--outline Icon--secondary Icon--xxl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--lg" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--success Icon--xl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--error Icon--xxl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--outline Icon--primary Icon--xxxl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--filled Icon--outline Icon--secondary Icon--xxxl" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
Any icon can be converted to a square icon by using the --square sub-module.
<svg class="Icon Icon--square" title="check icon" role="img">
<use xlink:href="#trashBin"></use>
</svg>
<svg class="Icon Icon--square Icon--lg" title="check icon" role="img">
<use xlink:href="#trashBin"></use>
</svg>
<svg class="Icon Icon--square Icon--xl" title="check icon" role="img">
<use xlink:href="#trashBin"></use>
</svg>
<svg class="Icon Icon--square Icon--xxl" title="check icon" role="img">
<use xlink:href="#trashBin"></use>
</svg>
<svg class="Icon Icon--square Icon--xxxl" title="check icon" role="img">
<use xlink:href="#trashBin"></use>
</svg>
Icons will inherit the color property of their parent via currentColor. Otherwise they must use one of the following colour sub-modules.
<div class="Callout section">
<svg class="Icon" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--light" title="visibility on icon" role="img">
<use xlink:href="#visibilityOn"></use>
</svg>
<svg class="Icon Icon--error" title="visibility off icon" role="img">
<use xlink:href="#visibilityOff"></use>
</svg>
</div>
<div class="Callout Callout--primary">
<!-- Callout used for display online -->
<svg class="Icon Icon--reverse" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<svg class="Icon Icon--circle Icon--reverse" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
</div>
The Interactive is designed to be paired with inline svg illustration elements and are usually used to represent interactions.
<span class="Interactive Interactive--attendance" title="Attendance icon"></span>
<span class="Interactive Interactive--attendanceDashboard" title="Attendance icon"></span>
<span class="Interactive Interactive--attendancePolicy" title="Attendance Policy icon"></span>
<span class="Interactive Interactive--blankUser" title="Blank User icon"></span>
<span class="Interactive Interactive--calendar" title="Calendar icon"></span>
<span class="Interactive Interactive--chat" title="Chat icon"></span>
<span class="Interactive Interactive--contacts" title="Contacts icon"></span>
<span class="Interactive Interactive--dashboard" title="Dashboard icon"></span>
<span class="Interactive Interactive--employeeList" title="Employee List icon"></span>
<span class="Interactive Interactive--employeeListMenu" title="Employee List icon"></span>
<span class="Interactive Interactive--employeeRecord" title="Employee Record icon"></span>
<span class="Interactive Interactive--employeeRecordDashboard" title="Employee Record icon"></span>
<span class="Interactive Interactive--favorite" title="Favorite icon"></span>
<span class="Interactive Interactive--feedPage" title="Feed Page icon"></span>
<span class="Interactive Interactive--fileExcel" title="File Excel icon"></span>
<span class="Interactive Interactive--fileIllustrator" title="File Illustrator icon"></span>
<span class="Interactive Interactive--fileIndesign" title="File Indesign icon"></span>
<span class="Interactive Interactive--filePdf" title="File PDF icon"></span>
<span class="Interactive Interactive--filePowerpoint" title="File Powerpoint icon"></span>
<span class="Interactive Interactive--fileWord" title="File Word icon"></span>
<span class="Interactive Interactive--fileXd" title="File XD icon"></span>
<span class="Interactive Interactive--fileZip" title="File Zip icon"></span>
<span class="Interactive Interactive--floatingBot" title="Floating Bot icon"></span>
<span class="Interactive Interactive--floatingChat" title="Floating Chat icon"></span>
<span class="Interactive Interactive--games" title="Games icon"></span>
<span class="Interactive Interactive--gantt" title="Gantt icon"></span>
<span class="Interactive Interactive--genderFemale" title="Gender Female icon"></span>
<span class="Interactive Interactive--genderMale" title="Gender Male icon"></span>
<span class="Interactive Interactive--genderNonBinary" title="Gender Non-Binary"></span>
<span class="Interactive Interactive--hangout" title="Hangout icon"></span>
<span class="Interactive Interactive--help" title="Help icon"></span>
<span class="Interactive Interactive--home" title="Home icon"></span>
<span class="Interactive Interactive--homeDashboard" title="Home icon"></span>
<span class="Interactive Interactive--hrHub" title="HR Hub icon"></span>
<span class="Interactive Interactive--inviteMembers" title="Invite Members icon"></span>
<span class="Interactive Interactive--kanban" title="Kanban icon"></span>
<span class="Interactive Interactive--knitwork" title="Knitwork icon"></span>
<span class="Interactive Interactive--kpi" title="KPI icon"></span>
<span class="Interactive Interactive--leave" title="Leave icon"></span>
<span class="Interactive Interactive--leaveDashboard" title="My Leaves icon"></span>
<span class="Interactive Interactive--list" title="List icon"></span>
<span class="Interactive Interactive--liveFeed" title="Live Feed icon"></span>
<span class="Interactive Interactive--liveFeedDashboard" title="Live Feed icon"></span>
<span class="Interactive Interactive--makeScheduleRequest" title="Make Schedule Request icon"></span>
<span class="Interactive Interactive--newMessage" title="New Message icon"></span>
<span class="Interactive Interactive--noDataFound" title="Data Not Found icon"></span>
<span class="Interactive Interactive--notes" title="Notes icon"></span>
<span class="Interactive Interactive--notifications" title="Notifications icon"></span>
<span class="Interactive Interactive--pendingRequestDashboard icon" title="Pending Request"></span>
<span class="Interactive Interactive--people" title="People icon"></span>
<span class="Interactive Interactive--projects" title="Projects icon"></span>
<span class="Interactive Interactive--reports" title="Reports icon"></span>
<span class="Interactive Interactive--request" title="Request"></span>
<span class="Interactive Interactive--requestDashboard" title="Request"></span>
<span class="Interactive Interactive--requestHistory" title="Request History icon"></span>
<span class="Interactive Interactive--sсheduleRequest" title="Schedule Request"></span>
<span class="Interactive Interactive--settingsDashboard" title="Settings"></span>
<span class="Interactive Interactive--sheep" title="Sheep icon"></span>
<span class="Interactive Interactive--sheepHelper" title="Sheep Helper icon"></span>
<span class="Interactive Interactive--task" title="Task icon"></span>
<span class="Interactive Interactive--taskDashboard" title="Task icon"></span>
<span class="Interactive Interactive--tearOffCalendar" title="Tear off calendar icon"></span>
<span class="Interactive Interactive--template" title="Templates list icon"></span>
<span class="Interactive Interactive--templateSecondary" title="Template icon"></span>
<span class="Interactive Interactive--tickets" title="Tickets icon"></span>
<span class="Interactive Interactive--timeTracker" title="Time Tracker icon"></span>
<span class="Interactive Interactive--updateProfilePictureCamera" title="Update Profile Picture Camera icon"></span>
<span class="Interactive Interactive--toDos" title="To Dos icon"></span>
<span class="Interactive Interactive--trash" title="Trash icon"></span>
<span class="Interactive Interactive--views" title="Views icon"></span>
<span class="Interactive Interactive--weaves" title="Weaves icon"></span>
<span class="Interactive Interactive--workingStatusActive" title="Working status active icon"></span>
<span class="Interactive Interactive--workingStatusAway" title="Working status away icon"></span>
<span class="Interactive Interactive--workingStatusDoNotDisturb" title="Working status do not disturb icon"></span>
<span class="Interactive Interactive--workingStatusInvisible" title="Working status invisible icon"></span>
<span class="Interactive Interactive--workingStatusOutOfOffice" title="Working status out of office icon"></span>
<span class="Interactive Interactive--trash Interactive-is-glowing" title="Trash icon"></span>
<span class="Interactive Interactive--views Interactive-is-glowing" title="Views icon"></span>
<span class="Interactive Interactive--weaves Interactive-is-glowing" title="Weaves icon"></span>
<span class="Interactive Interactive--timeTracker Interactive-is-glowing" title="Time Tracker icon"></span>
<span class="Interactive Interactive--toDos Interactive-is-glowing" title="To Dos icon"></span>
Interactive icon sizes align to the interactive icon size variables.
<span class="Interactive Interactive--weaves Interactive--xs" title="Weaves icon"></span>
<span class="Interactive Interactive--weaves Interactive--sm" title="Weaves icon"></span>
<span class="Interactive Interactive--weaves" title="Weaves icon"></span>
<span class="Interactive Interactive--weaves Interactive--lg" title="Weaves icon"></span>
<span class="Interactive Interactive--weaves Interactive--xlg" title="Weaves icon"></span>
Multi-step Progress Bar is used in a multi step form. It communicates to user what step they are working on and how much they have left to do.
MultiStepProgressBar the main class around the MultiStepProgressBar component.
MultiStepProgressBar-step is the step progress of form, it holds the displayed icon.
MultiStepProgressBar-icon the icon displayed in each step progress.MultiStepProgressBar-step has the following states:
MultiStepProgressBar-is-active states that user is currently in a form.MultiStepProgressBar-is-completed states that user is done with the form.<div class="section">
<div class="MultiStepProgressBar">
<div class="MultiStepProgressBar-step MultiStepProgressBar-is-active">
<svg class="MultiStepProgressBar-icon Icon Icon--circle Icon--filled Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<span>Step 1</span>
</div>
<div class="MultiStepProgressBar-step">
<svg class="MultiStepProgressBar-icon Icon Icon--circle Icon--filled Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<span>Step 2</span>
</div>
</div>
</div>
<div class="section">
<div class="MultiStepProgressBar">
<div class="MultiStepProgressBar-step MultiStepProgressBar-is-completed">
<svg class="MultiStepProgressBar-icon Icon Icon--circle Icon--filled Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<span>Step 1</span>
</div>
<div class="MultiStepProgressBar-step MultiStepProgressBar-is-active">
<svg class="MultiStepProgressBar-icon Icon Icon--circle Icon--filled Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<span>Step 2</span>
</div>
<div class="MultiStepProgressBar-step">
<svg class="MultiStepProgressBar-icon Icon Icon--circle Icon--filled Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<span>Step 3</span>
</div>
</div>
</div>
<div class="section">
<div class="MultiStepProgressBar">
<div class="MultiStepProgressBar-step MultiStepProgressBar-is-completed">
<svg class="MultiStepProgressBar-icon Icon Icon--circle Icon--filled Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<span>Step 1</span>
</div>
<div class="MultiStepProgressBar-step MultiStepProgressBar-is-completed">
<svg class="MultiStepProgressBar-icon Icon Icon--circle Icon--filled Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<span>Step 2</span>
</div>
<div class="MultiStepProgressBar-step MultiStepProgressBar-is-active">
<svg class="MultiStepProgressBar-icon Icon Icon--circle Icon--filled Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<span>Step 3</span>
</div>
<div class="MultiStepProgressBar-step">
<svg class="MultiStepProgressBar-icon Icon Icon--circle Icon--filled Icon--xxxl" title="check icon" role="img">
<use xlink:href="#check"></use>
</svg>
<span>Step 4</span>
</div>
</div>
</div>
The Pagination component is the process of dividing big documents in to a smaller documents. Pagination also know as paging.
Additional submodule classes for horizontal position of pagination links.
<div class="Pagination Pagination--position">
Also, there is an additional submodule class for current or active page link.
<a class="Pagination-number Pagination-is-active">2</a>
<nav aria-label="Page navigation">
<div class="Pagination">
<a class="Pagination-prev" href="#">
<svg class="Icon Icon--circle Icon--xxl" title="arrow left icon" role="img">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
</a>
<div class="Pagination-pages">
<a class="Pagination-number" href="#">1</a>
<a class="Pagination-number Pagination-is-active" href="#">2</a>
<a class="Pagination-number" href="#">3</a>
<a class="Pagination-number" href="#">4</a>
<a class="Pagination-number" href="#">5</a>
</div>
<a class="Pagination-next" href="#">
<svg class="Icon Icon--circle Icon--xxl" title="arrow right icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</a>
<div class="Pagination-input">
<div class="Input">
<div class="Input-field">
<input type="number">
</div>
</div>
<button class="Btn Btn--edged">Go</button>
</div>
</div>
</nav>
<nav aria-label="Page navigation">
<div class="Pagination Pagination--center">
<a class="Pagination-prev" href="#">
<svg class="Icon Icon--circle Icon--xxl" title="arrow left icon" role="img">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
</a>
<div class="Pagination-pages">
<a class="Pagination-number" href="#">1</a>
<a class="Pagination-number Pagination-is-active" href="#">2</a>
<a class="Pagination-number" href="#">3</a>
<a class="Pagination-number" href="#">4</a>
<a class="Pagination-number" href="#">5</a>
</div>
<a class="Pagination-next" href="#">
<svg class="Icon Icon--circle Icon--xxl" title="arrow right icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</a>
<div class="Pagination-input">
<div class="Input">
<div class="Input-field">
<input type="number">
</div>
</div>
<button class="Btn Btn--edged">Go</button>
</div>
</div>
</nav>
<nav aria-label="Page navigation">
<div class="Pagination Pagination--right">
<a class="Pagination-prev" href="#">
<svg class="Icon Icon--circle Icon--xxl" title="arrow left icon" role="img">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
</a>
<div class="Pagination-pages">
<a class="Pagination-number" href="#">1</a>
<a class="Pagination-number Pagination-is-active" href="#">2</a>
<a class="Pagination-number" href="#">3</a>
<a class="Pagination-number" href="#">4</a>
<a class="Pagination-number" href="#">5</a>
</div>
<a class="Pagination-next" href="#">
<svg class="Icon Icon--circle Icon--xxl" title="arrow right icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</a>
<div class="Pagination-input">
<div class="Input">
<div class="Input-field">
<input type="number">
</div>
</div>
<button class="Btn Btn--edged">Go</button>
</div>
</div>
</nav>
<nav aria-label="Page navigation">
<div class="Pagination Pagination--shrink">
<span class="Pagination-text">1-50 of 1527</span>
<a class="Pagination-prev" href="#">
<svg class="Icon Icon--circle Icon--xxl" title="arrow left icon" role="img">
<use xlink:href="#arrowLeftOutlined"></use>
</svg>
</a>
<a class="Pagination-next" href="#">
<svg class="Icon Icon--circle Icon--xxl" title="arrow right icon" role="img">
<use xlink:href="#arrowRightOutlined"></use>
</svg>
</a>
</div>
</nav>
All font sizes, line-heights, margins, etc. are defined as global base styles. Under no exceptions should these be overridden.
Paragraph: Austin adaptogen prism yuccie 90's schlitz sriracha. Authentic paleo tofu health goth, wayfarers artisan gentrify truffaut dreamcatcher freegan irony photo booth la croix everyday carry. Taiyaki chia gochujang, palo santo vaporware whatever green juice. Chia authentic offal jianbing, kickstarter bushwick echo park shoreditch quinoa air plant la croix palo santo tilde la croix everyday carry.
Secondary font: 0123456789
Fineprint: Ennui fam farm-to-table typewriter af photo booth tote bag edison bulb flexitarian trust fund thundercats +1. Godard etsy banh mi, pork belly bespoke slow-carb pok pok.<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>
<p><strong>Paragraph:</strong> Austin adaptogen prism yuccie 90's schlitz sriracha. Authentic paleo tofu health goth, wayfarers artisan gentrify truffaut dreamcatcher freegan irony photo booth <a href="">la croix everyday carry</a>. Taiyaki chia gochujang, palo santo vaporware whatever green juice. Chia authentic offal jianbing, kickstarter bushwick echo park shoreditch quinoa air plant la croix palo santo tilde <a href="" class="fine">la croix everyday carry</a>.</p>
<p class="secondary-font">Secondary font: 0123456789</p>
<small class="fineprint">Fineprint: Ennui fam farm-to-table typewriter af photo booth tote bag edison bulb flexitarian trust fund thundercats +1. Godard etsy banh mi, pork belly bespoke slow-carb pok pok.</small>
There are occasions where you may wish to style elements as headings, but with less semantic element like spans.
This is a paragraph that looks like an h3
<span class="heading-1">This is a span that looks like an h1</span>
<p class="heading-3">This is a paragraph that looks like an h3</p>
There are occasions where you may wish to style elements as headings, but with less semantic element like spans.
<h1>
Heading One
<span class="heading-subgroup">with a continuation of the heading</span>
</h1>
<div class="heading-1-group">
<h1>Heading One 123456</h1>
<span class="heading-subgroup">A subgroup of the heading.</span>
</div>