UI Kit

Accordion

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.

To apply a gray background as an alternative look, add the .bg-light class to the parent container.

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Accordion Item #1
        </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Accordion Item #2
        </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Accordion Item #3
        </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</div>
        </div>
    </div>
</div>

Buttons

<button type="button" class="btn btn-outline">Outline</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

Card

Variation 1 using the .card-white or .card-blue classes

IUA's Professional Indemnity forum syllabus for 2022

east

News & Publications

IUA's Professional Indemnity forum syllabus for 2022

arrow_outward www.bbc.com

<div class="card card-white">
    <a href="#">
        <img src="sample-thumbnail.jpg" class="card-img-top">
        <div class="card-body">
            <h4 class="card-title">IUA's Professional Indemnity forum syllabus for 2022</h4>
        </div>
        <div class="card-footer">
            <span class="material-symbols-outlined">east</span>
        </div>
    </a>
</div>


<div class="card card-blue">
    <a href="#">
        <img src="sample-thumbnail.jpg" class="card-img-top">
        <div class="card-body">
            <div class="text-secondary">News & Publications</div>
            <h4 class="card-title">IUA's Professional Indemnity forum syllabus for 2022</h4>
        </div>
        <div class="card-footer">
            <span class="material-symbols-outlined">arrow_outward</span> www.bbc.com
        </div>
    </a>
</div>

Variation 2 using the .card-slide-hover class. You can also turn off the bottom line by adding the .no-hover-bar class.

Partners

east

Resources

BIBA Conference 2022 Registration now open

east

<div class="card card-slide-hover">
    <a href="#">
        <img src="sample-card.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Partners</h5>
            <span class="material-symbols-outlined">east</span>
        </div>
    </a>
</div>


<div class="card card-slide-hover no-hover-bar">
    <a href="#">
        <img src="sample-card.jpg" class="card-img-top">
        <div class="card-body">
            <div class="text-secondary text-uppercase">Resources</div>
            <h5 class="card-title">BIBA Conference 2022 Registration now open</h5>
            <span class="material-symbols-outlined">east</span>
        </div>
    </a>
</div>

Variation 3 using the .card-compact class

Technical & Regulation Updates

east

<div class="card card-compact">
    <a href="#">
        <img src="sample-card.jpg" class="card-img-top">
        <div class="card-body">
            <h4 class="card-title">Technical & Regulation Updates</h4>
            <span class="material-symbols-outlined">east</span>
        </div>
    </a>
</div>

Variation 4 using the .card-zoom-image and .card-zoom-image-inline class

<div class="card card-zoom-image">
    <a href="#">
        <img src="sample-card2.jpg" class="card-img-top">
        <div class="card-body">
            <h4 class="card-title">BIBA Schemes</h4>
        </div>
        <div class="card-footer">
            <span class="material-symbols-outlined">east</span>
        </div>
    </a>
</div>


<div class="card card-zoom-image">
    <a href="#">
        <img src="sample-card3.jpg" class="card-img-top">
        <div class="card-body">
            <h4 class="card-title">Download BIBA Official Scheme Provider Logos here</h4>
        </div>
        <div class="card-footer">
            <span class="material-symbols-outlined">arrow_downward</span> Download file
        </div>
    </a>
</div>


<div class="card card-zoom-image-inline">
    <a href="#">
        <img src="sample-card.jpg" class="card-img-top">
        <div class="card-body">
            <h4 class="card-title">Vehicle</h4>
            <span class="material-symbols-outlined">east</span>
        </div>
    </a>
</div>

Variation 5 using the .card-icon class

Support

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

LEARN MORE

<div class="card card-icon bg-light">
    <div class="icon">
        <img src="sample-icon.png" />
    </div>
    <div class="card-body">
        <h4 class="card-title">Support</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a href="#" class="btn btn-primary mt-3">LEARN MORE</a>
    </div>
</div>

Form Fields

Text Input

Label name *

Placeholder

Email *

Enter Email

Error message

<div for="exampleInput1" class="form-label">Label name *</div>
<div class="form-floating mb-3">
    <input type="text" class="form-control" id="exampleInput1" placeholder="Placeholder">
    <label for="exampleInput1">Placeholder</label>
</div>


<div for="emailInput" class="form-label">Email *</div>
<div class="form-floating has-error mb-3">
    <input type="email" class="form-control" id="emailInput" placeholder="Placeholder" value="[email protected]">
    <label for="emailInput">Enter Email</label>
    <div class="error-message">Error message</div>
</div>

Date Picker

Select a date

calendar_today

<div class="mb-3">
    <label for="dateInput" class="form-label">Select a date</label>
    <div class="input-group date">
        <input type="text" id="dateInput" class="form-control datepicker">
        <span class="material-symbols-outlined">calendar_today</span>
    </div>
</div>

Select

We are using the Select2 custom select box to take advantage of the advance feature in offers like the search which is enabled by default.

Label name *

Error message

<div class="mb-3">
    <label for="selectInput" class="form-label">Label name *</label>
    <select class="select2" id="selectInput">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>


<div class="mb-3">
    <label for="selectInput2" class="form-label">Label name *</label>
    <select class="select2 has-error" id="selectInput2">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <div class="error-message">Error message</div>
</div>

Radio Buttons

Label name *

Option 1

Option 2

<label for="inlineRadioOptions" class="form-label">Label name *</label>
<div class="mb-3">
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
        <label class="form-check-label" for="inlineRadio1">Option 1</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" checked>
        <label class="form-check-label" for="inlineRadio2">Option 2</label>
    </div>
</div>

Links

Simple Link

Guides

Quick Links

<a href="#" class="arrow-right">Simple Link</a>


<h3>Guides</h3>
<ul class="list-unstyled list-links">
    <li>
        <a href="#"><span class="material-symbols-outlined">arrow_right_alt</span> <span>Birmingham</span></a>
    </li>
    <li>
        <a href="#"><span class="material-symbols-outlined">arrow_right_alt</span> <span>Cyprus</span></a>
    </li>
    <li>
        <a href="#"><span class="material-symbols-outlined">arrow_right_alt</span> <span>France</span></a>
    </li>
</ul>


<div class="list-dark p-5">
    <h3>Quick Links</h3>
    <ul class="list-unstyled list-links list-dark">
        <li>
            <a href="#"><span class="material-symbols-outlined">arrow_right_alt</span> <span>BIBA Schemes</span></a>
        </li>
        <li>
            <a href="#"><span class="material-symbols-outlined">arrow_right_alt</span> <span>BIBA Facilities</span></a>
        </li>
        <li>
            <a href="#"><span class="material-symbols-outlined">arrow_right_alt</span> <span>Tender Process</span></a>
        </li>
    </ul>
</div>

List Group

<div class="bg-light">
    <ul class="list-group">
        <li class="list-group-item">
            <a href="#">An item</a>
        </li>
        <li class="list-group-item">
            <a href="#">A second item</a>    
        </li>
        <li class="list-group-item">
            <a href="#">A third item</a>
        </li>
        <li class="list-group-item">
            <a href="#">A fourth item</a>
        </li>
        <li class="list-group-item">
            <a href="#">And a fifth one</a>
        </li>
    </ul>
</div>

Pagination

<ul class="pagination">
    <li class="page-item">
        <a class="page-link prev" href="#"><span class="material-symbols-outlined">arrow_back</span>Prev</a>
    </li>
    <li class="page-item">
        <a class="page-link current" href="#">1</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item">
        <a class="page-link next" href="#">Next<span class="material-symbols-outlined">arrow_forward</span></a>
    </li>
</ul>

Tables

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-striped">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Components

Accordion

Accordion Item #1

Accordion Item #2

Accordion Item #3

Buttons

Card

IUA's Professional Indemnity forum syllabus for 2022

IUA's Professional Indemnity forum syllabus for 2022

Partners

BIBA Conference 2022 Registration now open

Technical & Regulation Updates

BIBA Schemes

Download BIBA Official Scheme Provider Logos here

Vehicle

Support

Form Fields

Text Input

Date Picker

Select

Radio Buttons

Links

Guides

Quick Links

List Group

Pagination

Tables