Style Guide
Developer Kitchen Sink - Test all theme components and styles here.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Bold text example.
Italic text example.
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
— Source Name
This is inline code.
This is a code block example.Buttons
Button Variants
Button Sizes
Full Width Button
Full Width ButtonIcon Button
Button States
Forms
Cards
Card Title
This is a card example. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Another Card
This is another card example. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Animations
Fade In Animation
This element fades in when it enters the viewport.
Slide Up Animation
This element slides up and fades in when it enters the viewport.
Shortcodes
Year Shortcode: 2026
Site Name Shortcode: Probiflora
Two Column Grid
Creates a 2-column grid layout where columns only take up as much space as they need. Responsive - stacks on mobile.
Basic Usage
With Custom Gap
Centered Alignment
Usage Example
[two_column]
[col]First column content[/col]
[col]Second column content[/col]
[/two_column]Bowel Element
Reusable bowel element based on path18.svg with CSS variables for colors, text styling, sizes, and opacity. Supports optional centered text and multiple color variants for different products.
Basic Bowel with Text
Color Variants
Different colors representing various products:
Size Variants
Background with Opacity
Bowels can be used as background elements with reduced opacity:
SVG Only (No Text)
Bowels can be used without text for decorative purposes:
Usage Example
<!-- Basic bowel with text -->
<div class="bowel">
<svg class="bowel__svg">...</svg>
<span class="bowel__text">Product Name</span>
</div>
<!-- Color variant -->
<div class="bowel bowel--probi-green">
<svg class="bowel__svg">...</svg>
<span class="bowel__text">Green</span>
</div>
<!-- Size variant -->
<div class="bowel bowel--lg">
<svg class="bowel__svg">...</svg>
<span class="bowel__text">Large</span>
</div>
<!-- Background with opacity -->
<div class="bowel bowel--bg-opacity">
<svg class="bowel__svg">...</svg>
</div>Cross
Reusable cross icon based on cross.svg with CSS variables for color, size, and opacity. Call output_cross_svg() inside a .cross wrapper.
Basic Cross
Color Variants
Cross color controlled via modifier classes:
Size Variants
Background with Opacity
Cross can be used as a background element with reduced opacity:
Usage Example
<?php
include_once( get_template_directory() . '/inc/sitespecific/cross-svg-template.php' );
?>
<div class="cross cross--md">
<?php output_cross_svg(); ?>
</div>
<!-- Color variant -->
<div class="cross cross--probi-green">
<?php output_cross_svg(); ?>
</div>
<!-- Size variant -->
<div class="cross cross--lg">
<?php output_cross_svg(); ?>
</div>
<!-- Background with opacity -->
<div class="cross cross--bg-opacity">
<?php output_cross_svg(); ?>
</div>Main Container
Full-width containers with optional rounded edges using clip-path. Based on docs/examples/maincontainer.svg
Both Rounded (Top & Bottom)
Container with Rounded Top and Bottom
This container has rounded edges on both the top and bottom, matching the SVG reference. The rounded edges maintain their aspect ratio relative to the container width.
Top Rounded Only
Container with Rounded Top
This container has a rounded top edge and a flat bottom edge. Perfect for sections that need to flow into the next section below.
Bottom Rounded Only
Container with Rounded Bottom
This container has a flat top edge and a rounded bottom edge. Ideal for sections that follow a previous section and need a rounded finish.
Standard Container (No Rounded Edges)
Standard Container
This is a standard container without any rounded edges. It uses a normal div without clip-path, making it perfect for standard content sections.
