This kit uses default
color by default, and can be replaced with colors below:
light
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
import React from 'react' import { Body } from '../../' const BodyLight = (props) => { return ( <div> <Body text="I am a body kit (Default)" {...props} /> <Body color="light" text="I am a body kit (Light)" {...props} /> <Body color="lighter" text="I am a body kit (Lighter)" {...props} /> <Body color="link" text="I am a body kit (Link)" {...props} /> <Body color="error" text="I am a body kit (Error)" {...props} /> <Body color="success" text="I am a body kit (Success)" {...props} /> </div> ) } export default BodyLight
import React from 'react' import { Body } from '../../' const BodyBlock = (props) => { return ( <div> <Body {...props}> {'I am a body kit'} </Body> </div> ) } export default BodyBlock
Playbook styles the b
, strong
and a
tags within the body kit to match Playbook's design system.
import React from 'react' import { Body } from '../..' const BodyStyled = (props) => { return ( <div> <Body {...props}> <b>{"This text is using the <b> tag"}</b> <br /> <br /> <strong>{"This text is using the <strong> tag"}</strong> <br /> <br /> <a href="#">{"This text is using the <a> tag"}</a> </Body> </div> ) } export default BodyStyled
import React from 'react' import { Caption } from '../../' const CaptionLight = (props) => { return ( <div> <Caption text="Caption" {...props} /> <Caption size="lg" text="Caption Large" {...props} /> <Caption size="xs" text="Subcaption" {...props} /> </div> ) } export default CaptionLight
import React from 'react' import { Caption } from '../../' const CaptionBlock = (props) => { return ( <div> <Caption {...props}> {'Block'} </Caption> <Caption size="lg" {...props} > {'Large Block'} </Caption> <Caption size="xs" {...props} > {'Subcaption Block'} </Caption> </div> ) } export default CaptionBlock
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
import React from 'react' import { Caption } from '../../' const CaptionColors = (props) => { return ( <div> <Caption text="Test colors" {...props} /> <Caption color="success" text="Test colors" {...props} /> <Caption color="error" text="Test colors" {...props} /> <Caption color="link" text="Test colors" {...props} /> </div> ) } export default CaptionColors
Title kit will use h3
tag by default, and size 3
as well.
Size and tag props are not in correlation with each other, meaning any size can be used along with any tag.
import React from 'react' import Title from '../_title' const TitleDefault = (props) => { return ( <div> <Title text="Default Title" {...props} /> <br /> <Title size={1} tag="h1" text="Title 1" {...props} /> <Title size={2} tag="h2" text="Title 2" {...props} /> <Title size={3} tag="h3" text="Title 3" {...props} /> <Title size={4} tag="h4" text="Title 4" {...props} /> </div> ) } export default TitleDefault
Title size 1
will use font-weight: 700
by default, if you want a lighter font weight, use the bold
prop set to false
.
Title size 2
& size 3
uses a light font weight by default and will not accept a bold font weight.
Title size 4
uses a heavy font weight by default and will not accept a lighter font weight.
import React from 'react' import Title from '../_title' const TitleLightWeight = (props) => { return ( <div> <Title bold={false} size={1} tag="h1" text="Title 1" {...props} /> </div> ) } export default TitleLightWeight
Title kit will use default
color by default. Other available colors are:
*light
lighter
success
error
link
import React from 'react' import Title from '../_title' const TitleColors = (props) => { return ( <div> <Title text="Default Color" {...props} /> <Title color="link" size={3} tag="h1" text="Title Color" {...props} /> <Title color="success" size={3} tag="h1" text="Title Color" {...props} /> <Title color="error" size={3} tag="h1" text="Title Color" {...props} /> </div> ) } export default TitleColors