Components Style Guide

This style guide provides a reference for developers and site builders working on the VisionInit website. It showcases reusable UI components, partials, shortcodes, and specific element styles like buttons and cards by rendering live examples using a single shortcode processed by the layout.

Color Palette

Key color variables used throughout the theme are defined in assets/scss/_variables.scss.

(This section uses a table with the colorswatch shortcode for visual clarity)

Buttons

Button styles are defined in assets/scss/_buttons.scss. They use Bootstrap classes with theme overrides.

Standard Buttons

Example HTML Structure:

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-light">Light</button>

Live Rendered Output:

Small Buttons (.btn-sm)

Example HTML Structure:

<button class="btn btn-sm btn-primary">Primary Small</button>
<button class="btn btn-sm btn-outline-primary">Outline Small</button>
<button class="btn btn-sm btn-light">Light Small</button>

Live Rendered Output:

Extra Small Buttons (.btn-xs)

Example HTML Structure:

<button class="btn btn-xs btn-primary">Primary XS</button>
<button class="btn btn-xs btn-outline-primary">Outline XS</button>
<button class="btn btn-xs btn-light">Light XS</button>

Live Rendered Output:

Special Hero Button

Used on dark/image backgrounds. Add .text-white.border-white to .btn-outline-primary.

Example HTML Structure:

<button class="btn btn-outline-primary text-white border-white">
  Hero Outline
</button>

Live Rendered Output (on dark background):

Cards & Boxes

Various card styles are used for different content types.

Offset Shadow Box (.offset-shadow-box)

Source: assets/scss/_common.scss Appearance: Static offset shadow (bottom-left). Common Usage: Sidebar widgets (blog), Subscription plan cards, Service CTA box.

Example HTML Structure:

<div class="offset-shadow-box bg-white p-4">...Content...</div>

Live Rendered Output:

Hover Shadow Card Link (.hover-shadow)

Source: assets/scss/templates/_homepage.scss Appearance: Interactive offset shadow on hover. Used for clickable cards. Common Usage: Service cards (homepage, /services/).

Example HTML Structure (using <a>):

<a href="#" class="card rounded-0 border hover-shadow ...">
  <i class="fa-solid fa-code feature-icon"></i>
  <h5>Title</h5>
  <p>Description</p>
</a>

Live Rendered Output:

Service Card

Partial: layouts/partials/components/service-card.html Appearance: Clickable card using .hover-shadow, displays icon, title, description. Usage: Called by layouts like layouts/services/list.html.

(See Live Examples on: Services Page )

Subscription Card

Partial: layouts/partials/components/subscription-card.html Appearance: Uses .offset-shadow-box, displays plan details. Usage: Called by layouts like layouts/index.html (homepage) or pages like /security-sidekick/.

Live Rendered Output:

Portfolio Card (Wide)

Partial: layouts/partials/components/portfolio-card-wide.html Appearance: Wide card (image left, text right), static shadow, object-fit: contain image. Usage: Called by layouts/services/single.html to show related projects.

(See Live Examples on individual service pages, e.g., Custom Web Dev )

Item Card (General Purpose)

Partial: layouts/partials/components/item-card.html Appearance: Vertical card (image, title, desc, tags, button). Usage: Called by list layouts like layouts/_default/list.html (e.g., Blog).

(See Live Examples on: Blog Page )

Shortcodes

Reusable content snippets callable within Markdown.

Accordion

Shortcode: accordion Source: layouts/shortcodes/accordion.html, assets/scss/templates/_accordion.scss, assets/js/accordion.js Function: Creates collapsible content sections.

Example Shortcode Usage:

{{< accordion title="Your Question Here?" >}}
The answer content, supporting **Markdown**, goes inside the shortcode tags.
{{< /accordion >}}

Image

Shortcode: image Source: layouts/shortcodes/image.html Function: Inserts an image with alignment, caption, etc.

Example Shortcode Usage:

{{< image src="/images/about/..." alt="..." caption="..." align="right" maxWidth="30%" >}}

(See Live Example on: About Page )

Color Swatch

Shortcode: colorswatch Source: layouts/shortcodes/colorswatch.html Function: Displays a small colored rectangle.

Example Shortcode Usage:

{{< colorswatch color="#1796b2" >}}

Live Rendered Output:

Form Elements (Footer Context)

Styled for the dark background of the footer newsletter/contact block.

Source: assets/scss/templates/_homepage.scss (.newsletter-block), assets/scss/_common.scss.

Example Structure (Inputs, Textarea, Toggle Buttons):

<form>
  <input type="text" class="form-control form-control-sm" placeholder="Name" />
  <input
    type="email"
    class="form-control form-control-sm"
    placeholder="Email"
  />
  <textarea
    class="form-control form-control-sm"
    rows="4"
    placeholder="Message"
  ></textarea>
  <button type="submit" class="btn btn-light btn-block">Send</button>
</form>
<button class="btn btn-sm btn-light">
  <i class="fa-solid fa-paper-plane"></i> Message
</button>
<button class="btn btn-sm btn-outline-light">
  <i class="fa-solid fa-calendar-check"></i> Schedule
</button>

Live Rendered Output (simulated context):

Key Layout Partials

These structural partials define major page sections. Refer to the source files for details.

• layouts/partials/header.html (Navigation)
• layouts/partials/page-header.html (Breadcrumbs, Title, OG Preview)
• layouts/partials/og-preview.html (OG Image component in header)
• layouts/partials/footer.html (Footer columns, CTA, Copyright)
• layouts/partials/sidebar/*.html (Blog sidebar widgets)
• layouts/partials/components/*.html (Reusable cards - listed above)