Buttons

Headers

Labels

Background Color

CHEST Blue Gray (#55799b)

Add .bg-blue-gray and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-blue-gray text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

CHEST Dark Blue (#446688)

Add .bg-dark-blue and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-dark-blue text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Light Neutral (#f5f4f0)

Add .bg-light-neutral CSS class to achieve the background color below.

<div class="bg-light-neutral container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

X-Light Neutral (#faf9f7)

Add .bg-xlight-neutral CSS class to achieve the background color below.

<div class="bg-xlight-neutral container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

XX-Light Neutral (#fdfcfc)

Add .bg-xxlight-neutral CSS class to achieve the background color below.

<div class="bg-xxlight-neutral container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Dark Gray (#54585a)

Add .bg-dark gray and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-dark-gray text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Gray (#a2aaad)

Add .bg-gray CSS class to achieve the background color below.

<div class="bg-gray container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Light Gray (#f7f7f7)

Add .bg-light-gray CSS class to achieve the background color below.

<div class="bg-light-gray container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

CHEST Maroon (#a4123f)

Add .bg-maroon and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-maroon text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

CHEST Yellow (#ffb500)

Add .bg-yellow CSS class to achieve the background color below.

<div class="bg-yellow container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Bright Blue (#0072ce)

Add .bg-bright-blue and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-bright-blue text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

X-Dark Blue (#005587)

Add .bg-xdark-blue and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-xdark-blue text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Purple (#702082)

Add .bg-purple and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-purple text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Lavender (#685BC7)

Add .bg-lavender and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-lavender text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Plum (#8A1B61)

Add .bg-plum and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-plum text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Light Blue (#4698CB)

Add .bg-light-blue and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-light-blue text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Green (#009775)

Add .bg-green and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-green text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Mauve (#B06C96)

Add .bg-mauve and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-mauve text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Red (#EE2737)

Add .bg-red and .text-white CSS classes to achieve the background color below with white text.

<div class="bg-red text-white container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

X-Light Blue (#77C5D5)

Add .bg-xlight-blue CSS class to achieve the background color below.

<div class="bg-xlight-blue container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Lime (#97D700)

Add .bg-lime CSS class to achieve the background color below.

<div class="bg-lime container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Light Lime (#CDEA80)

Add .bg-light-lime CSS class to achieve the background color below.

<div class="bg-light-lime container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Light Lavender (#9FAEE5)

Add .bg-light-lavender CSS class to achieve the background color below.

<div class="bg-light-lavender container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Light Yellow (#F3D54E)

Add .bg-light-yellow CSS class to achieve the background color below.

<div class="bg-light-yellow container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Dark Yellow (#ED8B00)

Add .bg-dark-yellow CSS class to achieve the background color below.

<div class="bg-dark-yellow container">
    <h4>This is an H4</h4>
    <label class='category'>This is a "category"</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ullamcorper dolor, eget hendrerit tortor. Curabitur congue, justo a porta dictum, tortor purus varius eros, 
    at sagittis mauris sapien non neque. Vivamus ut mauris nec nunc commodo tincidunt nec nec erat. Donec condimentum tempus libero, id blandit nisl.</p>
    <p><a href='#'>This is a link</a>.</p>
</div>

Animations

Scale Card

Add .scale-card CSS class to the parent div containing the .card elements to be scaled on hover.

<div class="row scale-card">
	<div class="col col-12 col-xs-12 col-md-4">
		<div class="w-100 mx-auto" style="margin-bottom:3%;max-width:520px;">
			<a href="https://chestcongress2022.com/" target="_blank" class="no-decoration">
				<div class="hover-shadow card card-rectangle h-100 border-0">
					<img class="card-img-top" alt="CHEST Congress 2022" src="/-/media/chesnetorg/global/images/home-page/520x200-congress2022.ashx" />
					<div class="card-body">
						<div class="category">CONFERENCE</div>
						<h4>CHEST Congress 2022</h4>
						<p class="card-text">Join us in Bologna, and make a long-term investment in your professional development</p>
					</div><!-- /.card-body -->
				</div><!-- /.card -->
			</a>
		</div>
	</div><!-- /.col -->
</div><!-- /.row.scale-card -->

CONFERENCE

CHEST Congress 2022

Join us in Bologna, and make a long-term investment in your professional development

SIMULATION

Difficult Airway Management

Maximize procedural success and patient safety through this hands-on course

WEBINAR

Lung cancer management

Don't miss the last live webinar in this five-part series, plus watch the others on demand

Scale Image

Add .scale-image CSS class to the parent div containing the .card elements with images or icons (SVG or Font Awesome) to be scaled on hover.

<div class="row scale-image">
	<div class="shadow col-12 col-md-6 col-lg-4 py-2">
		<a href="/Topic-Collections/Pulmonary-Vascular-Disease" target="_blank">
			<div class="card h-100">
				<div class="card-body h-100 text-center">
					<img src="/-/media/chesnetorg/Guidelines-and-Topic-Collections/ICONS-pvd.png" style="height:96px; width:96px;" alt="Pulmonary icon" data-pin-no-hover="true">
					<h3>Pulmonary Vascular Disease</h3>
				</div><!-- /.card-body -->
			</div><!-- /.card -->
		</a>
	</div><!-- /.col -->
</div><!-- /.row.scale-image -->

Pulmonary Vascular Disease

Sleep

Thoracic Oncology