Bootstrap Components

You can use all native Bootstrap Components, as described and documented on the official Bootstrap documentation, make sure you've selected the right version: v5.2! However, this page does not describe all provided components, moreover it will show all NewsHub native and modified ones.

View all native Components

Callouts

We highly dislike Bootstrap's native alert design, thus NewsHub provides an own one using an own class name - so you can still use the native stylings as well: callout.

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

<div class="callout callout-primary" role="alert">
    A simple primary alert with <a href="#" class="callout-link">an example link</a>. Give it a click if you like.
</div>
<div class="callout callout-secondary" role="alert">
    A simple secondary alert with <a href="#" class="callout-link">an example link</a>. Give it a click if you like.
</div>
<div class="callout callout-success" role="alert">
    A simple success alert with <a href="#" class="callout-link">an example link</a>. Give it a click if you like.
</div>
<div class="callout callout-danger" role="alert">
    A simple danger alert with <a href="#" class="callout-link">an example link</a>. Give it a click if you like.
</div>
<div class="callout callout-warning" role="alert">
    A simple warning alert with <a href="#" class="callout-link">an example link</a>. Give it a click if you like.
</div>
<div class="callout callout-info" role="alert">
    A simple info alert with <a href="#" class="callout-link">an example link</a>. Give it a click if you like.
</div>
<div class="callout callout-light" role="alert">
    A simple light alert with <a href="#" class="callout-link">an example link</a>. Give it a click if you like.
</div>
<div class="callout callout-dark" role="alert">
    A simple dark alert with <a href="#" class="callout-link">an example link</a>. Give it a click if you like.
</div>

Simple Cards

Instead of overriding the default Cards design, NewsHub provides an additional class name to apply our own stylings.

Card Content

Card Title

Card Content

Card Title

Card Content

Card Footer

<div class="card card-simple">
    <div class="card-body">
        <p class="mb-0">Card Content</p>
    </div>
</div>

<div class="card card-simple">
    <div class="card-header">
        <div class="card-title">Card Title</div>
    </div>
    
    <div class="card-body">
        <p class="mb-0">Card Content</p>
    </div>
</div>

<div class="card card-simple">
    <div class="card-header">
        <div class="card-title">Card Title</div>
    </div>
    
    <div class="card-body">
        <p>Card Content</p>
    </div>

    <div class="card-footer">
        Card Footer
    </div>
</div>

Double Click Partial

The double click partial can be used on any CMS Page and provides a GDPR friendly way to embed external content into your website. It relies only on a really small JavaScript snippet. You can override the title, description and button text using the additional arguments as shown below.

Third-Party Service

This content is hosted on a different website, which may sets cookies. Click on the button below, when you're cool with that.


{% set media %}
<!-- Your Iframe or other external content -->
{% endset %}
{% partial "double-click" external_content=media %}

Custom Title

Custom Description


{% set media %}
<!-- Your Iframe or other external content -->
{% endset %}
{% partial "double-click" 
    external_content=media 
    privacy_title="Custom Title" 
    privacy_description="Custom Description" 
    privacy_button_label="Custom Button" 
%}