341 lines
15 KiB
Plaintext
341 lines
15 KiB
Plaintext
|
# Cards
|
||
|
# Cards - Bootstrap 4
|
||
|
snippet car
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x180/}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${4:Some quick example text to build on the card title and make up the bulk of the card's content.}</p>
|
||
|
<a href="${5:#}" class="btn btn-primary">${6:Button}</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards content type - Bootstrap 4
|
||
|
snippet carct
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x180/?text=Image cap}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${4:Some quick example text to build on the card title and make up the bulk of the card's content.}</p>
|
||
|
</div>
|
||
|
<ul class="list-group list-group-flush">
|
||
|
<li class="list-group-item">${5:Cras justo odio}</li>
|
||
|
<li class="list-group-item">${5:Dapibus ac facilisis in}</li>
|
||
|
<li class="list-group-item">${5:Vestibulum at eros}</li>
|
||
|
</ul>
|
||
|
<div class="card-block">
|
||
|
<a href="${6:#}" class="card-link">${7:Card link}</a>
|
||
|
<a href="${6:#}" class="card-link">${7:Another link}</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards content type w/o list - Bootstrap 4
|
||
|
snippet carctwli
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${2:holder.js/100%x180/?text=Image cap}" alt="${3:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<p class="card-text">${1:Some quick example text to build on the card title and make up the bulk of the card's content.}</p>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards content type w/o img - Bootstrap 4
|
||
|
snippet carctwimg
|
||
|
<div class="card card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${1:Some quick example text to build on the card title and make up the bulk of the card's content.}</p>
|
||
|
<a href="${3:#}" class="card-link">${2:Card link}</a>
|
||
|
<a href="${3:#}" class="card-link">${2:Another link}</a>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards content type Title - Bootstrap 4
|
||
|
snippet carctt
|
||
|
<div class="card">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${1:Card title}</h4>
|
||
|
<h6 class="card-subtitle text-muted">${2:Support card subtitle}</h6>
|
||
|
</div>
|
||
|
<img data-src="${3:holder.js/100%x180/?text=Image}" alt="${4:Card image}">
|
||
|
<div class="card-block">
|
||
|
<p class="card-text">${5:Some quick example text to build on the card title and make up the bulk of the card's content.}</p>
|
||
|
<a href="${6:#}" class="card-link">${7:Card link}</a>
|
||
|
<a href="${6:#}" class="card-link">${7:Another link}</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards sizing - Bootstrap 4
|
||
|
snippet carsz
|
||
|
<div class="row">
|
||
|
<div class="col-sm-6">
|
||
|
<div class="card card-block">
|
||
|
<h3 class="card-title">${1:Special title treatment}</h3>
|
||
|
<p class="card-text">${2:With supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<a href="${3:#}" class="btn btn-primary">${4:Go somewhere}</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-sm-6">
|
||
|
<div class="card card-block">
|
||
|
<h3 class="card-title">${1:Special title treatment}</h3>
|
||
|
<p class="card-text">${2:With supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<a href="${3:#}" class="btn btn-primary">${4:Go somewhere}</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards sizing w/ Custom width - Bootstrap 4
|
||
|
snippet carszc
|
||
|
<div class="card card-block" style="width: 20rem;">
|
||
|
<h3 class="card-title">${1:Special title treatment}</h3>
|
||
|
<p class="card-text">${2:With supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<a href="${3:#}" class="btn btn-primary">${4:Go somewhere}</a>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
# Cards Text alignment - Bootstrap 4
|
||
|
snippet carta
|
||
|
<div class="card card-block">
|
||
|
<h4 class="card-title">${1:Special title treatment}</h4>
|
||
|
<p class="card-text">${2:With supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<a href="${3:#}" class="btn btn-primary">${4:Go somewhere}</a>
|
||
|
</div>
|
||
|
<div class="card card-block text-center">
|
||
|
<h4 class="card-title">${1:Special title treatment}</h4>
|
||
|
<p class="card-text">${2:With supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<a href="${3:#}" class="btn btn-primary">${4:Go somewhere}</a>
|
||
|
</div>
|
||
|
<div class="card card-block text-right">
|
||
|
<h4 class="card-title">${1:Special title treatment}</h4>
|
||
|
<p class="card-text">${2:With supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<a href="${3:#}" class="btn btn-primary">${4:Go somewhere}</a>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards header & footer - Bootstrap 4
|
||
|
snippet carhf
|
||
|
<div class="card">
|
||
|
<div class="card-header">
|
||
|
Featured
|
||
|
</div>
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${1:Special title treatment}</h4>
|
||
|
<p class="card-text">${2:With supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<a href="${3:#}" class="btn btn-primary">${4:Go somewhere}</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards header & footer (Quote) - Bootstrap 4
|
||
|
snippet carhfq
|
||
|
<div class="card">
|
||
|
<div class="card-header">
|
||
|
Quote
|
||
|
</div>
|
||
|
<div class="card-block">
|
||
|
<blockquote class="card-blockquote">
|
||
|
<p>${1:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.}</p>
|
||
|
<footer>${2:Someone famous in }<cite title="${3:Source Title}">${3:Source Title}</cite></footer>
|
||
|
</blockquote>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards image caps - Bootstrap 4
|
||
|
snippet caric
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x180/}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${4:This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="card">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${4:This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
<img class="card-img-bottom" data-src="${1:holder.js/100%x180/}" alt="${2:Card image cap}">
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards image overlays - Bootstrap 4
|
||
|
snippet cario
|
||
|
<div class="card card-inverse">
|
||
|
<img class="card-img" data-src="holder.js/100%x270/#55595c:#373a3c/text:Card image" alt="Card image">
|
||
|
<div class="card-img-overlay">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${4:This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards inverted text - Bootstrap 4
|
||
|
snippet carit
|
||
|
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
|
||
|
<div class="card-block">
|
||
|
<h3 class="card-title">${1:Special title treatment}</h3>
|
||
|
<p class="card-text">${2:With supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<a href="${3:#}" class="btn btn-primary">${4:Button}</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards background color - Bootstrap 4
|
||
|
snippet carbgc
|
||
|
<div class="card card-inverse card-${1:primary|success|info|warning|danger} text-center">
|
||
|
<div class="card-block">
|
||
|
<blockquote class="card-blockquote">
|
||
|
<p>${7:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.}</p>
|
||
|
<footer>${8:Someone famous in }<cite title="${9:Source Title}">${9:Source Title}</cite></footer>
|
||
|
</blockquote>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards groups - Bootstrap 4
|
||
|
snippet cargr
|
||
|
<div class="card-group">
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x180/}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${5:This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x180/}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${5:This card has supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x180/}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${5:This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards decks - Bootstrap 4
|
||
|
snippet cardk
|
||
|
<div class="card-deck-wrapper">
|
||
|
<div class="card-deck">
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x200/}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${5:This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x200/}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${5:This card has supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x200/}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${5:This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards columns - Bootstrap 4
|
||
|
snippet carcol
|
||
|
<div class="card-columns">
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x160/}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">{4:Card title that wraps to a new line}</h4>
|
||
|
<p class="card-text">${5:This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.}</p>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="card card-block">
|
||
|
<blockquote class="card-blockquote">
|
||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
|
<footer>
|
||
|
<small class="text-muted">
|
||
|
${8:Someone famous in }<cite title="${9:Source Title}">Source Title</cite>
|
||
|
</small>
|
||
|
</footer>
|
||
|
</blockquote>
|
||
|
</div>
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="${1:holder.js/100%x160/}" alt="${2:Card image cap}">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${5:This card has supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="card card-block card-inverse card-primary text-center">
|
||
|
<blockquote class="card-blockquote">
|
||
|
<p>${7:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.}</p>
|
||
|
<footer>
|
||
|
<small>
|
||
|
${8:Someone famous in }<cite title="${9:Source Title}">${9:Source Title}</cite>
|
||
|
</small>
|
||
|
</footer>
|
||
|
</blockquote>
|
||
|
</div>
|
||
|
<div class="card card-block text-center">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${5:This card has supporting text below as a natural lead-in to additional content.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
<div class="card">
|
||
|
<img class="card-img" data-src="${1:holder.js/100%x260/}" alt="${2:Card image}">
|
||
|
</div>
|
||
|
<div class="card card-block text-right">
|
||
|
<blockquote class="card-blockquote">
|
||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
|
<footer>
|
||
|
<small class="text-muted">
|
||
|
${8:Someone famous in }<cite title="${9:Source Title}">${9:Source Title}</cite>
|
||
|
</small>
|
||
|
</footer>
|
||
|
</blockquote>
|
||
|
</div>
|
||
|
<div class="card card-block">
|
||
|
<h4 class="card-title">${3:Card title}</h4>
|
||
|
<p class="card-text">${5:This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.}</p>
|
||
|
<p class="card-text"><small class="text-muted">${6:Last updated 3 mins ago}</small></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|
||
|
# Cards groups - Bootstrap 4
|
||
|
snippet cargr
|
||
|
<div class="card-group">
|
||
|
<div class="card">
|
||
|
<img class="card-img-top" data-src="..." alt="Card image cap">
|
||
|
<div class="card-block">
|
||
|
<h4 class="card-title">${1:Card title}</h4>
|
||
|
<p class="card-text">${2:Card text}</p>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
endsnippet
|
||
|
|