How to use the @project-r/styleguide.fontFamilies.serifBold function in @project-r/styleguide
To help you get started, we’ve selected a few @project-r/styleguide examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
orbiting / republik-frontend / pages / en.js View on Github 
textDecoration: 'none',
fontSize: 20,
color: '#000',
marginTop: 9 + 4,
marginBottom: -20,
display: 'block'
}),
text: css({
marginTop: SPACE / 2,
marginBottom: SPACE,
fontFamily: fontFamilies.serifRegular,
fontSize: 18,
lineHeight: '27px'
}),
highlight: css({
fontFamily: fontFamilies.serifBold,
fontSize: 24,
lineHeight: '36px'
}),
strong: css({
fontFamily: fontFamilies.serifBold
}),
logoContainer: css({
textAlign: 'center',
marginBottom: SPACE
}),
column: css({
maxWidth: 500,
margin: `${SPACE}px auto`,
'& ::selection': {
color: '#fff',
backgroundColor: '#000'position: 'absolute',
height: '100%',
width: '100%',
left: 0,
top: 0
}
}),
sansSerif: css({
'& b': {
fontFamily: fontFamilies.sansSerifMedium,
fontWeight: 'normal'
}
}),
serif: css({
'& b': {
fontFamily: fontFamilies.serifBold,
fontWeight: 'normal'
}
})
}
const RawHtml = ({type, style, dangerouslySetInnerHTML}) => createElement(type, {
...styles.default,
...styles[style],
dangerouslySetInnerHTML
})
RawHtml.defaultProps = {
type: 'span',
style: 'sansSerif'
}const styles = {
text: css({
marginTop: SPACE / 2,
marginBottom: SPACE,
fontFamily: fontFamilies.serifRegular,
fontSize: 18,
lineHeight: '27px'
}),
highlight: css({
fontFamily: fontFamilies.serifBold,
fontSize: 24,
lineHeight: '36px'
}),
strong: css({
fontFamily: fontFamilies.serifBold
}),
logoContainer: css({
textAlign: 'center',
marginBottom: SPACE
}),
column: css({
maxWidth: 500,
margin: `${SPACE}px auto`,
'& ::selection': {
color: '#fff',
backgroundColor: '#000'
}
}),
nav: css({
marginTop: SPACE,
marginBottom: SPACE,display: 'block'
}),
text: css({
marginTop: SPACE / 2,
marginBottom: SPACE,
fontFamily: fontFamilies.serifRegular,
fontSize: 18,
lineHeight: '27px'
}),
highlight: css({
fontFamily: fontFamilies.serifBold,
fontSize: 24,
lineHeight: '36px'
}),
strong: css({
fontFamily: fontFamilies.serifBold
}),
logoContainer: css({
textAlign: 'center',
marginBottom: SPACE
}),
column: css({
maxWidth: 500,
margin: `${SPACE}px auto`,
'& ::selection': {
color: '#fff',
backgroundColor: '#000'
}
}),
nav: css({
marginTop: SPACE,
marginBottom: SPACE,strong: ({children}) => (
<span style="{{fontFamily:">{children}</span>
),
ul: ({children}) => <ul>{children}</ul>,})
const P = ({children, ...props}) => (
<p>{children}</p>
)
const styles = {
text: css({
marginTop: SPACE / 2,
marginBottom: SPACE,
fontFamily: fontFamilies.serifRegular,
fontSize: 18,
lineHeight: '27px'
}),
highlight: css({
fontFamily: fontFamilies.serifBold,
fontSize: 24,
lineHeight: '36px'
}),
strong: css({
fontFamily: fontFamilies.serifBold
}),
logoContainer: css({
textAlign: 'center',
marginBottom: SPACE
}),
column: css({
maxWidth: 500,
margin: `${SPACE}px auto`,
'& ::selection': {
color: '#fff',
backgroundColor: '#000'textDecoration: 'none',
fontSize: 20,
color: '#000',
marginTop: 9 + 4,
marginBottom: -20,
display: 'block'
}),
text: css({
marginTop: SPACE / 2,
marginBottom: SPACE,
fontFamily: fontFamilies.serifRegular,
fontSize: 18,
lineHeight: '27px'
}),
highlight: css({
fontFamily: fontFamilies.serifBold,
fontSize: 24,
lineHeight: '36px'
}),
strong: css({
fontFamily: fontFamilies.serifBold
}),
logoContainer: css({
textAlign: 'center',
marginBottom: SPACE
}),
column: css({
maxWidth: 500,
margin: `${SPACE}px auto`,
'& ::selection': {
color: '#fff',
backgroundColor: '#000'display: 'block'
}),
text: css({
marginTop: SPACE / 2,
marginBottom: SPACE,
fontFamily: fontFamilies.serifRegular,
fontSize: 18,
lineHeight: '27px'
}),
highlight: css({
fontFamily: fontFamilies.serifBold,
fontSize: 24,
lineHeight: '36px'
}),
strong: css({
fontFamily: fontFamilies.serifBold
}),
logoContainer: css({
textAlign: 'center',
marginBottom: SPACE
}),
column: css({
maxWidth: 500,
margin: `${SPACE}px auto`,
'& ::selection': {
color: '#fff',
backgroundColor: '#000'
}
}),
nav: css({
marginTop: SPACE,
marginBottom: SPACE,const styles = {
text: css({
marginTop: SPACE / 2,
marginBottom: SPACE,
fontFamily: fontFamilies.serifRegular,
fontSize: 18,
lineHeight: '27px'
}),
highlight: css({
fontFamily: fontFamilies.serifBold,
fontSize: 24,
lineHeight: '36px'
}),
strong: css({
fontFamily: fontFamilies.serifBold
}),
logoContainer: css({
textAlign: 'center',
marginBottom: SPACE
}),
column: css({
maxWidth: 500,
margin: `${SPACE}px auto`,
'& ::selection': {
color: '#fff',
backgroundColor: '#000'
}
}),
nav: css({
marginTop: SPACE,
marginBottom: SPACE,})
const P = ({children, ...props}) => (
<p>{children}</p>
)
const styles = {
text: css({
marginTop: SPACE / 2,
marginBottom: SPACE,
fontFamily: fontFamilies.serifRegular,
fontSize: 18,
lineHeight: '27px'
}),
highlight: css({
fontFamily: fontFamilies.serifBold,
fontSize: 24,
lineHeight: '36px'
}),
strong: css({
fontFamily: fontFamilies.serifBold
}),
logoContainer: css({
textAlign: 'center',
marginBottom: SPACE
}),
column: css({
maxWidth: 500,
margin: `${SPACE}px auto`,
'& ::selection': {
color: '#fff',
backgroundColor: '#000'@project-r/styleguide
This is a living style guide. Subject to constant change.
Package Health Score
45 / 100Popular @project-r/styleguide functions
- @project-r/styleguide.colors.disabled
- @project-r/styleguide.colors.divider
- @project-r/styleguide.colors.error
- @project-r/styleguide.colors.lightText
- @project-r/styleguide.colors.negative
- @project-r/styleguide.colors.primary
- @project-r/styleguide.colors.primaryBg
- @project-r/styleguide.colors.secondary
- @project-r/styleguide.colors.secondaryBg
- @project-r/styleguide.colors.text
- @project-r/styleguide.fontFamilies.sansSerifMedium
- @project-r/styleguide.fontFamilies.sansSerifRegular
- @project-r/styleguide.fontFamilies.serifBold
- @project-r/styleguide.fontStyles.sansSerifRegular14
- @project-r/styleguide.fontStyles.sansSerifRegular16
- @project-r/styleguide.fontStyles.sansSerifRegular21
- @project-r/styleguide.mediaQueries.lUp
- @project-r/styleguide.mediaQueries.mBreakPoint
- @project-r/styleguide.mediaQueries.mUp
- @project-r/styleguide.mediaQueries.onlyS