Blockquotes [WIP]
An element used only in articles templates to apply fancier styles to article body text! Style with pure css
When running yarn bootstrap, choose Article Blockquote
You'll see only two files under src/block:
1. index.js: file to define name and style of your blockquote
export const name = 'regular'
export const style = {
italic: true,
}
name: define your blockquote name. It should be a valid css class name as it used in css toostyle: define your style in js to tell our builder what this blockquote looks like
2. style.scss: file to define the actual style in scss format
@use "@storipress/article/mixins";
// make sure the name at here is same in `index.js`
@include mixins.blockquote($name: 'regular') {
// Your styles here!
@apply py-2;
@apply px-4;
@apply italic;
}
You can write any style within the mixins.blockquote mixin.
Remember to make your style sync with the
style
in
index.js
Style in Javascript
Its properties are same as the styleable elements' prop
Currently, this does not support breakpoints. Please shoot us a feature request so that we can prioritise this feature.
Props
| Prop | Type | Default | Description |
| fontSize | number | 16px | font size (valid range: 8 ~ 280) |
| fontFamily | string | Roboto | font family |
| bold | boolean | false | is bold (font-width: 700) |
| italic | boolean | false | is italic (font-style: italic) |
| underline | boolean | false | is underline (text-decoration: underline) |
| uppercase | boolean | false | is uppercase (text-transform: uppercase) |
| lowercase | boolean | false | is lowercase (text-transform: lowercase) |
| align | string | left | text align (valid value are: left, center, right) |
| color | string | 000000 | text color, should be hex string like ff0000 |
| lineHeight | number | 1.5 | line height (valid range: 1.0 ~ 2.0 step 0.1) |
| hoverColor | string | N/A | text color in hover state |
Examples:
@use '@storipress/article/mixins';
@include mixins.blockquote('slim') {
@apply py-4;
@apply px-12;
@apply italic;
}
export const name = 'slim'
export const style = {
italic: true,
}
@use '@storipress/article/mixins';
@include mixins.blockquote('bold') {
@apply font-bold;
@apply italic;
@apply text-lg;
@apply pl-4;
@apply border-l-4;
@apply border-black;
@apply my-2;
}
export const name = 'bold'
export const style = {
fontSize: 18,
bold: true,
italic: true,
}