11.12.1

Caption

Use to provide supplementary context. Default size is best when providing supplementary context to a small section (i.e. label for a text input, label for a paragraph). Use large caption when supplementary text covers more content.

Default

Caption
Caption Large
Subcaption

Block

Block
Large Block
Subcaption Block

Colors

Test colors
Test colors
Test colors

Prop

Caption kit will use light color by default. Other available colors are:

  • default lighter success error link

  • These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it


  • Things to Avoid

    If the text gets very long when using default or large size, use a different typography style.

    UI Samples using Caption Kit

    Get the full picture. See how this kit is used in our samples.

    Available Props

    • classname
    • dark
    • margin
    • margin_bottom
    • margin_left
    • margin_right
    • margin_top
    • margin_x
    • margin_y
    • max_width
    • padding
    • padding_bottom
    • padding_left
    • padding_right
    • padding_top
    • padding_x
    • padding_y
    • z_index
    • number_spacing
    • shadow
    • line_height
    • display
    • cursor
    • flex_direction
    • flex_wrap
    • justify_content
    • justify_self
    • align_items
    • align_content
    • align_self
    • flex
    • flex_grow
    • flex_shrink
    • order
    • id
    • data
    • aria
    • children
    • size
    • tag
    • text
    • variant
    • color