spuerkeess-design-system-production

Brand Foundations
Components
Examples
Resources

Assets

Download zipped assets

ATTENTION: S-Net styles are located in css/snet.css

Download compiled component html

Search

documentation

Overview
- Overview
- - Sassdoc
- Box Shadow
- Breakpoints
- Colors
- Font
- Icon
- Radius
- Sizes
- Spacings
- Z Index
Assets

components

- - Btn Tile
  - Button Group
  - Captcha
  - List
  - Message
  - Split Btn
  - Table
  - Toggle Tab

Information

Version:: 2.1.1
Built on:: 11/19/2024

Btn Highlight Variants

Default
Icon Left

Btn Primary Variants

Default
Full Width
Icon Left
Icon Right
Disabled
Icon Left Disabled
Icon Right Disabled
Small
Small Disabled
Loading

Btn Secondary Variants

Default
Full Width
Icon Left
Icon Right
Disabled
Icon Left Disabled
Icon Right Disabled
Small
Small Icon Left
Small Icon Right
Small Disabled
Loading
Icon Left Collapse Trigger

Btn Secondary Inverse Variants

Default
Full Width
Icon Left
Icon Right
Disabled
Icon Left Disabled
Icon Right Disabled
Small
Small Icon Left
Small Icon Right
Small Disabled
Loading
No Padding
No Padding Small

Btn Label Outside Variants

Primary
Secondary
Secondary Inverse

Icon Btn Primary Variants

Default
Active
Disabled
Loading
Big
Disabled Big
Small

Icon Btn Regular Variants

Default
Secondary 10
Secondary 100

Icon Btn Secondary Variants

Default
Big
Has Label
Active
Notification Active
Ghost
Disabled
Disabled Loading
Small
Collapse Trigger

Icon Btn Secondary Inverse Variants

Default
Active
Disabled
Loading
Small
Big
Disabled Big

Info Dot Variants

Disabled
Left
Top
Bottom
Right
Small
Modal
Modal Small

Hint Variants

Text
Error
Link

Label Variants

Default
Form
Form Large
Success
Error
Success Large
Error Large
Optional
Div
Info Dot
Info Dot Modal

Switch Variants

Default
Disabled
Disabled Checked
Loading Disabled
Loading Disabled Checked
Small
Small Label Outside

Avatar Variants

Medium
Nopic
Extra Small
Small
Large
Extra Large
Image
Image Extra Small
Image Small
Image Large
Image Extra Large
Disabled
Square
Icon
Bfm Pro Badge
Bfm Pro Badge Small
Bfm Pro Badge Large
Bfm Pro Badge Extra Large
Tooltip
Small Tooltip
User Bank
Bank No Img
Bank Img

Banner Variants

Default
Highlight
Large
Medium

Icon Block Variants

Default
Extra Small
Small
Large
Xl
2 Xl
Inverse

Icon Block Mia Variants

Alimentation
Animal
Toy
Epargne Invest
Logement
Loisirs
Mobilite
Prets
Restaurant
Retraits
Sante
Services
Shopping
Allocation
Liquidation
Loyer
Remboursement
Salaire
Ventes
Depenses
Entrees
Produit Investissement

Media Variants

Default
Xs
Sm
Lg
Xl
Brand Icon
Background
Border
Fallback
Fetch

Section Variants

Default
Sunken
Inverted

Alert Banner Variants

Default
Success
Warning
Info
Danger

Box Variants

Flat
Flat Bordered
Sunken
Raised
Overlaid
Highlight
Highlight Outline
Warning
Warning Outline
Danger
Danger Outline
Success
Success Outline
Neutral Outline

Popover Variants

Default
Card

Amount Variants

Default
Positive
Negative
Processing
Highlight
Negative Faded
Small
Medium
Small Positive
Small Negative
Small Negative Faded
Large
Large Positive
Large Negative
Small Negative Faded
Xtra Large
Xtra Large Secondary 100
Xtra Large Positive
Xtra Large Positive Frequency
Xtra Large Negative
Xtra Large Negative
Body Xxl

Badge Variants

Default
Primary
Primary Large
Primary Small
Primary Icon
Primary Muted
Primary Muted Icon
Primary Tonal
Highlight
Highlight Muted
Highlight Muted Small
Success
Success Muted
Danger
Danger Muted
Warning
Warning Muted
Info
Info Muted
Neutral
Neutral Muted
Success 10 Icon
Primary 10 Icon

Badge Selector Variants

Default
Selected
Disabled
Large
Cta
Text
Color Option
Color Option Label Hidden

Choice Chip Variants

Default
Disabled
Checked

Circle Variants

Default
Recurrent
Valid
Disabled
Finance
Plus
Minus
Loading
Loading Big

Color Option Variants

Default
Small

Count Badge Variants

Default
Primary
Primary Small

Energy Badge Variants

Default
Circle Smaller
A
B
C
D
E
F
G
H
I

Checkbox Variants

Default
Checked
Indeterminate
Loading
Disabled
Checked Disabled
Error
Hint
Alert
Alert Link
Alert Optional
Alert Error
Collapse
Info Dot

Checkbox Dot Variants

Default
Checked
Indeterminate
Disabled
Checked Disabled
No Input
No Input Active
Loading
Loading Checked
Loading Indeterminate

Form Disclaimer Variants

Default
Link
Small
Medium

Input Variants

Default
Shadow
Shadow Icon
Shadow Large
Shadow Xl
Shadow 2 Xl
Calendar
Calendar Small
Calendar Inline
Disabled
Disabled Icon
Readonly
Icon Right
Error
Hint
Multiple
Multiple Disabled
Autocomplete
Autocomplete Selected
Autocomplete Dropdown
Search
Search Bg White
Search Bg White Large
Search Focused
Search Focused Value
Search Blur Value
Phone
Phone Custom Prefix
Phone Error
Btn

Radio Variants

Default
Checked
Disabled
Loading
Checked Disabled
Error
Hint

Radio Dot Variants

Default
Checked
Disabled
Checked Disabled
No Input
No Input Active
Loading
Loading Checked

Search Variants

Default
Focused
Search Query
Loading
Search Result Displayed
Search Result Displayed Filters Active
Small
Small All Actions
Inverted
Inverted Tab Filters
Language Selector

Select Variants

Default
Hint
Disabled
Readonly
Error
Inline Large

Textarea Variants

Default
Error
Message

Heading Variants

H 1
H 2
H 3
H 4
H 5
H 1 Subtext
H 2 Subtext
H 3 Subtext
H 4 Subtext
H 5 Subtext

Icon Circle Mia Variants

Alimentation
Animaux
Enfants
Epargne Invest
Logement
Loisirs
Mobilite
Prets
Restos
Retraits
Sante
Services
Shopping
Allocation
Liquidation
Loyer
Remboursement
Salaire
Ventes
Depenses
Entrees
Produit Investissement

Icon Circle Regular Variants

Icon Circle Text Variants

Phone
E Mail

Link Variants

Default
Icon Left
Icon Right
Icon Left Right
Highlight

Loader Variants

Default
Xs
Sm
Lg
Xl

Popover Variants

Default
Feedback
Reset

Skeleton Unit Variants

Default
Small
Icon Circle
Circle
H 1
H 2
H 3
H 4
H 5
Text Helper Small
Text Helper
Text Body
Text Body Large
Form Group
Btn
Btn Small

Btn Tile Variants

Default
Success 100
Primary 100

Button Group Variants

Default
Wrap
Overflow

Captcha Variants

Default
Svg
Error
Satisfaction
Cta
Satisfaction Big
Text
Text Words
Text Large
Text Large Words
Nps
Nps Cam

Checkbox Group Variants

Default
Group Error
Group Hint

Form Group Variants

Default
Optional
Select
Shadow Action
Textarea

Radio Group Variants

Default
Group Error
Group Error Individual State
Group Hint

Range Variants

Default
Has Indicator
Fixed Variable Rate
Disabled

Spot Select Variants

Default
Checked
Error
Info Dot
Disabled
Loading
No Img
No Text No Img
No Title No Img
Rounded Img
Rounded Img Checked
Message
Message Shown
Centered
Checked Disabled
Checkbox
Checkbox Error
Checkbox Disabled
Checkbox Checked Disabled

List Variants

Default
Checked
Checked Alt
Checked Alt Disabled
Checked Alt Unavailable
Ordered

Message Variants

Default
Options
Button
Light

Table Variants

Default
Striped
Has Border
Header Left
Footer Header Left
Account
Vertical Separator

Toggle Tab Variants

Default
Tabs
Tabs Full Width
Checkbox

Icon Circle Frame Variants

Default
Icon Text

Input Variants

Default
Calendar

Avatar Text Variants

Default
Locked
Number Circle Big Highlight 30
Number Circle Big Info 100

Dismissible Account Card Variants

Default
Gestionnaire

Dropdown Variants

Default
Search
Search Active
Reorder
Calendar
Calendar Custom Selected
Scroll

List Item Variants

Default
Transaction State
Info Circle Btn
Title

Progress Variants

Warning 100
Warning 140
Highlight 100
Success 100

Actions List Variants

Default
All
Empty

Chart Display Variants

Default
2

Modal Variants

Default
Detail Demande
Detail Demande Documents
Ajout Equipe
Repetitive Form Fields
Gestion Acces User
Gestion Acces Action
Gestion Acces Droits
Confirmation Btns

Nav Variants

Default
User Menu Shown
Landing
Stepper

Page Dashboard Variants

Default
Alert Message
Alert Toast
Multiple Alert Toasts

Page Demandes Variants

Default
Empty

Page Demandes Detail Variants

Initiee
Validation Quatre Yeux
Soumise
Acceptee
Refusee

Page Due Diligence Variants

Default
Empty

Page Entites Variants

Default
Reorder Dropdown Shown
Empty

Page Gestion Access Variants

Collaborateurs
Equipe
Entites
Collaborateurs Empty
Collaborateurs Blocked
Equipe Detail Empty
Equipe Detail
Max Height Table Example

Page Notifications Variants

Default
Actions
Empty
Empty Actions
Empty W Actions

Page Nouvelle Demande Variants

Default
Intro
Loading

Frame Variants

Default
Step

Input Variants

Default
Calendar
Calendar Inline

Calendar Day Variants

Default
Overtime Positive
Overtime Negative
Icon Footer
Two Icon Footer
Day Off
Current Day
Holiday
Half Holiday

Day Overview Variants

Default
Day Off
Anomaly
Danger
Overtime
Shorttime

Time Recap Variants

Default
Secondary 100
Success 100
Warning 120

Timer Variants

Default
Active

Modal Variants

Default
Calendar Textarea
Stepper Spot Select
Stepper Info Table
Img Text Btn
Radio Groups
Radio Group Input
Stepper Calendars
Stepper Calendar
Stepper Calendar Shown

Schedule Overview Variants

Default
Balance

Section Item Variants

Default
Positive
Negative
Reservation

Demandes Variants

Default
Empty

Animation Transfer Variants

Default
Wallet Loop
Clock
Lightning
Ok
Error
Payment Types
Registered Order
Validation Partielle

Animation Transfer New Variants

Default
Wallets
Delayed
Express
Valid
Error
Partial Validation
Registered Order

Announce Bubble Variants

Default
Warning
Critical

Chip Variants

Default
Active
Disabled

Dot Variants

Default
Primary
Highlight
Success
Danger
Warning
Info
Neutral

Icon Header Variants

Default
Bfm

Item Connector Variants

Default
Icon Circle Small
Avatar Extra Small

Number Circle Variants

Default
Large
Link
Link Large
Link Light
Link Light Large
Info 100
Highlight 30 Large
Secondary 100 Large
Highlight 30 Xl

Transaction State Variants

Paid
Paid Small
Processing
Processing Small
Cross Validation
Cross Validation Small
Closed
Closed Small
Actif
Actif Small
Rejected
Rejected Small
Cancelled
Cancelled Small
Highlight
Highlight Small
Disabled Info Dot

Account Info Variants

Default
Small
Small Whitelisted
No Avatar
Meta Small No Avatar

Account Selector Variants

Default
Amount Negative
Disabled

Action Card Variants

Default
Small
Small Description
Description
Action
Description Action
Icon Circle
Icon Circle Action

Action Menu Variants

Default
Mouvements Cartes
Checkboxes
Radios
Energy Badges
Months
With Filter Button
With Header

Alert Variants

Info 30
Primary 30
Success 30
Warning 30
Spot Selects
Info 30 Dismissible
Success 100
Primary 100
Warning 100
Warning 100 Confirmation
Wrapper Warning
Wrapper

Arrow Amount Variants

Default
Centered
Meta Info
Padding Left Meta

Avatar Group Variants

Default
Small
Overlap Shadow

Avatar Text Variants

Small
Extra Small
Large Btn
Large Btn Link
Medium
Text Helper
Number Circle Text Helper
Meta

Banner Old Variants

Default
Button
Background
Background Large
Cta
Page Cover

Bordered Bg List Variants

Default
No Truncate

Circular Completion Variants

Default
Add Project
Services
Services Complete
Loisirs Complete

Dismissible Account Card Variants

Default
Amount Visible
Amount Visible No Btn
Amount Visible Label
Beneficiary
Beneficiary No Btn

Distribution Item Variants

Meta
Icon
Legend Item

Account Card Variants

Default
Whitelisted
Amount Hidden

Frame Content Bottom Bar Variants

Default
Active
Cgu
Eurotransfert Controle Transaction
One Btn
Transactions

Img Upload Variants

Default
Loading
Upload Complete
Box
Box Upload
Box Big
Box Small
Box Small Upload
Box Small Complete
Box Small Complete Multiple Actions
Error

List Item Variants

Default
Link
Link No Icon
No Icon Rounded
No Icon Rounded Avatar
Helper Text
Button Rounded
Btn Group
Avatar Btn
Dom Header
Operation
Operation
User Bank Btn
User Bank Icon Btn
Action
Icon Helper Btn
Icon Circle Items
Icon Circle Items Small
Helper Btn

Months Picker Variants

Default
Error
No Range

Product Card Variants

Default
Small

Progress Variants

Default
Negative No Bg
Positive No Bg
Negative Two Values
Small Black
Stepper
Xtrasmall Primary Badge
Xtrasmall Success Badge
Validity
Validity No Progress

Search Growing Variants

Default
Open
Open Bg White
Search Btn Clicked

Section Title Variants

Default
Amount
Transaction Paid No Toggle
Transaction Paid
Transaction Processing
Transaction Closed
Transaction Rejected
Transaction Cancelled
Loading

Sitfin Card Variants

Default
Rounded
Rounded Border Dashed
Rounded Border Dashed Visa
Middle Icon
Middle Icon Line
Middle Icon Line Negative Limit
Loading
Visa Icon
Amount Helper
Amount Multiple Helpers

Step Input Variants

Default
No Beneficiary
Three
Three Autocomplete
Three Autocomplete Beneficiary Selected
Three Autocomplete Selected
Two
Two Beneficiary Selected

Stock Card Variants

Default
Negative
Mini

Upload Base Variants

Default
Disabled
Error
Complete
Loading
Image
Image Uploaded

Upload Big Variants

Default
Disabled
Error
Complete
Loading

Upload Image Variants

Default
Loading
Complete
Error
Disabled

Video Player Variants

Default
V 2 Video Tag
V 3 Iframe
V 3 Disclaimer
V 3 Video Tag
Poster

Actions List Variants

Default
Footer
Domiciliations
Ordres Permanents

Actions List Block Variants

Default
Multiple Lists

Activity Log Variants

Default
No Avatar
No Connector
Confirmation Timeline
All Statuses

Amount Card Variants

Default
Info
Timesheet

Communications List Variants

Default
Empty

Configurator Modal Variants

Default
Step 2

Module Variants

Default
Switch
Multiple Switches

Contact Block Variants

Default
Recap
Action Card

Empty State Variants

Default
Big
No Result
Has Background
Title Text

Expenses Card Variants

Default
Inactive Items
Empty

Filters Bar Variants

Default
Notification Cancel
Notification Validate

Info Table Variants

Default
Box
Has Icon
Periodicite
Empty
Collapse
Horizontal Table Inside

Input Recap Variants

Default
Has Close

List Item Detail Variants

Default
Beneficiaires
Ordres Permanents

Login Block Variants

Default
Text
Bfm

Modal Base Variants

Modal No Background Variants

Default
Change Account
Video Card

Modal Transfer Variants

Loading
Express
Delayed
Valid
Error

Nav Variants

Default
No Actions
Notifs Empty
Has Notifs
Has Notif Actions
Bfm
Landing

Panel Header Variants

Default
Edit
Mouvements Cartes
Notification Accueil
Notification Transactions
Paiements Domiciliations
Ordres Permanents
Only Title

Recap Card Base Variants

Default
File
Charts
Charts Empty
Consent

Recap Card Consent Progress Variants

Default
Expires Soon
Expired

Section Form Variants

Default
Message
Spot Message
Spot Message Shown
Agences
Confirmation
Recap
Time Picker
Pret Hyp
Pret Hyp Multiple

Section Item Variants

Default
Timeline Notif
Timeline Checkbox
Timeline Item
Timeline Big Icon
Timeline Detail
Timeline Loading
Timeline Load More
Timeline Loading Externe
Timeline Detail Mouvements Compte
Timeline Detail Mouvements Compte Externe
Newscenter
Newscenter Notif
Newscenter Svg
Newscenter Btn
Timeline Status

Section Item Detail Variants

Default
Mouvements Compte
Mouvements Compte Externe

Simulator Result Card Variants

Default
Interaction Hint

Sitfin Block Variants

Default
Loading
Epargne
Investissement
Investissement No Account
Pret
No Action One Row

Transaction Table Block Variants

Default
Empty
Ordres Valides

Time Picker Variants

Default
Slider

Timeline Variants

Default
Mouvements Comptes
Mouvements Comptes Externes
Mouvements Empty

Transaction Block Variants

Default
Date Edit
No Validation
Transaction Chain Item
Additional Transaction
Accepetd
Rejected
Not Collapsible
No Actions Multiple Rows
No Total
Suivi Transactions Detail
Suivi Transactions Detail Info
Suivi Transactions Detail Unique
Only Header

Transaction Block Old Variants

Default
Date Edit
No Validation
Transaction Chain Item
Additional Transaction
Accepetd
Rejected
Not Collapsible
No Actions Multiple Rows
No Total
Suivi Transactions Detail
Suivi Transactions Detail Info
Suivi Transactions Detail Unique

Transaction Chain Variants

Default
Validate

Transaction Edit Block Variants

Default

User Menu Variants

Default
Bfm
Small

Simulation Depot Variants

Default
Loading

Saisie Depots Variants

Default
Selected Account

Mouvements Cartes Variants

Default
Content Loading

Mouvements Comptes Variants

Default
Empty
Empty Futurs

Mouvements Search Variants

Default
Loading
Results

Notification Accueil Variants

Default
Empty

Start Variants

Default
1
3
4

Product Page Variants

Default
Message

Activer Conventions Variants

Default
Welcome

Store Search Variants

Default
Loading
Results

Autres Virements Variants

Landing
Controle Des Donnees
Beneficaire Saisi

Eurotransfert Variants

Landing
Beneficiaire Choisi
2 Eme Transaction
2 Eme Transaction Saisie Donnees
2 Eme Transaction Nouvelle Transaction
3 Eme Transaction Eliminee
Controle Transaction

Import Fichiers Variants

Default
Import Error
Loading
Upload Complete
Loading Modal
Sign
Send

Ordres Permanents Variants

Default
Communication Montant Dates
Controle Donnees Saisies
Landing

Suivi Transactions Variants

Default
Ordres Valides
Ordres A Valider
Historique Des Ordres

Flux Pret Hyp Variants

Default
Message
Infos
Infos Empty
Infos Form
Energy
File Upload

Prise De Rdv Pret Hyp Variants

Default
Message
Collapse
Spot Message Shown
Agences
Confirmation
Recap
Time Picker

Sitfin Variants

Default
Loading
No Account

Speedinvest Variants

Default
Transactions
No Funds

Store Page Variants

Default
No Nav

Page Frame Variants

Default
No Menu
Has Submenu
Bfm
Bfm Dropdown
Step

Section Form Frame Variants

Default
Full Height

Device Variants

Default
Desktop

Advanced Select Item Variants

Default
No Img
Dropdown Trigger
Dropdown Trigger No Img

Content Block List Variants

Default
Icon

Content Box Variants

Default
Info
Important
Success
Warning
Link
Modal
Info Outline
Important Outline
Success Outline
Warning Outline

Document Variants

Default
Nopic
Row
Row Small
Column
Column Nopic

Employee Card Variants

Default
Row
Row Separator Horizontal
Row Separator Horizontal No Action

Feature Icon Box Variants

Default
Modal Link
External Link
Link
Column
Column Centered
Column Centered Icon Big

Highlighted Article Variants

Default
Gradient
Big
Shape Bridge
Shape Tower
Nopic

Icon Link Box Variants

Default
External
Row
Social
Spot Meta

Language Switcher Variants

Default
Search Modal

Mia Animation Variants

Default
Progress
Objectives

Navigation Tile Variants

Default
Selected
Small
Large
Icon Btn
Mia
Media

Picture Link Box Variants

Default
Vertical
Big
Search Item
Product
Search Item Product

Quote Variants

Default
Blue
No Quotes
Small

Switch Mode Variants

Default

Blog Article Variants

Default
Nopic
Filters

Comparison Table Variants

Default
Buttons

Contextual Links Variants

Default
Link External
Modal Trigger
Accordion
Inverted

Decision Help Variants

Default
No Collapse

Document List Variants

Default
Inverted

Dynamic Question Variants

Default
Result Offset

Blog Embed Variants

Default
Loading

Housing Embed Variants

Default
Loading

Loan Embed Variants

Default
Spot
Input
Range
Recap
Loading
Recap Loading

Pret Personnel Embed Variants

Default
Loading

Header Variants

Default
Stepper
Blog
Landing
Main

Lease Offer Variants

Default
Highlight
Custom

Lease Offer Simulator Variants

Default
Nopic

Links Icon Box Variants

Default
Highlight
Header Row

Cookie Modal Variants

Default
Info
Parametres

Modal Base Variants

Default
Popup

Nav Variants

Default
Landing
Cobranding
Main

Obligation Card Variants

Default
Loading

Opening Hours Variants

Default
Sunken

Overflow Nav Variants

Default
Blog

Page Cover Variants

Default
Shape Tower
Shape Bridge
Shape Bridge Events
Text Only
Spot Illu

Precious Metal Variants

Default
Nopic
Loading

Predefined Appointment Variants

Default

Product Column Variants

Default
Small Img
No Img
Spot
Spot Small
Spot Footer
Spot Footer Img Top
Spot Footer Img Small Top

Product Row Variants

Default
Small
Small Img Big

Product Detail Variants

Default
Summary

Search Modal Variants

Default
Loading
No Results

Slider Variants

Default
Inverted
Documents
Documents Contained
Overflow Visible
Lease
Product
Img Gallery
Wysiwyg

Spot Select List Variants

Default
Aligned Md
Error

Table Inputs Variants

Default
Actions

Demande Rdv Variants

Default
Agency List
Agency List Empty

Mifidii Page Variants

Default
Table

Page Events Variants

Default
Subscribed
Inscription

Pret Hyp Variants

Default
Options

Simulator Logement Page Variants

Default
Spot Selects

Snet Guide Variants

Default
Menu Detail
Detail