Ribbon

Ribbon can highlight cards

Ribbon overhead

Use .hk-ribbon-type-1 with .overhead-start, .overhead-end or .overhead-center

Preview

Jsx

Classes

overhead start

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

overhead center

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

overhead end

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

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

const RibbonOverhead = () => {
  return (
    <Row>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 overhead-start">
                    <span>overhead start</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 overhead-center">
                    <span>overhead center</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 overhead-end">
                    <span>overhead end</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
    </Row>
  );
}

export default RibbonOverhead;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="hk-ribbon-type-1 overhead-[value]"`	start / center / end

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Ribbon over

Use .hk-ribbon-type-1 with .start-over, or .end-over

Preview

Jsx

Classes

Start over

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

End over

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

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

const RibbonOver = () => {
  return (
    <Row>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 start-over">
                    <span>Start over</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 end-over">
                    <span>End over</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
    </Row>
  );
}

export default RibbonOver;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`class="hk-ribbon-type-1 [value]-over"`	start / end

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Ribbon touch

Use .hk-ribbon-type-1 with .start-over, or .end-over

Preview

Jsx

Classes

start touch

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

end touch

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

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

const RibbonTouch = () => {
  return (
    <Row>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 start-touch">
                    <span>start touch</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 end-touch">
                    <span>end touch</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
    </Row>
  );
}

export default RibbonTouch;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`class="hk-ribbon-type-1 [value]-over"`	start / end

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Ribbon Square

Use the .hk-ribbon-type-1 .ribbon-square

Preview

Jsx

overhead start

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

overhead center

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

overhead end

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

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

const RibbonSquare = () => {
  return (
    <Row>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-square overhead-start">
                    <span>overhead start</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-square overhead-center">
                    <span>overhead center</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-square overhead-end">
                    <span>overhead end</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
    </Row>
  );
}

export default RibbonSquare;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Ribbon with Icon

Use the .hk-ribbon-type-1 .ribbon-wth-icon.

Preview

Jsx

overhead start

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

overhead center

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

overhead end

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

l
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
import { Award, Settings } from 'react-feather';

const RibbonWithIcons = () => {
  return (
    <Row>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-wth-icon overhead-start">
                    <span><span className="feather-icon"><Award /></span> overhead start</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-wth-icon overhead-center">
                    <span><span className="feather-icon"><Settings /></span>overhead center</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-wth-icon overhead-end">
                    <span><span className="feather-icon"><Award /></span>overhead end</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
    </Row>
  );
}

export default RibbonWithIcons;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Ribbon with Flag

Use the .hk-ribbon-type-1 .ribbon-wth-icon .ribbon-wth-flag.

Preview

Jsx

overhead start

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

overhead center

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

overhead end

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

left over

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

right over

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

start touch

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

end touch

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
import { Award, Settings } from 'react-feather';

const RibbonWithFlag = () => {
  return (
    <Row>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-wth-icon ribbon-wth-flag  overhead-start">
                    <span><span className="feather-icon"><i data-feather="award" /></span> overhead start</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-wth-icon ribbon-wth-flag overhead-center">
                    <span><span className="feather-icon"><i data-feather="settings" /></span>overhead center</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-wth-icon ribbon-wth-flag overhead-end">
                    <span><span className="feather-icon"><i data-feather="award" /></span>overhead end</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
    </Row>
    <Row>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-wth-icon ribbon-wth-flag start-over">
                    <span><span className="feather-icon"><i data-feather="award" /></span>left over</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-wth-icon ribbon-wth-flag end-over">
                    <span><span className="feather-icon"><i data-feather="award" /></span>right over</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
    </Row>
    <Row>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-wth-icon ribbon-wth-flag start-touch">
                    <span><span className="feather-icon"><i data-feather="award" /></span>start touch</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 ribbon-wth-icon ribbon-wth-flag end-touch">
                    <span><span className="feather-icon"><i data-feather="award" /></span>end touch</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
    </Row>
  );
}

export default RibbonWithFlag;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Ribbon type 2

Use the .hk-ribbon-type-2 .ribbon-wth-flag.

Preview

Jsx

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
import { Award, Settings } from 'react-feather';

const RibbonType2 = () => {
  return (
    <Row>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-2 ribbon-wth-flag overhead-start">
                    <span><span className="feather-icon"><i data-feather="award" /></span></span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-2 ribbon-wth-flag overhead-center">
                    <span><span className="feather-icon"><i data-feather="archive" /></span></span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-2 ribbon-wth-flag overhead-end">
                    <span><span className="feather-icon"><i data-feather="anchor" /></span></span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-2 ribbon-wth-flag overhead-start top-touch">
                    <span><span className="feather-icon"><i data-feather="book-open" /></span></span>
                </div>
                <div className="card-body mt-5">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
                <div className="card-footer text-muted">
                    Card Footer
                </div>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-2 ribbon-wth-flag overhead-center top-touch">
                    <span><span className="feather-icon"><i data-feather="briefcase" /></span></span>
                </div>
                <div className="card-body mt-5">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
                <div className="card-footer text-muted">
                    Card Footer
                </div>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-2 ribbon-wth-flag overhead-end top-touch">
                    <span><span className="feather-icon"><i data-feather="bell" /></span></span>
                </div>
                <div className="card-body mt-5">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
                <div className="card-footer text-muted">
                    Card Footer
                </div>
            </Card>
        </Col>
    </Row>
  );
}

export default RibbonType2;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Color Option

Use the .hk-ribbon-*.

Preview

Jsx

Classes

overhead start

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

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

const RibbonColors = () => {
  return (
    <Row>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-1 hk-ribbon-warning overhead-start">
                    <span>overhead start</span>
                </div>
                <Card.Body className="mt-4">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-2 hk-ribbon-success ribbon-wth-flag overhead-center top-touch">
                    <span><span className="feather-icon"><i data-feather="award" /></span></span>
                </div>
                <Card.Body className="mt-5">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
        <Col sm={4}>
            <Card>
                <div className="hk-ribbon-type-2 hk-ribbon-primary ribbon-wth-flag overhead-center top-touch">
                    <span><span className="feather-icon"><i data-feather="award" /></span></span>
                </div>
                <Card.Body className="mt-5">
                    <h5 className="card-title">Special title treatment</h5>
                    <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </Card.Body>
                <Card.Footer className="text-muted">
                    Card Footer
                </Card.Footer>
            </Card>
        </Col>
    </Row>
  );
}

export default RibbonColors;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="hk-ribbon-type-1 hk-ribbon-[Value]"`	primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Ribbon overhead
Ribbon over
Ribbon touch
Ribbon Square
Ribbon with Icon
Ribbon with Flag
Ribbon type 2
Color Option