Colors

Color Text (jds-text-[value] - foreground, background, white, primary, success, warning, error, info, tertiary, gray)
jds-text-foreground
jds-text-gray
jds-text-background
jds-text-primary
jds-text-success
jds-text-warning
jds-text-error
jds-text-info
jds-text-tertiary
 
We can change colors with viewport/responsive

jds-text-[value] - primary, success, warning, error, info, tertiary, gray

 

Text Color Testing With Viewport/Responsive

 
All Background Together (jds-bg-[value] - primary, success, warning, error, info, tertiary, gray)
 
jds-bg-foreground

Black Color

jds-bg-gray

Gray Color

jds-bg-background

White Color

jds-bg-primary

Primary Color

jds-bg-success

Success Color

jds-bg-warning

Warning Color

jds-bg-error

Error Color

jds-bg-info

Info Color

jds-bg-tertiary

Tertiary Color



Background Colors Details (jds-bg-[value] - foreground, background, primary, success, warning, error, info, tertiary, gray)

Primary background
  • Primary Fade
    jds-bg-primary-fade #62C6FF
  • Primary Darker
    jds-bg-primary-darker #002242
  • Primary Dark
    jds-bg-primary-dark#00305E
  • Primary
    jds-bg-primary #155C9E
  • jds-bg-primary90 #155C9E 90%
  • jds-bg-primary80 #155C9E 80%
  • jds-bg-primary70 #155C9E 70%
  • jds-bg-primary60 #155C9E 60%
  • jds-bg-primary50 #155C9E 50%
  • jds-bg-primary40 #155C9E 40%
  • jds-bg-primary30 #155C9E 30%
  • jds-bg-primary20 #155C9E 20%
  • jds-bg-primary10 #155C9E 10%
Success background
  • Success Fade
    jds-bg-success-fade #83CF5F
  • Success Darker
    jds-bg-success-darker #253000
  • Success Dark
    jds-bg-success-dark#435700
  • Success
    jds-bg-success #80A408
  • jds-bg-success90 #80A408 90%
  • jds-bg-success80 #80A408 80%
  • jds-bg-success70 #80A408 70%
  • jds-bg-success60 #80A408 60%
  • jds-bg-success50 #80A408 50%
  • jds-bg-success40 #80A408 40%
  • jds-bg-success30 #80A408 30%
  • jds-bg-success20 #80A408 20%
  • jds-bg-success10 #80A408 10%
Warning background
  • Warning Fade
    jds-bg-warning-fade #EC9D41
  • Warning Darker
    jds-bg-warning-darker #403A08
  • Warning Dark
    jds-bg-warning-dark#745A19
  • Warning
    jds-bg-warning #EC8400
  • jds-bg-warning90 #EC8400 90%
  • jds-bg-warning80 #EC8400 80%
  • jds-bg-warning70 #EC8400 70%
  • jds-bg-warning60 #EC8400 60%
  • jds-bg-warning50 #EC8400 50%
  • jds-bg-warning40 #EC8400 40%
  • jds-bg-warning30 #EC8400 30%
  • jds-bg-warning20 #EC8400 20%
  • jds-bg-warning10 #EC8400 10%
Error background
  • Error Fade
    jds-bg-error-fade #F58383
  • Error Darker
    jds-bg-error-darker #601B0C
  • Error Dark
    jds-bg-error-dark#9A3B26
  • Error
    jds-bg-error #FF3C11
  • jds-bg-error90 #FF3C11 90%
  • jds-bg-error80 #FF3C11 80%
  • jds-bg-error70 #FF3C11 70%
  • jds-bg-error60 #FF3C11 60%
  • jds-bg-error50 #FF3C11 50%
  • jds-bg-error40 #FF3C11 40%
  • jds-bg-error30 #FF3C11 30%
  • jds-bg-error20 #FF3C11 20%
  • jds-bg-error #FF3C11 10%
Info background
  • Info Fade
    jds-bg-info-fade #42DCE5
  • Info Darker
    jds-bg-info-darker #25536C
  • Info Dark
    jds-bg-info-dark#2597D6
  • Info
    jds-bg-info #15D5FF
  • jds-bg-info90 #15D5FF 90%
  • jds-bg-info80 #15D5FF 80%
  • jds-bg-info70 #15D5FF 70%
  • jds-bg-info60 #15D5FF 60%
  • jds-bg-info50 #15D5FF 50%
  • jds-bg-info40 #15D5FF 40%
  • jds-bg-info30 #15D5FF 30%
  • jds-bg-info20 #15D5FF 20%
  • jds-bg-info10 #15D5FF 10%
Tertiary background
  • Tertiary Fade
    jds-bg-tertiary-fade #3ECFCF
  • Tertiary Darker
    jds-bg-tertiary-darker #016363
  • Tertiary Dark
    jds-bg-tertiary-dark#0E7E7E
  • Tertiary
    jds-bg-tertiary #00A1A1
  • jds-bg-tertiary90 #00A1A1 90%
  • jds-bg-tertiary80 #00A1A1 80%
  • jds-bg-tertiary70 #00A1A1 70%
  • jds-bg-tertiary60 #00A1A1 60%
  • jds-bg-tertiary50 #00A1A1 50%
  • jds-bg-tertiary40 #00A1A1 40%
  • jds-bg-tertiary30 #00A1A1 30%
  • jds-bg-tertiary20 #00A1A1 20%
  • jds-bg-tertiary10 #00A1A1 10%
Gray background
  • Gray Fade
    jds-bg-gray-fade #BEBEBE
  • Gray Darker
    jds-bg-gray-darker #2B2B2B
  • Gray Dark
    jds-bg-gray-dark#434343
  • Gray
    jds-bg-info #686868
  • jds-bg-gray90 #686868 90%
  • jds-bg-gray80 #686868 80%
  • jds-bg-gray70 #686868 70%
  • jds-bg-gray60 #686868 60%
  • jds-bg-gray50 #686868 50%
  • jds-bg-gray40 #686868 40%
  • jds-bg-gray30 #686868 30%
  • jds-bg-gray20 #686868 20%
  • jds-bg-gray10 #686868 10%
 
We can change Background colors with viewport/responsive

jds-bg-[value] - primary, success, warning, error, info, tertiary, gray

 

Background Color Testing With Viewport/Responsive

Background Gradiant (jds-bg-gradiant-[value] - primary, success, warning, error, info, tertiary, gray)

jds-bg-gradiant-light
jds-bg-gradiant-background
jds-bg-gradiant-forground
jds-bg-gradiant-gray
jds-bg-gradiant-primary
jds-bg-gradiant-success
jds-bg-gradiant-warning
jds-bg-gradiant-error
jds-bg-gradiant-info
Background Gradiant with 2 color

jds-bg-gradient-primary-success
2 Color Gradiant | Angle 0 o

jds-bg-gradient-primary-success
2 Color Gradient | Angle 45 o

jds-bg-gradient-primary-success
2 Color Gradient | Angle 90 o

jds-bg-gradient-success-warning
2 Color Gradient | Angle 0 o

jds-bg-gradiant-success-warning45
2 Color Gradient | Angle 45 o

jds-bg-gradiant-success-warning
2 Color Gradient | Angle 90 o

jds-bg-gradiant-warning-error
2 Color Gradient | Angle 0 o

jds-bg-gradiant-warning-error45
2 Color Gradient | Angle 45 o

jds-bg-gradiant-warning-error90
2 Color Gradient | Angle 90 o

jds-bg-gradiant-warning-error
2 Color Gradient | Angle 0 o

jds-bg-gradiant-warning-error
2 Color Gradient | Angle 45 o

jds-bg-gradiant-warning-error
2 Color Gradient | Angle 90 o

jds-bg-gradiant-info-primary
2 Color Gradient | Angle 0 o

jds-bg-gradiant-info-primary
2 Color Gradient | Angle 45 o

jds-bg-gradiant-info-primary
2 Color Gradient | Angle 90 o

Background Gradiant with multiple color

jds-bg-gradient-multicolor
Multiple Color Gradient | Angle 0 o

jds-bg-gradiant-multicolor
Multiple Color Gradient | Angle 45 o

jds-bg-gradiant-multicolor
Multiple Color Gradient | Angle 90 o

Backdrop Filter

If we set the transparent background color, then we can use the background blur. So we can see the background contains blury/glow underneath.

You can use CSS class filter-blur4, filter-blur8, filter-blur12

Title goes here

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla odit officiis dicta commodi.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla odit officiis dicta commodi.

You see the inner box background is transparent and blur. CSS class we use here filter-blur8, jds-bg-primary20

Table Head thead Backdrop Filter

N Plan Name Relius Id Status Product Product Category
2 Academy Capital Management 401(k) Profit Sharing Plan 0009710 Departed BF - July 401k Balance Forward
3 Bailey Insurance & Risk Management, Inc. 401(k) Plan 0013210 Active Massmutual (HF) Admin Only
4 Charles W. Weathers, D.D.S. 401(k) Plan 0010510 Departed BF - July 401k Balance Forward
5 Donald Ray Miller, P.C. Money Purchase Pension Plan 0010810 Terminated BF - July 401k Balance Forward
6 Donald Ray Miller, P.C. Profit Sharing Plan 0010811 Terminated BF - July 401k Balance Forward
7 Wilkirson-Hatch-Bailey Funeral Home, Inc. 401(k) Plan 0007410 Active Massmutual (HF) Admin Only
8 J. Clifton Williams, M.D. Money Purchase Pension Plan 0289310 Terminated BF - July 401k Balance Forward
9 James William Ferguson, M.D. Money Purchase Pension Plan 0011610 Merged BF - July 401k Balance Forward
10 James William Ferguson, M.D. Profit Sharing Plan 0011611 Terminated BF - July PS/MPPP Balance Forward
11 David W. Osterman, M.D., P.A. 401(k) Plan 0010710 Terminated BF - July 401k Balance Forward
12 Robert G. Nowlin, D.D.S. Profit Sharing Plan 0012010 Terminated BF - July 401k Balance Forward
13 Central Texas Neurological Association Profit Sharing Plan 0010110 Departed BF - July 401k Balance Forward
14 Center for Occupational Research & Development Money Purchase Pension Plan 0010210 Departed 401Kontrol - July Bundled
15 CORD Communications, Inc. 401(k) Plan 0004410 Departed 401Kontrol - July Bundled
16 Mattson Financial Services 401(k) Plan 0011810 Departed BF - July 401k Balance Forward