Heading

import React from 'react';
import { Row, Col, Heading } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <Row>
                    <Col>
                        <Heading level={1}>H1</Heading>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Heading level={2}>H2</Heading>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Heading level={3}>H3</Heading>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Heading level={4}>H4</Heading>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Heading level={5}>H5</Heading>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Heading level={6}>H6</Heading>
                    </Col>
                </Row>
            </div>
        );
    }
}

Heading Properties

Heading.propTypes = {
    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
    level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
    className: PropTypes.string,
};

Heading.defaultProps = {
    className: '',
};

Heading Hero

Hero small is responsible with smaller line height on tablet.

import React from 'react';
import { Row, Col, Heading } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <h1 className="hero-text">Hero Headings</h1>
                <h1 className="hero-text hero-text--small">Hero Headings small</h1>
            </div>
        );
    }
}