Modals
Modal dialogs for displaying content that requires user interaction.
Basic Modal
Modal Title
This is the modal body content. You can place any content here.
HTML
<button
class="ss-c-button"
onclick="document.getElementById('modal-basic').classList.add('show')"
>
Open Modal
</button>
<div id="modal-basic" class="ss-c-modal">
<div
class="ss-c-modal__overlay"
onclick="this.parentElement.classList.remove('show')"
></div>
<div class="ss-c-modal__container">
<header class="ss-c-modal__header">
<h3 class="ss-c-modal__title">Modal Title</h3>
<button
class="ss-c-modal__close"
onclick="this.closest('.modal').classList.remove('show')"
>
×
</button>
</header>
<div class="ss-c-modal__body">
<p>
This is the modal body content. You can place any
content here.
</p>
</div>
<footer class="ss-c-modal__footer">
<button
class="ss-c-button ss-c-button--secondary"
onclick="this.closest('.modal').classList.remove('show')"
>
Cancel
</button>
<button class="ss-c-button ss-c-button--primary">Confirm</button>
</footer>
</div>
</div>Modal Sizes
Small Modal
Compact modal for quick confirmations.
Large Modal
Spacious modal for detailed content or forms.
HTML
<div style="display: flex; gap: 16px; flex-wrap: wrap">
<button
class="ss-c-button"
onclick="document.getElementById('modal-sm').classList.add('show')"
>
Small
</button>
<button
class="ss-c-button"
onclick="document.getElementById('modal-lg').classList.add('show')"
>
Large
</button>
</div>
<div id="modal-sm" class="ss-c-modal ss-c-modal--small">
<div
class="ss-c-modal__overlay"
onclick="this.parentElement.classList.remove('show')"
></div>
<div class="ss-c-modal__container">
<header class="ss-c-modal__header">
<h3 class="ss-c-modal__title">Small Modal</h3>
<button
class="ss-c-modal__close"
onclick="this.closest('.modal').classList.remove('show')"
>
×
</button>
</header>
<div class="ss-c-modal__body">
<p>Compact modal for quick confirmations.</p>
</div>
</div>
</div>
<div id="modal-lg" class="ss-c-modal ss-c-modal--large">
<div
class="ss-c-modal__overlay"
onclick="this.parentElement.classList.remove('show')"
></div>
<div class="ss-c-modal__container">
<header class="ss-c-modal__header">
<h3 class="ss-c-modal__title">Large Modal</h3>
<button
class="ss-c-modal__close"
onclick="this.closest('.modal').classList.remove('show')"
>
×
</button>
</header>
<div class="ss-c-modal__body">
<p>Spacious modal for detailed content or forms.</p>
</div>
</div>
</div>Confirmation Modal
Confirm Deletion
Are you sure you want to delete this item? This action cannot be undone.
HTML
<button
class="ss-c-button ss-c-button--danger"
onclick="document.getElementById('modal-confirm').classList.add('show')"
>
Delete Item
</button>
<div id="modal-confirm" class="ss-c-modal">
<div
class="ss-c-modal__overlay"
onclick="this.parentElement.classList.remove('show')"
></div>
<div class="ss-c-modal__container">
<header class="ss-c-modal__header">
<h3 class="ss-c-modal__title">Confirm Deletion</h3>
</header>
<div class="ss-c-modal__body">
<p>
Are you sure you want to delete this item? This action
cannot be undone.
</p>
</div>
<footer class="ss-c-modal__footer">
<button
class="ss-c-button ss-c-button--secondary"
onclick="this.closest('.modal').classList.remove('show')"
>
Cancel
</button>
<button class="ss-c-button ss-c-button--danger">Delete</button>
</footer>
</div>
</div>Modals
Full-featured modal dialogs and overlay components.
Basic Modal Structure
Modal Title
This is the modal body content. You can add any content here including forms, images, or other components.
HTML
<div
class="ss-c-modal-preview"
style="
position: relative;
min-height: 400px;
background: var(--color_fill_secondary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
"
>
<!-- Modal Backdrop -->
<div
class="ss-c-modal--backdrop"
style="
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
border-radius: 12px;
"
></div>
<!-- Modal Content -->
<div
class="ss-c-modal"
style="
position: relative;
width: 90%;
max-width: 480px;
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
"
>
<div
class="ss-c-modal--header"
style="
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--color_line_secondary);
"
>
<h3 style="margin: 0; font-size: 18px">Modal Title</h3>
<button
class="ss-c-modal--close"
style="
width: 32px;
height: 32px;
border: none;
background: var(--color_fill_secondary);
border-radius: 6px;
cursor: pointer;
font-size: 16px;
"
>
✕
</button>
</div>
<div class="ss-c-modal--body" style="padding: 24px">
<p style="margin: 0; line-height: 1.6">
This is the modal body content. You can add any content
here including forms, images, or other components.
</p>
</div>
<div
class="ss-c-modal--footer"
style="
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid var(--color_line_secondary);
background: var(--color_fill_secondary);
border-radius: 0 0 12px 12px;
"
>
<button
style="
padding: 10px 20px;
border: 1px solid var(--color_line_secondary);
background: white;
border-radius: 6px;
cursor: pointer;
"
>
Cancel
</button>
<button
style="
padding: 10px 20px;
border: none;
background: var(--color_fill_primary);
color: white;
border-radius: 6px;
cursor: pointer;
"
>
Confirm
</button>
</div>
</div>
</div>Modal Sizes
✓
Success!
Your changes have been saved.
Large Modal
This is a larger modal suitable for complex content like forms, tables, or detailed information.
Column 1 content
Column 2 content
HTML
<div style="display: flex; flex-direction: column; gap: 20px">
<!-- Small Modal -->
<div
class="ss-c-modal ss-c-modal--small"
style="
max-width: 320px;
background: white;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
"
>
<div style="padding: 20px; text-align: center">
<div style="font-size: 48px; margin-bottom: 12px">✓</div>
<h4 style="margin: 0 0 8px">Success!</h4>
<p style="margin: 0 0 16px; font-size: 14px; opacity: 0.7">
Your changes have been saved.
</p>
<button
style="
padding: 10px 24px;
border: none;
background: var(--color_state_success);
color: white;
border-radius: 6px;
cursor: pointer;
"
>
OK
</button>
</div>
</div>
<!-- Large Modal -->
<div
class="ss-c-modal ss-c-modal--large"
style="
max-width: 700px;
background: white;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
"
>
<div
class="ss-c-modal--header"
style="
padding: 20px 24px;
border-bottom: 1px solid var(--color_line_secondary);
"
>
<h3 style="margin: 0">Large Modal</h3>
</div>
<div class="ss-c-modal--body" style="padding: 24px">
<p>
This is a larger modal suitable for complex content
like forms, tables, or detailed information.
</p>
<div
style="
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 16px;
"
>
<div
style="
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 8px;
"
>
Column 1 content
</div>
<div
style="
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 8px;
"
>
Column 2 content
</div>
</div>
</div>
</div>
</div>Fullscreen Modal
HTML
<div
class="ss-c-modal-preview"
style="
position: relative;
min-height: 350px;
background: #1a1a2e;
border-radius: 12px;
overflow: hidden;
"
>
<div
class="ss-c-modal ss-c-modal--fullscreen"
style="
position: absolute;
inset: 0;
background: white;
display: flex;
flex-direction: column;
"
>
<div
class="ss-c-modal--header"
style="
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid var(--color_line_secondary);
"
>
<h3 style="margin: 0; font-size: 16px">
Fullscreen Modal
</h3>
<button
style="
padding: 8px 16px;
border: none;
background: var(--color_fill_secondary);
border-radius: 6px;
cursor: pointer;
"
>
Close ✕
</button>
</div>
<div
class="ss-c-modal--body"
style="flex: 1; padding: 24px; overflow-y: auto"
>
<p>
This modal takes up the full viewport. Perfect for
immersive experiences, image galleries, or complex
workflows.
</p>
<div
style="
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 16px;
"
>
<div
style="
aspect-ratio: 1;
background: linear-gradient(
135deg,
#667eea,
#764ba2
);
border-radius: 8px;
"
></div>
<div
style="
aspect-ratio: 1;
background: linear-gradient(
135deg,
#f093fb,
#f5576c
);
border-radius: 8px;
"
></div>
<div
style="
aspect-ratio: 1;
background: linear-gradient(
135deg,
#4facfe,
#00f2fe
);
border-radius: 8px;
"
></div>
</div>
</div>
</div>
</div>Form Modal
Create Account
Fill in your details to get started
HTML
<div
class="ss-c-modal"
style="
max-width: 450px;
background: white;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
"
>
<div class="ss-c-modal--header" style="padding: 24px 24px 0">
<h3 style="margin: 0 0 8px">Create Account</h3>
<p style="margin: 0; font-size: 14px; opacity: 0.7">
Fill in your details to get started
</p>
</div>
<form class="ss-c-modal--body" style="padding: 24px">
<div style="margin-bottom: 16px">
<label
style="
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 500;
"
>
Full Name
</label>
<input
type="text"
placeholder="John Doe"
style="
width: 100%;
padding: 12px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
font-size: 14px;
box-sizing: border-box;
"
/>
</div>
<div style="margin-bottom: 16px">
<label
style="
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 500;
"
>
Email
</label>
<input
type="email"
placeholder="john@example.com"
style="
width: 100%;
padding: 12px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
font-size: 14px;
box-sizing: border-box;
"
/>
</div>
<div style="margin-bottom: 20px">
<label
style="
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 500;
"
>
Password
</label>
<input
type="password"
placeholder="••••••••"
style="
width: 100%;
padding: 12px;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
font-size: 14px;
box-sizing: border-box;
"
/>
</div>
<button
type="submit"
style="
width: 100%;
padding: 14px;
border: none;
background: var(--color_fill_primary);
color: white;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
font-weight: 500;
"
>
Create Account
</button>
</form>
<div
class="ss-c-modal--footer"
style="
padding: 16px 24px;
text-align: center;
border-top: 1px solid var(--color_line_secondary);
"
>
<p style="margin: 0; font-size: 14px; opacity: 0.7">
Already have an account?
<a href="#" style="color: var(--color_fill_primary)">
Sign in
</a>
</p>
</div>
</div>