コピペだけでつかえる業務一覧やアイテム一覧のデザインパターン集

弊社ではウェブサイトの受託案件も数多く対応させていただいております。
それらのほぼすべてのサイトが、いわゆるテンプレートにコンテンツを埋め込んでいくような簡易なものではなく、クライアントのニーズにあわせてゼロから制作しています。
そんななかでもやはりよくつかうパターンというのは存在しますので、それらのテンプレートを残しておくことで、よりスピーディーな納品を実現できるようにとの考えからこのようなものをまとめていますが、特に自分だけができるようなスキルでもないので、下記に公開しています。

ベーシックタイプ

デモはこちら

<div id="services">
	<div class="container">
		<h2>業務一覧<span>Service</span></h2>
		<p class="desc">いろはにほへとちりぬるを<br>わかよたれそつねならむうゐのおくやまけふこえて<br>あさきゆめみしゑひもせす色はにほへど散りぬるを<br>我が世たれぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず</p>
		<div class="row">
			<div class="column">
				<figure><img src="画像のURL" alt="画像の説明"></figure>
				<h3>メニュータイトル<span>Menu title</span></h3>
				<p>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす色はにほへど散りぬるを我が世たれぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず</p>
				<a href="">詳しくみる</a>
			</div>
			<div class="column">
				<figure><img src="画像のURL" alt="画像の説明"></figure>
				<h3>メニュータイトル<span>Menu title</span></h3>
				<p>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす色はにほへど散りぬるを我が世たれぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず</p>
				<a href="">詳しくみる</a>
			</div>
			<div class="column">
				<figure><img src="画像のURL" alt="画像の説明"></figure>
				<h3>メニュータイトル<span>Menu title</span></h3>
				<p>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす色はにほへど散りぬるを我が世たれぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず</p>
				<a href="">詳しくみる</a>
			</div>
		</div>
	</div>
</div>

body {
	margin: 0;
}
#services {
	
}
#services .container {
	padding: 2em 0;
}
#services .container h2 {
	text-align: center;	
}
#services .container h2 span {
	display: block;
	font-size: .75em;
}
#services .container p.desc {
	margin: 1em 0 2em;
	font-size: 1.25em;
	line-height: 1.8;
	text-align: center;	
}		
#services .container .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	width: 960px;
}
#services .container .row .column {
	width: 31%;
	margin: 0 1%;
}
#services .container .row .column figure {
	margin: 0;
}
#services .container .row .column figure img {
	width: 100%;
	height: auto;
}
#services .container .row .column h3 {
	margin: .5em 0;
}
#services .container .row .column h3 span {
	display: block;
	font-size: .75em;
}
#services .container .row .column p {
	margin: .5em 0;
	font-size: .875em;
	line-height: 1.8;
}
#services .container .row .column a {
	font-size: .875em;
	color: inherit;
	text-decoration: none;
	transition: .3s;
}
#services .container .row .column a:hover {
	opacity: .8;
}