How to use the @pluralsight/ps-design-system-text.Heading function in @pluralsight/ps-design-system-text

To help you get started, we’ve selected a few @pluralsight/ps-design-system-text 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.

github pluralsight / design-system / packages / site / pages / components / text.js View on Github external
includes={{ Text }}
        codes={Object.keys(Text.Heading.sizes).map(
          s =>
            `

  <h2>${s}</h2>

`
        )}
      /&gt;
      large,
            <span>
              size and style of heading (from <code>Text.Heading.sizes</code>)
            </span>
          ])
        ]}
      /&gt;

      Body text
      <p>Try to use common paragraph style when possible.</p>
github pluralsight / design-system / packages / site / pages / components / text.js View on Github external
<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>

`
        )}
      /&gt;
      large,
github pluralsight / design-system / packages / site / pages / components / layout.js View on Github external
const VerticalGridVisual = _ =&gt; (
  <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>
github pluralsight / design-system / packages / note / src / react / __stories__ / index.story.js View on Github external
.add('with DS Text components', _ =&gt; (
    
          <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.
github pluralsight / design-system / packages / site / pages / components / form.js View on Github external
const Comp = props =&gt; (
  <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>