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 status="negative" text="I am a body kit (Status: negative)" {...props} /> <Body status="positive" text="I am a body kit (Status: positive)" {...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
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
import React from 'react' import { Title } from '../../' const TitleLight = (props) => { return ( <div> <Title text="Default Title" {...props} /> <br /> <Title size={4} tag="h4" text="Title 4" {...props} /> <Title size={3} tag="h3" text="Title 3" {...props} /> <Title size={2} tag="h2" text="Title 2" {...props} /> <Title size={1} tag="h1" text="Title 1" {...props} /> </div> ) } export default TitleLight
Wrap anchor tags around the kit to make it clickable.
Link variant can only be applied to size 4
.
import React from 'react' import { Title } from '../../' const TitleVariants = (props) => { return ( <div> <Title size={4} tag="h4" text="Title 4 (link)" variant="link" {...props} /> </div> ) } export default TitleVariants