import React from 'react';

export default function Typo(props) {
  return (
    <div className="flow-l">
      <div className="span">
        <div className="stack-m">
          <div className="trim f-sans-xs" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </div>
          <div className="trim f-sans-s" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </div>
          <div className="trim f-sans-m" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </div>
          <div className="trim f-sans-l" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </div>
          <div className="trim f-sans-xl" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </div>
          <div className="trim f-sans-xxl" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </div>
        </div>
      </div>
      <div className="span">
        <div className="stack-m">
          <h2 className="trim f-sans-xs" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </h2>
          <h2 className="trim f-sans-s" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </h2>
          <h2 className="trim f-sans-m" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </h2>
          <h2 className="trim f-sans-l" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </h2>
          <h2 className="trim f-sans-xl" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </h2>
          <h2 className="trim f-sans-xxl" style={{ width: '20em' }}>
            Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
          </h2>
        </div>
      </div>
    </div>
  );
}