Powered by    Algolia
What's New?
Getting Started
Foundations
Accessibility
Components
Layout
CSS Utilities
Animation
Borders
Box Shadow
Colors
Cursors
Display
Filters
Object Fit
Opacities
Position
Spacing
SVG
Text
User Select
Powered by Got It, Inc.Slack

    Text

    Text is the main object in chat application as our products. We defined a collection of typography which is optimized to be highly legible, performs well in our products.

    Font family

    We use sans serif font and Roboto font is chosen for our type. Beside that, we also use Courier font for visualize code.

    Use when you are linking just a few words of text, or when a link is standalone. Do not use for actions, instead use a button. Links use B300 color and are not underlined except on hover.

    Paragraph

    More Examples

    CSS classNameProperties
    Sizes
    .u-text100
    The quick brown fox
    		font-size: 12px, line-height: 16px
    .u-text200
    The quick brown fox
    		font-size: 14px, line-height: 20px
    .u-text300
    Tag: p
    The quick brown fox
    		font-size: 16px, line-height: 24px
    .u-text400
    The quick brown fox
    		font-size: 18px, line-height: 28px
    .u-text500
    The quick brown fox
    		font-size: 20px, line-height: 28px
    .u-text600
    The quick brown fox
    		font-size: 24px, line-height: 32px
    .u-text700
    The quick brown fox
    		font-size: 28px, line-height: 36px
    .u-text800
    The quick brown fox
    		font-size: 32px, line-height: 40px
    .u-text900
    The quick brown fox
    		font-size: 36px, line-height: 44px
    .u-text1000
    The quick brown fox
    		font-size: 40px, line-height: 52px
    .u-text1100
    The quick brown fox
    		font-size: 44px, line-height: 52px
    .u-text1200
    The quick brown fox
    		font-size: 52px, line-height: 64px
    Styles
    .u-fontRegular
    The quick brown fox jumps over the lazy dog
    		Font weight
    .u-fontMedium
    The quick brown fox jumps over the lazy dog
    		Font weight
    .u-fontBold
    The quick brown fox jumps over the lazy dog
    		Font weight
    .u-fontItalic
    The quick brown fox jumps over the lazy dog
    		Font style
    .u-fontReset
    The quick brown fox jumps over the lazy dog
    		Reset the font-weight and font-style values to be "normal"
    Alignment
    .u-textLeft
    The quick brown fox jumps over the lazy dog
    .u-textCenter
    The quick brown fox jumps over the lazy dog
    .u-textRight
    The quick brown fox jumps over the lazy dog
    Transform
    .u-textTransformNone
    The quick brown fox jumps over the lazy dog
    		No capitalization. The text renders as it is. This is default.
    .u-textLowercase
    The quick brown fox jumps over the lazy dog
    .u-textCapitalize
    The quick brown fox jumps over the lazy dog
    .u-textUppercase
    The quick brown fox jumps over the lazy dog
    Wrap and Truncate
    .u-textNoWrap
    The quick brown fox jumps over the lazy dog
    .u-textWordBreak
    The-quick-brown-fox-jumps-over-the-lazy-dog-The-quick-brown-fox-jumps-over-the-lazy-dog
    		To prevent overflow, word may be broken at arbitrary points
    .u-textWordBreakAll
    AaaaaaaaaaBbbbbbbbbbCcccccccccDdddddddddEeeeeeeeeeFfffffffffGgggggggggHhhhhhhhhhIiiiiiiiiJjjjjjjjjjKkkkkkkkkk...XxxxxxxxxxYyyyyyyyyyZzzzzzzzzz
    		To prevent overflow, word may be broken at any character
    .u-textPreLine
    N/A
    		Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
    .u-textPreWrap
    N/A
    		Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
    .u-textTruncate
    Design system is a set of rules and UI library which helps us to build the UI template faster and keep the consistency.
    		Apply the class "Table--layoutFixed" to the table if the text is inside a table
    .u-textTruncate2
    Design system is a set of rules and UI library which helps us to build the UI template faster and keep the consistency.
    .u-textTruncate3
    Design system is a set of rules and UI library which helps us to build the UI template faster and keep the consistency.
    .u-textTruncate4
    Design system is a set of rules and UI library which helps us to build the UI template faster and keep the consistency.
    .u-textTruncate5
    Design system is a set of rules and UI library which helps us to build the UI template faster and keep the consistency.
    Line height
    .u-lineHeightReset
    Design system is a set of rules and UI library which helps us to build the UI template faster and keep the consistency.
    .u-lineHeightSmall
    Design system is a set of rules and UI library which helps us to build the UI template faster and keep the consistency.
    .u-lineHeightMedium
    Design system is a set of rules and UI library which helps us to build the UI template faster and keep the consistency.
    .u-lineHeightNone
    Design system is a set of rules and UI library which helps us to build the UI template faster and keep the consistency.
    Others
    .u-textUnderline
    The quick brown fox jumps over the lazy dog
    .hover:u-textUnderline
    The quick brown fox jumps over the lazy dog
    .u-textDecorationNone
    The quick brown fox jumps over the lazy dog
    .u-textLineThrough
    The quick brown fox jumps over the lazy dog
    .hover:u-textLineThrough
    The quick brown fox jumps over the lazy dog
    Powered by Got It, Inc.Slack