Integrations
Integration grids, logo walls and connected app cards.
Integration Logo Grid
Slack
GitHub
Figma
Stripe
Google
Discord
Shopify
Notion
Trello
Jira
GitLab
Dropbox
<div class="uk-int-grid">
<div class="uk-int-tile">
<i class="fab fa-slack" style="color:#4A154B;"></i>
<div class="uk-int-tile-name">Slack</div>
</div>
<div class="uk-int-tile">
<img src="https://cdn.simpleicons.org/notion/000000" alt="Notion"
width="28" height="28" style="height:28px;width:28px;object-fit:contain;">
<div class="uk-int-tile-name">Notion</div>
</div>
</div>
<style>
.uk-int-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.75rem;
}
.uk-int-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1.25rem 0.75rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
transition: all 0.15s;
cursor: pointer;
min-height: 100px;
}
.uk-int-tile:hover {
transform: translateY(-2px);
border-color: rgba(30, 58, 138, 0.4);
box-shadow: 0 12px 24px rgba(30, 58, 138, 0.08);
}
.uk-int-tile i { font-size: 1.65rem; }
.uk-int-tile-name {
font-size: 0.78rem;
font-weight: 600;
color: #475569;
}
</style>
Monochrome Logo Wall
<div class="uk-int-wall">
<i class="fab fa-slack"></i>
<i class="fab fa-github"></i>
<img src="https://cdn.simpleicons.org/figma/cbd5e1" width="32" height="32">
<img src="https://cdn.simpleicons.org/stripe/cbd5e1" width="32" height="32">
</div>
<style>
.uk-int-wall {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 1rem;
}
.uk-int-wall i {
font-size: 2rem;
color: #cbd5e1;
transition: color 0.15s;
}
.uk-int-wall i:hover { color: #1e3a8a; }
.uk-int-wall img {
transition: filter 0.15s, opacity 0.15s;
}
.uk-int-wall img:hover { opacity: 1; }
</style>
Connected Apps List
Slack
Send notifications to your channels
Connected
GitHub
Sync repositories and pull requests
Connected
Figma
Embed designs directly in comments
Stripe
Accept payments and manage subscriptions
<div class="uk-int-card">
<div class="uk-int-card-icon" style="background:#4A154B;">
<i class="fab fa-slack"></i>
</div>
<div class="uk-int-card-body">
<div class="uk-int-card-title">Slack</div>
<div class="uk-int-card-desc">Send notifications</div>
</div>
<div class="uk-int-card-status connected">
<i class="fas fa-check-circle"></i> Connected
</div>
</div>
<!-- For brands using Simple Icons: -->
<div class="uk-int-card-icon" style="background:#F24E1E;">
<img src="https://cdn.simpleicons.org/figma/ffffff" width="22" height="22">
</div>
<style>
.uk-int-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.15rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
transition: all 0.15s;
}
.uk-int-card:hover { border-color: rgba(30, 58, 138, 0.3); }
.uk-int-card-icon {
width: 44px; height: 44px;
border-radius: 0.65rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.15rem;
flex-shrink: 0;
overflow: hidden;
}
.uk-int-card-body { flex: 1; min-width: 0; }
.uk-int-card-title {
font-size: 0.9rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-int-card-desc {
font-size: 0.78rem;
color: #94a3b8;
margin-top: 2px;
}
.uk-int-card-status {
font-size: 0.78rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
.uk-int-card-status.connected { color: #059669; }
.uk-int-card-btn {
padding: 0.4rem 1rem;
background: #1e3a8a;
color: #fff;
border: 0;
border-radius: 0.5rem;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
}
.uk-int-card-btn:hover { background: #0f2a5c; }
</style>
Integration Directory
Slack
GitHub
Stripe
Figma
<div class="uk-int-search">
<i class="fas fa-magnifying-glass"></i>
<input type="text" placeholder="Search 100+ integrations...">
</div>
<div class="uk-int-cats">
<button class="uk-int-cat active">All</button>
<button class="uk-int-cat">Communication</button>
</div>
<div class="uk-int-directory">
<div class="uk-int-dir-item">
<div class="uk-int-dir-icon" style="background:#4A154B;">
<i class="fab fa-slack"></i>
</div>
<div class="uk-int-dir-name">Slack</div>
<i class="fas fa-plus uk-int-dir-add"></i>
</div>
</div>
<style>
.uk-int-search {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.7rem 1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
margin-bottom: 0.85rem;
transition: all 0.15s;
}
.uk-int-search:focus-within {
border-color: #1e3a8a;
box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.08);
}
.uk-int-search i { color: #94a3b8; font-size: 0.85rem; }
.uk-int-search input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font-size: 0.85rem;
}
.uk-int-cats {
display: flex;
gap: 0.35rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.uk-int-cat {
padding: 0.35rem 0.9rem;
background: #f1f5f9;
color: #475569;
border: 0;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.uk-int-cat:hover { background: #e2e8f0; color: #1e3a8a; }
.uk-int-cat.active { background: #1e3a8a; color: #fff; }
.uk-int-directory {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.5rem;
}
.uk-int-dir-item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 0.85rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.65rem;
transition: all 0.15s;
cursor: pointer;
}
.uk-int-dir-item:hover { border-color: rgba(30, 58, 138, 0.4); }
.uk-int-dir-icon {
width: 32px; height: 32px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
flex-shrink: 0;
overflow: hidden;
}
.uk-int-dir-name {
flex: 1;
font-size: 0.83rem;
font-weight: 600;
color: #0b1b2f;
}
.uk-int-dir-add { font-size: 0.75rem; color: #1e3a8a; }
</style>
Featured Integration Hero
Connect Slack to WebNexa
Get real-time updates, mentions and alerts delivered directly to your channels.
<div class="uk-int-hero">
<div class="uk-int-hero-icons">
<div class="uk-int-hero-icon" style="background:#4A154B;">
<i class="fab fa-slack"></i>
</div>
<div class="uk-int-hero-connector">
<span></span><span></span><span></span>
</div>
<div class="uk-int-hero-icon" style="background:#1e3a8a;">
<i class="fas fa-cube"></i>
</div>
</div>
<h3 class="uk-int-hero-title">Connect Slack to WebNexa</h3>
<p class="uk-int-hero-desc">Get real-time updates.</p>
<div class="uk-int-hero-actions">
<button class="uk-int-hero-btn primary">Add to Slack</button>
<button class="uk-int-hero-btn">Learn more</button>
</div>
</div>
<style>
.uk-int-hero {
text-align: center;
padding: 2.5rem 2rem;
background: linear-gradient(180deg, #eef2f8 0%, #f9fafc 100%);
border: 1px solid #e2e8f0;
border-radius: 1.25rem;
}
.uk-int-hero-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1.25rem;
}
.uk-int-hero-icon {
width: 64px; height: 64px;
border-radius: 1rem;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.65rem;
box-shadow: 0 12px 24px rgba(30, 58, 138, 0.15);
}
.uk-int-hero-connector { display: flex; gap: 4px; }
.uk-int-hero-connector span {
width: 6px; height: 6px;
border-radius: 50%;
background: #cbd5e1;
animation: pulse-dot 1.5s infinite;
}
.uk-int-hero-connector span:nth-child(2) { animation-delay: 0.3s; }
.uk-int-hero-connector span:nth-child(3) { animation-delay: 0.6s; }
@keyframes pulse-dot {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.uk-int-hero-title {
font-size: 1.35rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.5rem;
}
.uk-int-hero-desc {
font-size: 0.9rem;
color: #64748b;
max-width: 440px;
margin: 0 auto 1.5rem;
line-height: 1.6;
}
.uk-int-hero-actions {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
.uk-int-hero-btn {
padding: 0.65rem 1.5rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.85rem;
border: 1.5px solid #e2e8f0;
background: #fff;
color: #475569;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.15s;
}
.uk-int-hero-btn:hover { border-color: #1e3a8a; color: #1e3a8a; }
.uk-int-hero-btn.primary {
background: #1e3a8a;
color: #fff;
border-color: #1e3a8a;
}
.uk-int-hero-btn.primary:hover { background: #0f2a5c; color: #fff; }
</style>
Integration Stats & CTA
120+
Integrations
1M+
Daily syncs
99.9%
Uptime
Don't see your tool?
<div class="uk-int-stats">
<div class="uk-int-stat">
<div class="uk-int-stat-value">120+</div>
<div class="uk-int-stat-label">Integrations</div>
</div>
<div class="uk-int-stat-divider"></div>
<div class="uk-int-stat">
<div class="uk-int-stat-value">1M+</div>
<div class="uk-int-stat-label">Daily syncs</div>
</div>
</div>
<div class="uk-int-cta">
<div class="uk-int-cta-text">Don't see your tool?</div>
<button class="uk-int-cta-btn">Request an Integration</button>
</div>
<style>
.uk-int-stats {
display: flex;
align-items: center;
justify-content: space-around;
padding: 1.5rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
margin-bottom: 0.75rem;
}
.uk-int-stat { text-align: center; }
.uk-int-stat-value {
font-size: 1.5rem;
font-weight: 800;
color: #1e3a8a;
line-height: 1;
}
.uk-int-stat-label {
font-size: 0.72rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-top: 0.35rem;
}
.uk-int-stat-divider {
width: 1px;
height: 40px;
background: #e2e8f0;
}
.uk-int-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
background: #0b1b2f;
color: #fff;
border-radius: 1rem;
flex-wrap: wrap;
}
.uk-int-cta-text {
font-weight: 700;
font-size: 0.9rem;
}
.uk-int-cta-btn {
padding: 0.5rem 1.15rem;
background: #fff;
color: #1e3a8a;
border: 0;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.8rem;
cursor: pointer;
}
</style>