NIBC Lot

The bubble component consists of an empty div that forms a bubble. This bubble is 5 times the width of its border-radius. The arrow attached to it is two times the width of the border-radius and is positioned two times the border-radius from the left or from the top.

Modifiers

theme pink

zonnepanelen


			
				<div class="c-bubble c-bubble--theme-pink">
	<div class="c-bubble__content">
		<div class="c-bubble__text">zonnepanelen</div>
	</div>
</div>

Bottom


			
				<div class="c-bubble c-bubble--arrow-bottom">
	<div class="c-bubble__content">
	</div>
</div>

Close

In case a close button is needed, this will be placed inside the c-bubble__close-button-holder. Inside this holder, a c-button can be placed.


			
				<div class="c-bubble ">
	<div class="c-bubble__content">
	</div>
	<button class="c-bubble__button">
		<span class="fal fa-times c-bubble__icon" aria-hidden="true"></span>
	</button>
</div>

Default

… een hypotheek zonder zorgen. Ik heb al genoeg aan mij hoofd.


			
				<div class="c-bubble ">
	<div class="c-bubble__content">
		<div class="c-bubble__text">… een hypotheek <strong>zonder zorgen</strong>. Ik heb al genoeg
			aan mij hoofd.</div>
		<div class="c-bubble__visual">
			<div class="c-bubble__image-background c-bubble__image-background--pink"></div>
			<div class="c-bubble__image-container" style="background-image: url('/assets/images/general/chat/chat-01.jpg');">
				<svg class="c-bubble__image" viewBox="0 0 1 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
					<clipPath class="c-bubble__mask" id="c-bubble__mask" clipPathUnits="objectBoundingBox">
						<path id="c-bubble__path" d="M.2337.1505.7211.1846A.3253.3253,0,0,1,.8627.2155.197.197,0,0,1,.9379.2838a.324.324,0,0,1,.0444.138L.997.5094A.2186.2186,0,0,1,.8177.761L.8043.7628.2617.82a.2185.2185,0,0,1-.24-.1945l0-.0038L.0008.3875A.2186.2186,0,0,1,.2337.1505Z" />
					</clipPath>
				</svg>
			</div>
		</div>
	</div>
</div>

Left


			
				<div class="c-bubble c-bubble--arrow-left">
	<div class="c-bubble__content">
	</div>
</div>

Right responsive

When the screensize becomes the size of a tablet, the arrow will be pointing to the bottom.


			
				<div class="c-bubble c-bubble--arrow-right-responsive">
	<div class="c-bubble__content">
	</div>
</div>

Right


			
				<div class="c-bubble c-bubble--arrow-right">
	<div class="c-bubble__content">
	</div>
</div>

Top


			
				<div class="c-bubble c-bubble--arrow-top">
	<div class="c-bubble__content">
	</div>
</div>

Documentation

Modifiers

c-bubble--arrow-bottom

Use this modifier to set an arrow at the bottom of the bubble
c-bubble--arrow-top

Use this modifier to set an arrow at the top of the bubble
c-bubble--arrow-right

Use this modifier to set an arrow at the right of the bubble
c-bubble--arrow-left

Use this modifier to set an arrow at the left of the bubble