List Module Full

Topic Goes Here

  • Gas Delivery - including Free Gas.
  • Towing - to responding facility or site of choice up to 3 miles.
  • Gas Delivery - including Free Gas.
  • Towing - to responding facility or site of choice up to 3 miles.

It is a long established fact that a reader will be distracted by the the lorem ipsum dummy copy. Dummy copy displays here.

Button Style Three
i List Module Full

Topic Goes Here

  • Gas Delivery - including Free Gas.
  • Towing - to responding facility or site of choice up to 3 miles.
  • Gas Delivery - including Free Gas.
  • Towing - to responding facility or site of choice up to 3 miles.

It is a long established fact that a reader will be distracted by the the lorem ipsum dummy copy. Dummy copy displays here.

Button Style Three
i List Module Full

Topic Goes Here

  • Gas Delivery - including Free Gas.
  • Towing - to responding facility or site of choice up to 3 miles.
  • Gas Delivery - including Free Gas.
  • Towing - to responding facility or site of choice up to 3 miles.

It is a long established fact that a reader will be distracted by the the lorem ipsum dummy copy. Dummy copy displays here.

Button Style Three
i List Module Full

Markup

<div class="card card-list card-title-red">

	<div class="img-wrap" style="background-image:url('https://unsplash.it/380/200?image=655')">
		<img src="https://unsplash.it/380/200?image=655" alt="" class="visuallyhidden">
	</div>

	<h4>Topic Goes Here</h4>

	<ul class="custom">
		<li><strong>Gas Delivery</strong> - including Free Gas.</li>
		<li><strong>Towing</strong> - to responding facility or site of choice up to 3 miles.</li>
		<li><strong>Gas Delivery</strong> - including Free Gas.</li>
		<li><strong>Towing</strong> - to responding facility or site of choice up to 3 miles.</li>
	</ul>

	<div class="copy-wrap">
		<p>It is a long established fact that a reader will be distracted by the  the lorem ipsum dummy copy. Dummy copy displays here.</p>
		<a href="#" class="button-link button-link-default">Button Style Three</a>
	</div>

	<!-- Do not implement this link -->
	<a href="/inc/modules/?module=list-module-full" class="module-link">
		<i class="icon info-icon">i</i>
		<span class="tool-tip">List Module Full</span>
	</a>
	<!-- Do not implement this link -->

</div>

Used to call out or compare important information into digestible points. It should be used as either a two or three column element.

Title color should be set to default at #eaeaea, selecting any of the four business line blocks should be optional. This can be changed by including .card-title to make sure the h4 is styled appropriately and .card-title-[RED, GREEN, BLUE or GOLD] to select the respective title color scheme.

This module is based on a element called a "card". Modifier classes are applyed to the card element to apply certain styles. To adjust the the titles background and color use the card-title modilfier on the card element. To apply specific colors add a dash then the color name (card-title-red, card-title-blue, card-title-green, card-title-gold). By default its grey and black.