Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
includes={{ Text }}
codes={Object.keys(Text.Heading.sizes).map(
s =>
`
<h2>${s}</h2>
`
)}
/>
large,
<span>
size and style of heading (from <code>Text.Heading.sizes</code>)
</span>
])
]}
/>
Body text
<p>Try to use common paragraph style when possible.</p>
<p>Include a React component in your project:</p>
<code>
import * as Text from '@pluralsight/ps-design-system-text'
</code>
Heading
<p>
Heading styles compose complimentary typography attributes for
simplified implementation. Try to use common heading styles when
possible.
</p>
`
<h2>${s}</h2>
`
)}
/>
large,
const VerticalGridVisual = _ => (
<div>
<div>
<button style="{{" size="{Button.sizes.large}">
Primary button
</button>
<button size="{Button.sizes.medium}">Primary button</button>
</div>
<div>
<h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor
</h3>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
</div>
<style>{`</style></div>
.add('with DS Text components', _ => (
<h3>Bob Ross</h3>
}
message={
Be so very light. Be a gentle whisper. If these lines aren't
straight, your water's going to run right out of your painting and
get your floor wet. It is a lot of fun.
So often we avoid running water, and running water is a lot of fun.
Just beat the devil out of it. Work that paint. A beautiful little
sunset. This painting comes right out of your heart.
const Comp = props => (
<div>
<div>
<h3>{props.title}</h3>
<div>
<span>{props.desc}</span>
<span>
Docs
</span>
</div>
</div>
<div>{props.children}</div>
<style>{`
.comp {
padding-bottom: ${core.layout.spacingLarge};
border-bottom: 1px solid ${core.colors.gray02};
margin-bottom: ${core.layout.spacingXLarge};</style></div>