Behind the Bubbles – Meet Our Soda Masters
Ever wondered who crafts your favorite fizzy drinks? Meet the talented team behind the magic at Sam’s Soda Fountain. From flavor experiments to perfect pours, they make every sip sparkle!
Riley Owen
Style Guidebook
Designed for Impact
Riley Owen is designed for organizations that focus on results, not just promises. Our theme helps you communicate clearly, engage supporters effectively, and turn momentum into measurable action—so your message doesn’t just reach people, it moves them.
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: Roboto
Body font: Google Sans
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
Riley Owen 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: 1rem / 16px
This line rendered as bold text.
This line rendered as italicized text.
Here is the example of Unordered list
- Riley Owen 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
- Riley Owen 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: #900000
Class: .bg-primary
Hex: #FF6666
Class: .bg-primary-100
Hex: #FF3432
Class: .bg-primary-200
Hex: #FF0000
Class: .bg-primary-300
Hex: #CC0000
Class: .bg-primary-400
Hex: #660100
Class: .bg-primary-600
Hex: #330000
Class: .bg-primary-700
Hex: #000000
Class: .bg-primary-800
Hex: #000000
Class: .bg-primary-900
Secondary
Hex: #092864
Class: .bg-secondary
Hex: #4C82ED
Class: .bg-secondary-100
Hex: #1F62E9
Class: .bg-secondary-200
Hex: #144DC1
Class: .bg-secondary-300
Hex: #103C92
Class: .bg-secondary-400
Hex: #041636
Class: .bg-secondary-600
Hex: #010307
Class: .bg-secondary-700
Hex: #000000
Class: .bg-secondary-800
Hex: #000000
Class: .bg-secondary-900
Success
Hex: #28A745
Class: .bg-success
Hex: #AFECBD
Class: .bg-success-100
Hex: #86E29B
Class: .bg-success-200
Hex: #5DD879
Class: .bg-success-300
Hex: #34CE57
Class: .bg-success-400
Hex: #1E7E34
Class: .bg-success-600
Hex: #145523
Class: .bg-success-700
Hex: #0A2C12
Class: .bg-success-800
Hex: #010201
Class: .bg-success-900
Danger
Hex: #DC3545
Class: .bg-danger
Hex: #FAE3E5
Class: .bg-danger-100
Hex: #F3B7BD
Class: .bg-danger-200
Hex: #EB8C95
Class: .bg-danger-300
Hex: #E4606D
Class: .bg-danger-400
Hex: #BD2130
Class: .bg-danger-600
Hex: #921925
Class: .bg-danger-700
Hex: #66121A
Class: .bg-danger-800
Hex: #3B0A0F
Class: .bg-danger-900
Warning
Hex: #FFC107
Class: .bg-warning
Hex: #FFF4D3
Class: .bg-warning-100
Hex: #FFE7A0
Class: .bg-warning-200
Hex: #FFDB6D
Class: .bg-warning-300
Hex: #FFCE3A
Class: .bg-warning-400
Hex: #D39E00
Class: .bg-warning-600
Hex: #A07800
Class: .bg-warning-700
Hex: #6D5200
Class: .bg-warning-800
Hex: #3A2C00
Class: .bg-warning-900
Info
Hex: #17A2B8
Class: .bg-info
Hex: #A7E9F4
Class: .bg-info-100
Hex: #7ADEEE
Class: .bg-v-200
Hex: #4CD3E9
Class: .bg-info-300
Hex: #1FC8E3
Class: .bg-info-400
Hex: #117A8B
Class: .bg-info-600
Hex: #0C525D
Class: .bg-info-700
Hex: #062A30
Class: .bg-info-800
Hex: #000203
Class: .bg-info-900
Light
Hex: #F0F0F0
Class: .bg-light
Hex: #FFFFFF
Class: .bg-light-100
Hex: #FDFDFD
Class: .bg-light-200
Hex: #F0F0F0
Class: .bg-light-300
Hex: #E3E3E3
Class: .bg-light-400
Hex: #BDBDBD
Class: .bg-light-600
Hex: #A4A4A4
Class: .bg-light-700
Hex: #8A8A8A
Class: .bg-light-800
Hex: #717171
Class: .bg-light-900
Dark
Hex: #343A40
Class: .bg-dark
Hex: #96A0AA
Class: .bg-dark-100
Hex: #7A8793
Class: .bg-dark-200
Hex: #626D78
Class: .bg-dark-300
Hex: #4B545C
Class: .bg-dark-400
Hex: #1D2124
Class: .bg-dark-600
Hex: #060708
Class: .bg-dark-700
Hex: #000000
Class: .bg-dark-800
Hex: #000000
Class: .bg-dark-900
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
Behind the Bubbles – Meet Our Soda Masters
Ever wondered who crafts your favorite fizzy drinks? Meet the talented team behind the magic at Sam’s Soda Fountain. From flavor experiments to perfect pours, they make every sip sparkle!
<article class="card card-news h-100">
<div class="card-img-top position-relative">
<a href="#">
<img src="https://assets.nationbuilder.com/voxaraprojects/pages/55236/meta_images/original/soda-master.jpg?1766999982" alt="Behind the Bubbles – Meet Our Soda Masters" />
</a>
</div>
<div class="card-body px-3 pt-3 pb-0 position-relative">
<h4 class="card-title mb-2 text-uppercase font-weight-bold">
<a class="text-dark" href="#">
Behind the Bubbles – Meet Our Soda Masters
</a>
</h4>
<p class="text-primary author mb-2 small">
<span class="byline-element">
<span class="linked-signup-name">Voxara Team</span>
</span>
<span class="byline-element divider"> | </span>
<span class="byline-element">January 09, 2026</span>
</p>
<p>
Ever wondered who crafts your favorite fizzy drinks? Meet the talented team behind the magic at Sam’s Soda Fountain. From flavor experiments to perfect pours, they make every sip sparkle!
</p>
</div>
<div class="card-footer bg-transparent border-0 pt-0 px-3 pb-4">
<a class="btn btn-sm btn-primary m-0" href="#">
LEARN MORE
</a>
</div>
</article>
Event Cards
Sam’s Soda Fountain, Main Street, Springfield
Fizz Fest 2026 – A Bubble Bonanza!
January 28, 2026 |
06:00 PM
Get ready for the ultimate fizzy celebration! 🥤 Fizz Fest 2026 is a day packed with soda tastings, fun games, live music, and interactive workshops.
Sam’s Soda Fountain, Downtown Plaza
Candy Cane Fizz Launch Party
January 31, 2026 |
06:00 PM
Celebrate the holiday season with the launch of our limited-edition Candy Cane Fizz! Sip on sweet, sparkling holiday drinks, enjoy festive music.
<article class="card card-events position-relative p-2">
<div class="image card-img-top position-relative">
<a href="#">
<img class="w-100 card-img" src="https://assets.nationbuilder.com/themes/63f5aa6c4445ea53bb43c49c/attachments/original/1720078566/event-img01.jpg?1720078566" alt="Event" />
</a>
</div>
<div class="card-body details w-100 py-2 px-0">
<div class="inner-text">
<div class="top-panel mt-2">
<div class="top-panel-lft">
<div class="ribbon bg-primary text-white px-4 py-2">
<i class="fas fa-calendar-alt mr-1" aria-hidden="true"></i> December 08, 2022 <br>
<i class="fas fa-clock mr-1" aria-hidden="true"></i> 01:00 PM
</div>
</div>
</div>
<div class="bottom-panel mt-3">
<div class="bottom-panel-rgt">
<i class="fas fa-user text-purple-deluge" aria-hidden="true"></i> Peter McHugh
</div>
<div class="bottom-panel-lft">
<i class="fas fa-map-marker-alt text-purple-deluge" aria-hidden="true"></i> Google Meet
</div>
</div>
<div class="inner-cont py-3 float-none d-inline-block w-100">
<h4 class="font-weight-bold mb-0">
<a href="#">Experience the Magic of Creativity and Technology!</a>
</h4>
</div>
<div class="card-footer p-0 w-100 border-0">
<a class="text-green-accessible chevron-link read-more mt-3" href="#">Read more</a>
</div>
</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: 2330 x 1120 pixels
Home Page Hero Video Setup
This site supports a dynamic video hero section on the homepage. Follow the instructions below to correctly upload and activate the hero video.
1. Create the Video Page
Navigate to:
Admin → Pages → Home
Create a new Basic type subpage with the following title: Home Hero Video with slug: /home-hero-video
2. Upload the Video
Open the Home Hero Video page and:
- Scroll to File Attachments
- Upload your MP4 video
File size must be under 10 MB
3. Insert the Video Link
Paste the copied video URL into the page content editor of the
Home Hero Video page.
No additional formatting is required.
4. Activate the Video on the Homepage
Open the Home page and add the following tag:
Video
Once this tag is applied, the hero video will automatically appear in the homepage hero area.