12.9.1
Typically used as headers. Follow semantic hierarchy — Title 1s should be followed by Title 2s followed by Title 3s and so on, without skipping any levels.
Tags can be changed using the tag prop. However, be sure follow markdown semantics (h1's are followed by h2's followed by h3's and so on).
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