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.
Logos on
background color
The full color logos should only be used on very light or very dark backgrounds.
Don’t use the full color logo on top of a photograph or gradient unless it sits on a very light or very dark area of the image.
Logo loses its meaning in midtones or areas with a lot of color.
Dark areas of logo remain legible
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.
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
- 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 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
31 Aug
Sample Rebel Event
Rebel News
31 Dec
Sample Event
144 Ave - 94 St.
<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
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.
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
Canada
After one legal victory, Trinity Western's freedom of religion battle continues
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...
<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
REBEL + VOXARA Basic Training
Added by Albert Gersh
REBEL + VOXARA Basic Training
Added by Albert Gersh
<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

