Rebel News
Style Guidebook

Telling the other side of the story.

At Rebel News we fearlessly take on that “Media Party”. We tell it like it is, and we examine the world from a different perspective — a side of the story you won't get anywhere else.

Typography

Because the internet is mostly made of words

Fonts

Headline font: Futura PT

Body font: PT Serif

Headline Styles

This line is an example of our H1 Style Font size: 2.5rem

This line is an example of our H2 Style Font size: 2rem

This line is an example of our H3 Style Font size: 1.75rem

This line is an example of our H4 Style Font size: 1.5rem

This line is an example of our H5 Style Font size: 1rem
This line is an example of our H6 Style Font size: .75rem

Body Text

Amplify theme is designed with a modern, clean, and user-friendly aesthetic in mind. Inspired by minimalism and functionality, the theme aims to provide a seamless and intuitive browsing experience. Font size: 1.15rem / 18px

This line rendered as bold text.

This line rendered as italicized text.

This is an example link

Here is the example of Unordered list

  • Amplify theme is designed with a modern
  • User-friendly aesthetic in mind.
  • Inspired by minimalism and functionality.
  • the theme aims to provide a seamless and intuitive browsing experience

Here is the example of Ordered list

  1. Amplify theme is designed with a modern
  2. User-friendly aesthetic in mind.
  3. Inspired by minimalism and functionality.
  4. the theme aims to provide a seamless and intuitive browsing experience

Here is the example of Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Text Colors

This text color corresponds to .text-primary class.

This text color corresponds to .text-secondary class.

This color corresponds to .text-success class

This color corresponds to .text-info class

This color corresponds to .text-warning class

This text color corresponds to .text-danger class

This color corresponds to .text-light class

This color corresponds to .text-dark class

This color corresponds to .text-muted class

This color corresponds to .text-white class

Brand Palette

Convey meaning through color with a handful of color utility classes.

Primary
Hex: #078FD4
Class: .bg-primary

Secondary
Hex: #DC143C
Class: .bg-secondary

Success
Hex: #28A745
Class: .bg-success

Danger
Hex: #DC143C
Class: .bg-danger

Warning
Hex: #FFC704
Class: .bg-warning

Info
Hex: #17A2B8
Class: .bg-info

Light
Hex: #F0F0F0
Class: .bg-light

Dark
Hex: #343A40
Class: .bg-dark

Border color

Change the border color using utilities built on our theme colors.


<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
    

Buttons

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Solid buttons

Outline buttons

Large Buttons

Standard Buttons

Small Buttons

Cards

Cards provide a flexible and extensible content container with multiple variants and options.

News Cards


<article class="card card-news h-100">
   <div class="card-img-top">
      <a href="/new_zealand_reports">
      <img class="w-100" src="https://assets.nationbuilder.com/themes/66a786065ac8f9276dc5b1bc/attachments/original/1722582185/default-meta-placeholder.jpg" alt="Next News" />
      </a>
   </div>
   <div class="card-body">
      <h5 class="feature-tag">
         <span class="badge badge-primary font-weight-normal py-2 px-3">Australia</span>
      </h5>
      <h5 class="card-title text-no-trans">
         <a class="text-black" href="/new_zealand_reports">New Zealand reports huge departures of citizens amid surge in immigrant arrivals</a>
      </h5>
      <h6 class="post-date font-weight-semibold mb-0">
         <div class="byline h6 text-muted">
            <span> <a href="/5999468" class="linked-signup-name">voxara team</a>   |   August 15, 2024</span>
         </div>
      </h6>
   </div>
</article>

No Image News Cards


<article class="card card-news h-100">
   <div class="card-body">
      <h5 class="feature-tag">
         <span class="badge badge-primary font-weight-normal py-2 px-3">Australia</span>
      </h5>
      <h5 class="card-title text-no-trans">
         <a class="text-black" href="/australian_government">Australian government's Digital ID plan raises privacy concerns</a>
      </h5>
      <h6 class="post-date font-weight-semibold mb-0">
         <div class="byline h6 text-muted">
            <span> <a href="/5999468" class="linked-signup-name">voxara team</a>   |   August 15, 2024</span>
         </div>
      </h6>
   </div>
</article>

Event Cards


<article class="card card-event position-relative h-100">
   <div class="image card-img-top position-relative">
      <a href="/sample-rebel-event">    
      <img src="https://assets.nationbuilder.com/themes/66a786065ac8f9276dc5b1bc/attachments/original/1722582185/default-meta-placeholder.jpg?1722582185" alt="Event">
      </a>
   </div>
   <div class="card-body details w-100">
      <div class="event-details">
         <div class="date bg-secondary text-white p-2">
            <h4>31 Aug</h4>
         </div>
         <div class="event-title-location pl-3">
            <h4 class="text-no-trans"><a class="text-black" href="/sample-rebel-event">Sample Rebel Event</a></h4>
            <h6>
               <i class="fa-solid fa-location-dot text-primary" aria-hidden="true"></i>
               Rebel News 
            </h6>
         </div>
      </div>
   </div>
</article>

Rebel News+


<article class="card card-rebel-plus bg-black text-white h-100">
   <div class="card-img-top">
      <img src="https://assets.nationbuilder.com/themes/66a786065ac8f9276dc5b1bc/attachments/original/1722582185/default-meta-placeholder.jpg" alt="Latest News" />
      <div class="overlay-items lock">
         <a href="/plus"> <i class="fa-solid fa-lock" aria-hidden="true"></i></a>
      </div>
   </div>
   <div class="card-body">
      <a href="/plus">
         <h4 class="card-title text-white">Kamloops: The Buried Truth</h4>
      </a>
   </div>
</article>

Team Profile Card

profile-cover
Alexandra Lavoie
Alexandra Lavoie

Alexa graduated with a degree in biology from Laval University. Throughout her many travels, she has seen political instability as well as corruption. While she witnessed social disorder on a daily basis, she has always been a defender of society’s most vulnerable. She’s been around the world several times, and now joins Rebel News to shed light on today’s biggest stories.

profile-cover
Sheila Gunn Reid
Sheila Gunn Reid

Sheila Gunn Reid is the Alberta Bureau Chief for Rebel News and host of the weekly The Gunn Show with Sheila Gunn Reid. She's a mother of three, conservative activist, and the author of best-selling books including Stop Notley.


<article class="card card-team-profile text-center h-100">
    <div class="card-img-top profile-cover">
        <img src="https://assets.nationbuilder.com/themes/66a786065ac8f9276dc5b1bc/attachments/original/1722582185/default-meta-placeholder.jpg?1722582185" alt="profile-cover" />
    </div>
    <div class="profile-image position-relative rounded-circle">
        <a href="https://newreb-therebel.nationbuilder.com/journalist_alexandra_lavoie">
            <img src="https://assets.nationbuilder.com/therebel/profile_images/15d150c4e345c7206fcf761c1a41239ce848c8b1.jpg?1674164698" alt="Alexandra Lavoie" class="rounded-circle border" width="150" height="150" />
        </a>
    </div>
    <div class="card-body">
        <h5 class="card-title font-weight-bold">
            <a class="text-black" href="https://newreb-therebel.nationbuilder.com/journalist_alexandra_lavoie">Alexandra Lavoie</a>
        </h5>
        <p>Alexa graduated with a degree in biology from Laval University. Throughout her many travels, she has seen political instability as well as corruption. While she witnessed social disorder on a daily basis, she has always been a defender of society’s most vulnerable. She’s been around the world several times, and now joins <em>Rebel News</em> to shed light on today’s biggest stories.</p>
    </div>
</article>

Horizontal Card


<article class="card card-news-horizontal h-100">
   <div class="card-img-top order-lg-2">
      <a href="/trinity_western_s_freedom_of">  
         <img class="w-100" src="https://assets.nationbuilder.com/themes/66a786065ac8f9276dc5b1bc/attachments/original/1722582185/default-meta-placeholder.jpg" alt="Latest News" />
      </a>
   </div>
   <div class="card-body order-lg-1">
      <h5 class="feature-tag">
         <span class="badge badge-primary font-weight-normal py-2 px-3">Canada</span>
      </h5>
      <h2><a class="text-black" href="/trinity_western_s_freedom_of">After one legal victory, Trinity Western's freedom of religion battle continues</a></h2>
      <p>I've been covering the case of Trinity Western University for a while now. They're ready to open their new law school, but three law societies won't accept the credentials of...</p>
      <div class="byline h6 text-muted mb-3 d-flex flex-wrap align-items-center">
         <img src="https://assets.nationbuilder.com/therebel/profile_images/a14dade4fd55bee5f4d86ef2857b2815324fab0d.jpg?1626891217" alt="Ezra Levant" class="flex-shrink-0 rounded-circle border border-dark" width="36" />
         <div class="d-flex flex-wrap byline-details">
            <span class="ml-2"> <a href="/journalist_ezra_levant" class="linked-signup-name">Ezra Levant</a>   |   August 21, 2024  </span>
              |      News
         </div>
      </div>
   </div>
</article>

Redirect Card

TAKE ACTION

DONATE: Help Jasper!

Rebel News is crowdfunding emergency relief funds to help the wildfire-stricken people of Jasper, Alberta. 100% of these proceeds will go to disaster relief efforts and rebuilding the local community. Please chip in a donation here to help out.

DONATE NOW

<h4>TAKE ACTION</h4>
<div class="row bg-white p-3">
   <div class="col-12 col-md-6 mb-md-0 mb-3">
      <a title="Help Jasper" rel="noopener" href="https://www.givesendgo.com/helpjasper" target="_blank">
         <img class="w-100" title="Help Jasper" src="jasper-social.jpeg" alt="" />
      </a>
   </div>
   <div class="col-12 col-md-6">
      <h5 class="mb-3">DONATE: Help Jasper!</h5>
      <p>Rebel News is crowdfunding emergency relief funds to help the wildfire-stricken people of Jasper, Alberta. 100% of these proceeds will go to disaster relief efforts and rebuilding the local community. Please chip in a donation here to help out.</p>
      <a class="btn btn-block btn-secondary margintop" rel="noopener" href="https://www.givesendgo.com/helpjasper" target="_blank">DONATE NOW</a>
   </div>
</div>

Training Videos Card

profile-image

REBEL + VOXARA Basic Training

Added by
profile-image

REBEL + VOXARA Basic Training

Added by

<article class="card card-training-video-block bg-white">
  <div class="training-video-meta">
    <iframe id="video1" src="https://drive.google.com/file/d/1cH77XfPGRMGphE8XwmPBUTTBeH6fujht/preview" width="640" height="480" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
  </div>
 
  <div class="card-body">
    <div class="profile-image">
      <img src="https://assets.nationbuilder.com/therebel/profile_images/6df67833bf6573e0ffdcc5623a121ce5703663be.?1722846926" alt="profile-image">
    </div>
    <div class="video-details">
      <h4>REBEL + VOXARA Basic Training</h4>
      <h6 class="text-muted">Added by <span class="name ml-1"><span class="linked-signup-name">Albert Gersh</span></span></h6>
    </div>
  </div>
</article>

Image Size Guidelines

Discover the recommended dimensions for common types of website images

Meta / Social Media image: 1200 x 628 pixels

Inner page Banner: 1400 x 600 pixels

Home/Hero image: 1920 x 1280 pixels