skip to content
Whiteprint

Main navigation

Get started

  • Setup
  • Customising
  • Layouts

    • Columns
    • Containers
    • Covers
    • Sidebars
    • Stacks

Components

  • Alerts
  • Banners
  • Bars
  • Buttons
  • Cards
  • Dropdowns
  • Groups
  • Icon lists
  • Media objects
  • Navs
  • Text
  • Examples
  • Extras

    • Placeholders
    • Icons

Groups

<div class="group">
  <button type="button" class="button">Button</button>
  <button type="button" class="button">Button</button>
</div>
<div class="button-group">
  <button type="button" class="button">Button</button>
  <button type="button" class="button">Button</button>
  <button type="button" class="button">Button</button>
</div>

Template

@mixin groupVariables
/*  1. group gap ........... */ var(--group-gap),
/*  2. stack contents at ... */ var(--group-stack-at),
/*  3. remove inner radius . */ var(--group-remove-inner-radius);

@mixin groupSelectors
/*  1. group container ..... */ .group;
Sam Smith, 2019.