primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-24 06:32:00 +03:00
Code Issues Projects Releases Wiki Activity

add stories for text alignment, list styles, and text shadows

Browse Source
This commit is contained in:
Diana Mounter 2017-09-02 17:54:12 -04:00
parent 8b188ff624
commit d230a466e1
1 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
.storybook/Typography.js
View File

@ -59,3 +59,34 @@ storiesOf('Typography', module)
<p className="lead">lead</p>
</div>
))
.add('text alignment', () => (
<div>
<p className="text-left">text-left</p>
<p className="text-center">text-center</p>
<p className="text-right">text-right</p>
</div>
))
.add('responsive text alignment', () => (
<div>
<p className="text-left text-sm-center text-lg-right">Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
</div>
))
.add('list-style-none', () => (
<div>
<ul className="list-style-none">
<li>list-style-none</li>
<li>list-style-none</li>
<li>list-style-none</li>
</ul>
</div>
))
.add('text shadows', () => (
<div>
<div className="bg-purple p-5">
<h3 className="text-white text-shadow-dark">.text-shadow-dark helps white text stand out on dark or photographic backgrounds</h3>
</div>
<div className="bg-yellow p-5">
<h3 className="text-shadow-light">.text-shadow-light creates an embossed effect for dark text</h3>
</div>
</div>
))