compolicious
Version:
React component demo utility
88 lines (86 loc) • 2.83 kB
JavaScript
require('../fonts/bogle/bogle.css');
export default {
title: 'Font and Texts',
description: `The Bogle font is named for Bob Bogle, one of Sam Walton’s treasured friends and
colleagues. Bogle is easy to read, so it does its job well and in a joyful way; it’s the
foundation of all our communications. We commit to using it in our headings and subcopy.
The ways we present our singular typeface is just as important as what we say with it.
Here are all the ways we use it.`,
sections: [
{
title: 'Font',
blocks: [
{
components: [{
name: 'Compolicious/TextBlock',
props: {text: 'Regular (BogleWeb / BogleWebRegular)', fontFamily: 'BogleWeb'}
}]
},
{
components: [{
name: 'Compolicious/TextBlock',
props: {text: 'Bold (BogleWebBold)', fontFamily: 'BogleWebBold'}
}]
},
{
components: [{
name: 'Compolicious/TextBlock',
props: {text: 'Black (BogleWebBlack)', fontFamily: 'BogleWebBlack'}
}]
}
]
},
{
title: "Sizes",
blocks: [
{
components: [{
name: 'Compolicious/TextBlock',
props: {text: 'xx-small', fontFamily: 'BogleWeb', fontSize: '10px'}
}, {
name: 'Compolicious/TextBlock',
props: {text: 'x-small', fontFamily: 'BogleWeb', fontSize: '12px'}
}, {
name: 'Compolicious/TextBlock',
props: {text: 'small', fontFamily: 'BogleWeb', fontSize: '14px'}
}, {
name: 'Compolicious/TextBlock',
props: {text: 'medium', fontFamily: 'BogleWeb', fontSize: '16px'}
}, {
name: 'Compolicious/TextBlock',
props: {text: 'large', fontFamily: 'BogleWeb', fontSize: '18px'}
}, {
name: 'Compolicious/TextBlock',
props: {text: 'x-large', fontFamily: 'BogleWeb', fontSize: '22px'}
}, {
name: 'Compolicious/TextBlock',
props: {text: 'xx-large', fontFamily: 'BogleWeb', fontSize: '26px'}
}]
}
]
},
{
title: 'Levels',
blocks: [
{
components: [{
name: 'Compolicious/TextBlock',
props: {text: 'Section Header', fontFamily: 'BogleWebBold', fontSize: '22px'}
}]
},
{
components: [{
name: 'Compolicious/TextBlock',
props: {text: 'Page / Content Text', fontFamily: 'BogleWeb', fontSize: '16px'}
}]
},
{
components: [{
name: 'Compolicious/TextBlock',
props: {text: 'Sub-text', fontFamily: 'BogleWeb', fontSize: '12px'}
}]
}
]
}
]
};