dotvim/vim/UltiSnips/html_bootstrap4_components-cards.snippets

# 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