Explore Our Templates 🚀
Ribbon
Ribbon can highlight cards
Ribbon overhead
Use .hk-ribbon-type-1 with .overhead-start, .overhead-end or .overhead-center
overhead start
Special title treatment
With supporting text below as a natural lead-in to additional content.
overhead center
Special title treatment
With supporting text below as a natural lead-in to additional content.
overhead end
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>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;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;<template>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
</template>
<script>
</script><template>
<BRow>
<BCol sm="4">
<BCard noBody>
<HkRibbon type="h" overhead="start">overhead start</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard noBody>
<HkRibbon overhead="center">overhead center</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard noBody>
<HkRibbon type="h" overhead="end">overhead end</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
</BRow>
</template><div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>Ribbon over
Use .hk-ribbon-type-1 with .start-over, or .end-over
Start over
Special title treatment
With supporting text below as a natural lead-in to additional content.
End over
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 start-over">
<span>Start over</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 end-over">
<span>End over</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>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;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;<template>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 start-over">
<span>Start over</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 end-over">
<span>End over</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
</template><template>
<BRow>
<BCol sm="4">
<BCard noBody>
<HkRibbon over="start">start over</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard noBody>
<HkRibbon over="end">end over</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
</BRow>
</template><div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 start-over">
<span>Start over</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 end-over">
<span>End over</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>Ribbon touch
Use .hk-ribbon-type-1 with .start-over, or .end-over
start touch
Special title treatment
With supporting text below as a natural lead-in to additional content.
end touch
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>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;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;<template>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
</template>
<script>
</script><template>
<BRow>
<BCol sm="4">
<BCard noBody>
<HkRibbon type="h" overhead="start">overhead start</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard noBody>
<HkRibbon overhead="center">overhead center</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard noBody>
<HkRibbon type="h" overhead="end">overhead end</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
</BRow>
</template><div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>Ribbon Square
Use the .hk-ribbon-type-1 .ribbon-square
overhead start
Special title treatment
With supporting text below as a natural lead-in to additional content.
overhead center
Special title treatment
With supporting text below as a natural lead-in to additional content.
overhead end
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>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;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;<template>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
</template>
<script>
</script><template>
<BRow>
<BCol sm="4">
<BCard noBody>
<HkRibbon type="h" overhead="start">overhead start</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard noBody>
<HkRibbon overhead="center">overhead center</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard noBody>
<HkRibbon type="h" overhead="end">overhead end</HkRibbon>
<BCardBody class="mt-4">
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter> Card Footer </BCardFooter>
</BCard>
</BCol>
</BRow>
</template><div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>Ribbon with Icon
Use the .hk-ribbon-type-1 .ribbon-wth-icon.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>Ribbon with Flag
Use the .hk-ribbon-type-1 .ribbon-wth-icon .ribbon-wth-flag.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>Ribbon type 2
Use the .hk-ribbon-type-2 .ribbon-wth-flag.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>Color Option
Use the .hk-ribbon-*.
overhead start
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>