spuerkeess_logo_neg
Created with Sketch.
spuerkeess-design-system-production
Brand Foundations
Components
Examples
Resources
Breakpoints
Variable name
Value
$breakpoint-xs
0
$breakpoint-sm
576px
$breakpoint-md
768px
$breakpoint-lg
992px
$breakpoint-xl
1200px
$breakpoint-xxl
1600px
Search
documentation
Overview
Contributing
Adding Design Tokens
Preparing Component Addition
Adding A Component
Embed Figma File In Component
Component Checklist
Activate Dark Theme
Css Docs
Overview
Sassdoc
Sassdoc
Design Tokens
Box Shadow
Breakpoints
Colors
Font
Icon
Radius
Sizes
Spacings
Z Index
Assets
components
Token Based
Actions And Inputs
Button
Common Button
Button Highlight
Button Primary
Button Secondary
Button Secondary Inverse
Icon Button
Btn Label Outside
Icon Button Primary
Icon Button Regular
Icon Button Secondary
Icon Button Secondary Inverse
Info Dot
Label
Switch
Content
Avatar
Brand Line
Content Section
Media
Feedback And Indicators
Tooltip
Navigation
Footer
Surfaces
Popover
Base Components
Atoms
Amount
Badge
Badge Selector
Choice Chip
Circle
Color Option
Count Badge
Energy Badge
Forms
Checkbox
Checkbox Dot
Form Disclaimer
Input
Radio
Radio Dot
Search
Select
Textarea
Heading
Helper Action
Hero Heading
Icon Block
Icon Circle
Icon Circle Product
Icon Circle Mia
Icon Circle Regular
Icon Circle Text
Link
Loader
Loader Lottie
Nopic
Nopic Adviser
Nopic Book
Nopic Business
Nopic Car
Nopic Date
Nopic Document
Nopic Documenttext
Nopic Edit
Nopic Greatbell
Nopic Infocircleborder
Nopic Ingot
Nopic Pin
Nopic Questionmark
Nopic Search
Nopic Shoppingbag
Nopic Smileysatisfied
Nopic Spuerkeesslogo
Nopic Spuerkeesslogocircle
Nopic Ventes
Nopic World
Popover
Skeleton Unit
Skip Nav Link
Molecules
Btn Tile
Button Group
Captcha
Forms
Checkbox Group
Form Group
Radio Group
Range
Spot Select
List
Message
Split Btn
Table
Toggle Tab
Frames
Button
Icon Btn
Icon Circle Frame
Corporate Bridge
Atoms
Forms
Input
Molecules
Avatar Text
Checkbox Number Circle
Dismissible Account Card
Dropdown
Heading Block
List Item
Progress
Radio Number Circle
Shortcut Menu
Organisms
Actions List
Chart Display
Forms
Repetitive Form Fields
Frame Content Bottom Bar
Modal
Nav
Recap Card
Section Form Item
Nouvelle Demande
Section Form Step 1
Section Form Step 2
Section Form Step 3
Section Form Step 3 1
Section Form Step 4
Section Form Step 5
Section Form Step 6
Section Form Step 6 1
Section Form Step 7
Section Form Step 8
Section Form Step Final 1
Section Form Step Final 1 Loading
Tabs
Link Tabs
User Menu
Pages
Page Dashboard
Page Demandes
Page Demandes Detail
Page Due Diligence
Page Entites
Page Gestion Access
Page Notifications
Page Nouvelle Demande
Page User Menu
Frame
My Spuerkeess
Atoms
Forms
Input
Molecules
Action Menu
Calendar Controls
Calendar Day
Day Overview
Shortcut Menu
Time Overview
Time Recap
Timer
Organisms
Calendar
Modal
Panel Header
Schedule Overview
Section Item
Stepper
Pages
Dashboard
Demandes
History
Reservations
Frames
Page Frame
My Spuerkeess main frame
Snet
Atoms
Animation Transfer
Animation Transfer New
Announce Bubble
Bordered Image
Chip
Circular Progress
Dot
Icon Header
Item Connector
Number Circle
Transaction State
Molecules
Account Info
Account Selector
Action Card
Action Menu
Alert
Arrow Amount
Avatar Group
Avatar Text
Banner
Bordered Bg List
Circular Completion
Cropper
Dismissible Account Card
Distribution Item
Fake Video Trigger
Form Elements
Account Card
Frame Content Bottom Bar
Heading Btn
Img Upload
Info Illustration
List Item
Months Picker
Product Card
Progress
Search Growing
Section Title
Shortcut Card
Sitfin Card
Step Input
Stock Card
Store Card
Upload
Upload Base
Upload Big
Upload Image
Video Card
Video Player
Organisms
Actions List
Actions List Block
Activity Log
Amount Card
Amount Summary Header
Card Stepper
Communications List
Configurator
Configurator Modal
Module
Contact Block
Empty State
Expenses Card
Filters Bar
Info Table
Input Focus Message
Input Recap
List Item Detail
Loading Box
Login Block
Mobile Stepper
Modal
Modal Base
Modal No Background
Modal Transfer
Nav
Panel Header
Recap Card
Recap Card Base
Recap Card Consent Progress
Search Header
Section Form
Section Item
Section Item Detail
Section Item Timeline
Simulator Result Card
Sitfin Block
Status List
Status Timeline
Table Recap
Tables
Transaction Table Block
Tabs
Link Tabs
Time Picker
Timeline
Transaction Block
Transaction Block Old
Transaction Chain
Transaction Edit Block
User Menu
Pages
Bfm
Situation Financiere
Gestion Beneficiaire
Gestion Entite
Depot A Terme
Simulation Depot
Saisie Depots
Introjs
Mailbox Pages
Mouvements
Mouvements Cartes
Mouvements Comptes
Mouvements Comptes Externes
Mouvements Search
Notification
Notification Accueil
Transactions
Transactions Accueil
Transactions Validation Singuliere
Transactions Validation Tout
Transactions Validation Elimination
Transactions Elimination
Documents Et Alertes
Newscenter
Onboarding
Acces Conventions
Start
Pas De Compte
Cgu
Sitfin Pro
Gestion Des Societes
Store
Product Page
Decouvrir Espace Professionnel Loading
Activer Conventions
Store Search
Page Empty State
Page Loading
Paiements
Autres Virements
Domiciliations
Eurotransfert
Import Fichiers
Ordres Permanents
Suivi Transactions
Pret Hyp
Introduction
Flux Pret Hyp
Prise De Rdv
Gestion
Prise De Rdv Pret Hyp
Raccourcis
Sitfin
Speedinvest
Store Page
Frames
Actions List Frame
Modal Frame
Modal Base Frame
Modal No Background Frame
SNET Main Page Frame
Panel Header Frame
Section Frame
Section Form Frame
Timeline Frame
Upload Frame
Spuerkeess Site
Atoms
Device
Lease Offer Image
Frames
Digital Signage Layout
Digital Signage Landscape Layout
Digital Signage Portrait Layout
Page Layout
Molecules
Advanced Select Item
Audyo Player
Blog Filters
Breadcrumbs
Content Block List
Content Box
Coupon
Coupon Partner
Document
Document Download
Employee Card
Feature Icon Box
Figcaption
Highlighted Article
Icon Link Box
Language Switcher
Map Pin
Mia Animation
Navigation Tile
Picture Link Box
Quote
Speechbubble
Switch Mode
Organisms
Advanced Select
Blog Article
Categorized Coupons List
Comparison Table
Contact Footer
Contextual Links
Decision Help
Document List
Document Slider
Dynamic Question
Embeds
Blog Embed
Housing Embed
Loan Embed
Pret Personnel Embed
Exchange Rate Calculator
Feature Icon Box List
Header
Highlighted Article List
Lease Offer
Lease Offer Detail
Lease Offer Simulator
Lease Plus Form
Lease Slider
Links Icon Box
Modal
Cookie Modal
Modal Base
Nav
New Mobile Version
Obligation Card
Obligation List
Opening Hours
Overflow Nav
Page Cover
Photo Gallery
Popup Info
Precious Metal
Precious Metal Grid
Predefined Appointment
Product
Product Column
Product Row
Product Detail
Product Feature Details
Product Features
Related Articles
Scroll To Nav
Search Modal
Service Point List Map
Simulators
Cedies Simulator
Logement Simulator
Slider
Speechbubble Cover
Speedinvest Doughnut
Spot Select List
Table
Table Inputs
Testimonial Slider
Timeline Story
Wysiwyg
Pages
Afficher Agence
Blog Page
Demande Rdv
Digital Signage
Digital Signage Formations
Digital Signage Luxfunds
Digital Signage Luxfunds Landscape
Digital Signage Luxfunds Portrait
Error Page Snet
Lease Plus
Lease Offer Detail Page
Lease Offers Page
Mifidii Page
Page Events
Pret Hyp
Simulator Logement Page
Snet Guide
Test Page
Information
Version:
2.1.1
Built on:
10/4/2024
Back
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
Disabled
Big
Disabled Big
Smaller
Icon Btn Regular Variants
Default
Secondary 10
Secondary 100
Icon Btn Secondary Variants
Default
Big
Has Label
Active
Notification Active
Ghost
Disabled
Disabled Loading
Smaller
Collapse Trigger
Icon Btn Secondary Inverse Variants
Default
Disabled
Smaller
Big
Disabled Big
Info Dot Variants
Disabled
Left
Top
Bottom
Right
Small
Modal
Modal Small
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
Content Section Variants
Default
Elevated
Elevated Inverted
Media Variants
Default
2 Xs
Xs
Lg
Xl
Brand Icon
Background
Border
Fallback
Fetch
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 Block Variants
Default
Extra Small
Small
Large
Inverse
Success Inverse
Danger Inverse
Warning Inverse
Info Inverse
Highlight Inverse
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
Default
Ghost
Secondary 60
Secondary 10
Secondary 15 Small
Secondary 100 Outline Small
Not Selected
Secondary 10 Svg
Secondary 10 Big
Secondary 10 Big Svg
Secondary 100
Info 100
Success 100
Success 10
Highlight 100
Primary 100
Primary 100 Outline Smaller
Warning 120 Outline Smaller
Warning 10
Warning 10 Small
Warning 100 Smaller
Secondary 100 Small
Secondary 10 Small
Info 100 Small
Success 100 Small
Success 100 Stroke Smaller
Success 100 Outline Smaller
Success 100 Smaller
Info 100 Big
Info 100 Big
Success Gradient
Primary Gradient Small
Icon Circle Text Variants
Phone
E Mail
Link Variants
Default
Icon Left
Icon Right
Icon Left Right
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 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