Basic examples
Simple
Use the following simple card component with a title and a description:
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="G_Card">
<div class="G_Card-body">
<h5 class="G_Card-title">Card title</h5>
<h6 class="G_Card-subtitle">Card subtitle</h6>
<p class="G_Card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
Image
Use the following example of a card element with an image for blog posts, user cards, and many more:
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="G_Card">
<img src="your-image.webp" class="G_Card-ImgTop" alt="Fissure in Sandstone" />
<div class="G_Card-body">
<h5 class="G_Card-title">Card title</h5>
<h6 class="G_Card-subtitle">Card subtitle</h6>
<p class="G_Card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
Image with ripple
To add a .ripple to add ripple effect on click.
<div class="G_Card">
<div class="bgImage hoverOverlay ripple">
<img src="your-image.webp" class="Img-Fluid" alt="Beach Image " />
<a href="#!">
<div class="Mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="G_Card-body">
<h5 class="G_Card-title">Card title</h5>
<h6 class="G_Card-subtitle">Card subtitle</h6>
<p class="G_Card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
Header and footer
Add optional header and footer sections to the card.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Button
<div class="G_Card text-center">
<div class="G_Card-header">Featured</div>
<div class="G_Card-body">
<h5 class="G_Card-title">Special title treatment</h5>
<p class="G_Card-text">With supporting text below as a natural lead-in to additional
content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="G_Card-footer text-muted">2 days ago</div>
</div>
Content types
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
Body
The building block of a card is the .G_Card-body. Use it whenever you need a padded
section within a card.
<div class="G_Card">
<div class="G_Card-body">This is some text within a card body.</div>
</div>
Titles, text, and links
Card titles are used by adding .G_Card-title to a <h*> tag. In the
same way, links are added and placed next to each other by adding .G_Card-link to an
<a> tag.
Subtitles are used by adding a .G_Card-subtitle to a <h*> tag. If
the .G_Card-title and the .G_Card-subtitle items are placed in a
.G_Card-body item, the card title and subtitle are aligned nicely.
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
card link Another link
<div class="G_Card">
<div class="G_Card-body">
<h5 class="G_Card-title">Card title</h5>
<h6 class="G_Card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="G_Card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="G_Card-link">card link</a>
<a href="#" class="G_Card-link">Another link</a>
</div>
</div>
Images
.G_Card-ImgTop places an image to the top of the card. With .G_Card-text,
text can be added to the card. Text within .G_Card-text can also be styled with the
standard HTML tags.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="G_Card" >
<img src="/content/images/182.webp" class="G_Card-ImgTop" alt="Sunset Over the Sea">
<div class="G_Card-body">
<p class="G_Card-text">
Some quick example text to build on the card title and make up the bulk of the
card's
content.
</p>
</div>
</div>