const Headings = () => {
  return (
 <React.Fragment>
     <h1>h1. Nubra heading</h1>
     <h2>h2. Nubra heading</h2>
     <h3>h3. Nubra heading</h3>
     <h4>h4. Nubra heading</h4>
     <h5>h5. Nubra heading</h5>
     <h6>h6. Nubra heading</h6>
 </React.Fragment>
  );
}

export default Headings;

import React from 'react';
function DisplayHeadings() {
  return (
   <>
     <div className="display-1">Display 1</div>
     <hr />
     <div className="display-2">Display 2</div>
     <hr />
     <div className="display-3">Display 3</div>
     <hr />
     <div className="display-4">Display 4</div>
     <hr />
     <div className="display-5">Display 5</div>
     <hr />
     <div className="display-6">Display 6</div>
   </>
  );
}

export default DisplayHeadings;

import React from 'react';
function HeadingsIcon() {
  return (
     <h1 className="heading-wth-icon m-0">   // you can use from h1 to h6 
        <span className="head-icon">
            <span className="feather-icon"><DemoIcon /></span>
        </span>
        <span>h1. Nubra heading</span>
     </h1>
  );
}

export default HeadingsIcon;

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import DisplayCard from '../../../components/DisplayCard/DisplayCard';

const Title = () => {
    return (
        <Container className="py-3">
            <Row>
                 <Col>
                    <Row className="align-items-center">
                        <Col xs={8} className="title-lg m-0"><span>Title Lg</span></Col>
                        <Col xs={4} className="fs-7 ">Semibold 1.125rem (18px)</Col>
                    </Row>
                    <hr />
                    <Row className="align-items-center">
                        <Col xs={8} className="title m-0"><span>Title Default</span></Col>
                        <Col xs={4} className="fs-7 ">Semibold 1rem (16px)</Col>
                    </Row>
                    <hr />
                    <Row className="align-items-center">
                        <Col xs={8} className="title-sm m-0"><span>Title sm</span></Col>
                        <Col xs={4} className="fs-7 ">Semibold 0.875rem (14px)</Col>
                    </Row>
                    <hr />
                    <Row className="align-items-center">
                        <Col xs={8} className="title-xs m-0"><span>Title xs</span></Col>
                        <Col xs={4} className="fs-7 ">Semibold 0.75rem (12px)</Col>
                    </Row>
                </Col>
            </Row>
        </Container>
    )
}

export default Title;

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';

function TitleWithDivider() {
  return (
     <Container>
        <Row>
            <Col>
                <Row className="align-items-center">
                    <Col xs={8} className="title-lg title-wth-divider m-0"><span>Title Lg</span></Col>
                    <Col xs={4} className="fs-7 ">Semibold 1.125rem (18px)</Col>
                </Row>
                <hr />
                <Row className="align-items-center">
                    <Col xs={8} className="title title-wth-divider m-0"><span>Title Default</span></Col>
                    <Col xs={4} className="fs-7 ">Semibold 1rem (16px)</Col>
                </Row>
                <hr />
                <Row className="align-items-center">
                    <Col xs={8} className="title-sm title-wth-divider m-0"><span>Title sm</span></Col>
                    <Col xs={4} className="fs-7 ">Semibold 0.875rem (14px)</Col>
                </Row>
                <hr />
                <Row className="align-items-center">
                    <Col xs={8} className="title-xs title-wth-divider m-0"><span>Title xs</span></Col>
                    <Col xs={4} className="fs-7 ">Semibold 0.75rem (12px)</Col>
                </Row>
            </Col>
        </Row>
    </Container>
  );
}

export default TitleWithDivider;

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import { Airplay } from 'react-feather';

function TitleWithIcons() {
  return (
     <Container>
        <Row>
            <Col>
                <Row className="align-items-center">
                    <Col xs={8} className="title-lg m-0">
                        <span className="title-icon"><span className="feather-icon"><Airplay /></span></span><span>Title Lg</span>
                    </Col>
                    <Col xs={4} className="fs-7 ">Semibold 1.125rem (18px)</Col>
                </Row>
                <hr />
                <Row className="align-items-center">
                    <Col xs={8} className="title m-0">
                        <span className="title-icon"><span className="feather-icon"><Airplay /></span></span><span>Title Default</span>
                    </Col>
                    <Col xs={4} className="fs-7 ">Semibold 1rem (16px)</Col>
                </Row>
                <hr />
                <Row className="align-items-center">
                    <Col xs={8} className="title-sm m-0">
                        <span className="title-icon"><span className="feather-icon"><Airplay /></span></span><span>Title sm</span>
                    </Col>
                    <Col xs={4} className="fs-7 ">Semibold 0.875rem (14px)</Col>
                </Row>
                <hr />
                <Row className="align-items-center">
                    <Col xs={8} className="title-xs m-0">
                        <span className="title-icon"><span className="feather-icon"><Airplay /></span></span><span>Title xs</span>
                    </Col>
                    <Col xs={4} className="fs-7 ">Semibold 0.75rem (12px)</Col>
                </Row>
            </Col>
        </Row>
    </Container>
  );
}

export default TitleWithIcons;

import React from 'react';
import { Figure } from 'react-bootstrap';

function BlockQuote() {
  return (
        <Figure>
            <blockquote className="blockquote">
                <p>A well-known quote, contained in a blockquote element.</p>
            </blockquote>
            <figcaption className="blockquote-footer">
                Someone famous in <cite title="Source Title">Source Title</cite>
            </figcaption>
        </Figure>
  );
}

export default BlockQuote;

import React from 'react';
function CustomHeading() {
  return (
        <h3>
            Fancy display heading
            <small className="text-muted"> With faded secondary text </small>
        </h3>
  );
}

export default CustomHeading;

import React from 'react';
const Paragraphs = () => {
  return (
        <>
            <p className="p-xl mb-3">
                paragraph XL Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
            </p>
            <p className="p-lg mb-3">
                paragraph LG Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
            </p>
            <p className="mb-3">
                paragraph Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
            </p>
            <p className="p-sm mb-3">
                paragraph SM Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
            </p>
            <p className="p-xs mb-3">
                paragraph XS Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
            </p>
        </>
  );
}

export default Paragraphs;

import React from 'react';
const Lead = () => {
  return (
        <p className="lead">
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
        </p>
  );
}

export default Lead;

import React from 'react';
const InlineTextElem = () => {
  return (
     <>
        <p className="mb-2">
            You can use the mark tag to <mark>highlight</mark> text.
        </p>
        <p className="mb-2">
            <del>This line of text is meant to be treated as deleted text.</del>
        </p>
        <p className="mb-2">
            <s>This line of text is meant to be treated as no longer accurate.</s>
        </p>
        <p className="mb-2">
            <ins>This line of text is meant to be treated as an addition to the document.</ins>
        </p>
        <p className="mb-2">
            <u>This line of text will render as underlined</u>
        </p>
        <p className="mb-2">
            <small>This line of text is meant to be treated as fine print.</small>
        </p>
        <p className="mb-2">
            <strong>This line rendered as bold text.</strong>
        </p>
        <p className="mb-2 strikethrough">
            <s>This line rendered as italicized text.</s>
        </p>
        <p className="mb-2 strikethrough">
            <del>This line rendered as italicized text.</del>
        </p>
        <p>
            <em>This line rendered as italicized text.</em>
        </p>
    </>
  );
}

export default InlineTextElem;

import React from 'react';
const List = () => {
  return (
     <>
        <ul className="list-ul">
            <li>This is a list.</li>
            <li>It appears completely unstyled.</li>
            <li>Structurally, it's still a list.</li>
            <li>However, this style only applies to immediate child elements.</li>
            <li>Nested lists:
                <ul>
                    <li>are unaffected by this style</li>
                    <li>will still show a bullet</li>
                    <li>and have appropriate left margin</li>
                </ul>
            </li>
            <li>This may still come in handy in some situations.</li>
        </ul>
        <div className="title-sm"><span>List Unstyled</span></div>
        <ul className="list-unstyled">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Lorem ipsum dolor sit amet</li>
        </ul>
        <div className="title-sm"><span>List Inline</span></div>
        <ul className="list-inline">
            <li className="list-inline-item">Lorem ipsum</li>
            <li className="list-inline-item">Phasellus iaculis</li>
            <li className="list-inline-item">Nulla volutpat</li>
        </ul>
    </>
  );
}

export default List;