You are currently viewing outdated (<=3.x) Chameleon documentation on our old website. For version >=4.x, check out our new website.

Current release: 3.5.0 | hub

components

Caption (code)

A Caption is meant to be an extra textual illustration of a concept.

Picture taken by a cameraman

import { Caption } from '@mediahuis/chameleon-react'

<Caption>Picture taken by a cameraman</Caption>

<Caption>Picture taken by a cameraman</Caption>

Props

Name	Type	Default	Required	Description
as	FunctionStringNodeObject	'p'	-	Change the rendered HTML tag e.g. span, p, h1
children	Node	-	true	Content for component *required
className	String	-	-	Extend classNames.
color	String	-	-	Changes the Caption's color, choose one of the tokens.
decoration	'inherit''none''underline''line-through'	'none'	-	Sets the css text-decoration property.
fontFamily	'inherit''primary''secondary''system'	'system'	-	Sets the css font-family property.
fontStyle	'inherit''normal''italic''oblique'	-	-	Sets the css font-style property.
fontWeight	'inherit''regular''medium''bold'	'regular'	-	Sets the css font-weight property.
level	12	1	-	Maps token scale to font-size and line-height
style	{}	-	-	Extend style.
textAlign	'inherit''left''right''center''justify'	'inherit'	-	Sets the css text-align property.
textTransform	'inherit''none''capitalize''uppercase''lowercase'	-	-	Sets the css text-transform property.

System Props

color

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

m, mb, ml, mr, mt, mx, my

fontWeight, fontStyle, textAlign, fontFamily, decoration, textTransform

float

display

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Color

default: colorBlackBase

You can change the caption's color by passing in a defined color name.

A title or brief explanation accompanying an illustration, cartoon, or poster

A title or brief explanation accompanying an illustration, cartoon, or poster

<Caption color="primaryDark">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption color="green70">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>

<Caption color="primaryDark">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption color="green70">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>

Decoration

default: none

Controls the text-decoration css attribute.

A title or brief explanation accompanying an illustration, cartoon, or poster

A title or brief explanation accompanying an illustration, cartoon, or poster

A title or brief explanation accompanying an illustration, cartoon, or poster

<Caption decoration="none">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption decoration="underline">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption decoration="line-through">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>

<Caption decoration="none">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption decoration="underline">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption decoration="line-through">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>

FontFamily

default: system

Font-families can be used to discern between multiple uses of a Caption.

A title or brief explanation accompanying an illustration, cartoon, or poster

A title or brief explanation accompanying an illustration, cartoon, or poster

A title or brief explanation accompanying an illustration, cartoon, or poster

<Caption fontFamily="primary">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption fontFamily="secondary">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption fontFamily="system">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>

<Caption fontFamily="primary">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption fontFamily="secondary">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption fontFamily="system">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>

FontWeight

default: regular

Controls the font-weight css attribute. Only 3 values are available. If a value is missing, it will fallback on the more bold weight.

A title or brief explanation accompanying an illustration, cartoon, or poster

A title or brief explanation accompanying an illustration, cartoon, or poster

A title or brief explanation accompanying an illustration, cartoon, or poster

A title or brief explanation accompanying an illustration, cartoon, or poster

<Caption fontWeight="inherit">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption fontWeight="regular">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption fontWeight="medium">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption fontWeight="bold">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>

<Caption fontWeight="inherit">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption fontWeight="regular">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption fontWeight="medium">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption fontWeight="bold">
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>

Level

default: 1

Captions of lower importance can be displayed by altering the level prop.

A title or brief explanation accompanying an illustration, cartoon, or poster

A title or brief explanation accompanying an illustration, cartoon, or poster

<Caption level={1}>
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption level={2}>
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>

<Caption level={1}>
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>
<Caption level={2}>
  A title or brief explanation accompanying an illustration, cartoon, or poster
</Caption>

TextAlign

default: inherit

Controls the css text-align attribute.

Inherit.

Left.

Right.

Center.

Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify.

<Caption textAlign="inherit">
  Inherit.
</Caption>
<Caption textAlign="left">
  Left.
</Caption>
<Caption textAlign="right">
  Right.
</Caption>
<Caption textAlign="center">
  Center.
</Caption>
<Caption textAlign="justify">
  Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify.
</Caption>

<Caption textAlign="inherit">
  Inherit.
</Caption>
<Caption textAlign="left">
  Left.
</Caption>
<Caption textAlign="right">
  Right.
</Caption>
<Caption textAlign="center">
  Center.
</Caption>
<Caption textAlign="justify">
  Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify Justify.
</Caption>