Typography


Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as variables that you can use in components or custom CSS.

  • Typographic styles
  • Word-break
  • Text alignment
  • Badges
  • Responsive text alignment
  • Font Width utilities
  • Line height styles
  • Heading utilities
  • List styles
  • Text Shadows


Basically we use "Open Sans" or "Roboto" font family in san-sarif group
And "Times New Roman" using sarif group

font-family-san-sarif :- Open Sans.

font-family-sarif :- Times New Roman.



Typographic styles

We usually use "Open Sans" and "Roboto" as font family, But "Open Sans" Is tested with July Design System.

Change the font weight, styles, and alignment with these utilities.



  • Normal text

    Class: jds-text-normal

  • Italic

    Class: jds-text-italic

  • Uppercase

    Class: jds-text-upercase

  • No wrap

    Class: jds-no-wrap

  • Normal whitespace

    Class: jds-ws-normal

  • Text underline

    Class: jds-text-underline

  • Horizontal Cut Line with tag "s"

    No class Needed use "s" tag

  • Delete Line With tag "del"

    No class Needed use "del" tag

  • No underline

    Class: jds-no-underline

  • Emphasized

    Class: jds-text-emphasized

  • Small

    Class: jds-text-small

  • Wrap

    Class: jds-text-wrap

  • no-wrap

    Class: jds-no-wrap

  • Bold

    Class: jds-text-bold

  • Font Weight Light, 300

    Class: jds-font-weight-light, jds-font-weight-s, jds-font-weight-300

  • Font Weight Regular, 400

    Class: jds-font-weight-regular, jds-font-weight-m, jds-font-weight-400

  • Font Weight Semi-bold, 600

    Class: jds-font-weight-semi-bold, jds-font-weight-l, jds-font-weight-600

  • Font Weight Bold, 800

    Class: jds-text-bold, jds-font-weight-bold, jds-font-weight-xl, jds-font-weight-800

  • Font Weight Block, 900

    Class: jds-font-weight-block, jds-font-weight-xxl, jds-font-weight-900




H1 / BODY

We Support Advisors (h1)

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,

H2 / BODY

We Support Employers (h2)

With a strong focus on customer service, we make plan setup and operation simple and easy. Our flexible, comprehensive service model combined with dedicated,knowledgeable




font size will be different in different place and different section

Type , Tag Weight Font size Line height Letter spacing Class Name

H1

 Light, 300 36 42 0.2 px .h1 .jds-text-xxl .font-size-xxl

H2

 Regular, 400 28 34 0 px .h2 .jds-text-xl .font-size-xl

H3

 Semi-bold, 600 24 28 0.1 px .h3 .jds-text-l .font-size-l

H4

 Regular, 400 20 24 0.2 px .h4 .jds-text-s .font-size-s
H5
 Semi-bold, 600 16 18 0.2 px .h5 .jds-text-xs .font-size-xs
H6
 Semi-bold, 600 14 16 0.2 px .h6 .jds-text-xxs .font-size-xxs
Title Semi-bold, 600 14 16 0.2 px .title .jds-text-xxs .font-size-xxxs
Subtitle Semi-bold, 600 10 12 0.1 px subtitle
Body Regular, 400 14 18 0.2 px none
span Regular, 400 14 18 0.2 px .span .jds-text-span
Linlk Regular, 400 14 18 0.2 px .link jds-text-link
Big Regular, 400 16 22 0.2 px .big .jds-text-big
Small Regular, 400 12 16 0.1 px .small .jds-text-small
Button Regular,600 14 22 0.1 px .jds-btn
Paragraph Regular, 400 14 18 0.1 px none
 

vertical Alignment Classes

We can set vertical Alignment in any contain. Like CSS class:-

v-align-auto, v-align-baseline, v-align-bottom , v-align-middle, v-align-sub, v-align-super , v-align-text-bottom, v-align-text-top, v-align-top , v-align-unset

vertical Alignment Bottom (v-align-bottom) vertical Alignment Middle (v-align-middle) vertical Alignment Top (v-align-top)
 

Word-break

We can set Word-break in a contain or word. CSS class:-

jds-word-break-normal, jds-word-break-keep-all, jds-word-break-break-all

word-break-normal

jds-word-break-normal

Loremipsumdolor sitametconsecteturadipisicingelit. Remcumquenamquaeporropossimusvoluptatumofficiis magnilaborumnecessitatibus, consecteturdebitisisteeumni hillaudantiumesse pariaturveniam!Accusantium?

word-break-keep-all

jds-word-break-keep-all

Loremipsumdolor sitametconsecteturadipisicingelit. Remcumquenamquaeporropossimusvoluptatumofficiis magnilaborumnecessitatibus, consecteturdebitisisteeumni hillaudantiumesse pariaturveniam!Accusantium?

word-break-break-all

jds-word-break-break-all

Loremipsumdolor sitametconsecteturadipisicingelit. Remcumquenamquaeporropossimusvoluptatumofficiis magnilaborumnecessitatibus, consecteturdebitisisteeumni hillaudantiumesse pariaturveniam!Accusantium?

 

Text Alignment


Text Alignment Left

.jds-text-left

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem cumque nam quae porro possimus voluptatum officiis magni laborum ad necessitatibus, consectetur debitis iste eum nihil laudantium esse pariatur veniam! Accusantium?

Text Alignment Center

jds-text-center

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem cumque nam quae porro possimus voluptatum officiis magni laborum ad necessitatibus, consectetur debitis iste eum nihil laudantium esse pariatur veniam! Accusantium?

Text Alignment Right

jds-text-right

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem cumque nam quae porro possimus voluptatum officiis magni laborum ad necessitatibus, consectetur debitis iste eum nihil laudantium esse pariatur veniam! Accusantium?

Text Alignment Justify

jds-text-justify

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem cumque nam quae porro possimus voluptatum officiis magni laborum ad necessitatibus, consectetur debitis iste eum nihil laudantium esse pariatur veniam! Accusantium?



Text Alignment With Media Class


Text Alignment Left Then in Medium Screen Alignment Left

jds-text-left, jds-m-text-right

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem cumque nam quae porro possimus voluptatum officiis magni laborum ad necessitatibus, consectetur debitis iste eum nihil laudantium esse pariatur veniam! Accusantium?

Text Alignment Different in Different Screen Size

jds-text-right, jds-m-text-left, jds-s-text-center

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem cumque nam quae porro possimus voluptatum officiis magni laborum ad necessitatibus, consectetur debitis iste eum nihil laudantium esse pariatur veniam! Accusantium?



Font Weight and clacess

Contain look Like Weight Class Name

Building Retirement Security.

 Light, 300 .jds-font-width-300 .jds-font-width-s .jds-font-weight-light

Building Retirement Security.

 Regular, 400 .jds-font-width-400 .jds-font-width-m .jds-font-weight-regular

Building Retirement Security.

 Semi-bold, 600 .jds-font-width-600 .jds-font-width-l .jds-font-weight-semi-bold

Building Retirement Security.

 bold, 800 .jds-font-width-800 .jds-font-width-xl .jds-font-weight-bold

Building Retirement Security.

 Extra-bold 900 .jds-font-width-900 .jds-font-width-xxl .jds-font-weight-block


Text Transform Classes

Some css class we need to manipulate our typography (font famely - Open Sans)

.jds-text-upercase, .jds-text-lowercase, .jds-text-capitalize, .jds-text-unset

Text Upercase
jds-text-upercase

Asset-based fees will be automatically deducted from plan assets quarterly. Your Investment Advisor will charge a fee of .25%, .50%, .75%, 1.00% or 1.25% depending on your plan size and on the specific services provided.

Text Lowercase
jds-text-lowercase

Asset-based fees will be automatically deducted from plan assets quarterly. Your Investment Advisor will charge a fee of .25%, .50%, .75%, 1.00% or 1.25% depending on your plan size and on the specific services provided.

Text Capitalize
jds-text-capitalize

Asset-based fees will be automatically deducted from plan assets quarterly. Your Investment Advisor will charge a fee of .25%, .50%, .75%, 1.00% or 1.25% depending on your plan size and on the specific services provided.

Text unset
jds-text-unset

Asset-based fees will be automatically deducted from plan assets quarterly. Your Investment Advisor will charge a fee of .25%, .50%, .75%, 1.00% or 1.25% depending on your plan size and on the specific services provided.





Line height styles

Change the line height density with these utilities. Responsive variants are also available

line-height : 1, 1.5, 2, 2.5, 3

.jds-line-height-s, .jds-line-height-m, .jds-line-height-l, .jds-line-height-xl .jds-line-height-xxl

Line Height 1
.jds-line-height-s

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,

Line Height 1.5
.jds-line-height-m

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,

Line Height 2
.jds-line-height-l

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,

Line Height 2.5
.jds-line-height-xl

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,

Line Height 3
.jds-line-height-xxl

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,

Since 1994 we've built long-lasting relationships through our guiding principles: uncompromising excellence, a servant's heart and collaborative spirit. JULY is a proven, trusted business partner committed to the retirement plan market,



Typographic Heading utilities

For Text alignment we can use some class



H5 tag goes here -Document List