Items group

With items group mockup you can show a list of items that can be selected by adding the .active class, items can have title, subtitle, and icon.

index.html

<div class="items-group">
  <button class="item-button">
    <div class="item-icon"></div>
    <div class="item-text">
      <p class="item-title">First item</p>
      <p class="item-subtitle">Lorem ipsum dolor sit amet.</p>
    </div>
  </button>
  <button class="item-button">
    <div class="item-icon"></div>
    <div class="item-text">
      <p class="item-title">Second item</p>
      <p class="item-subtitle">Lorem ipsum dolor sit amet.</p>
    </div>
  </button>
  <button class="item-button active">
    <div class="item-icon"></div>
    <div class="item-text">
      <p class="item-title">Third item</p>
      <p class="item-subtitle">Lorem ipsum dolor sit amet.</p>
    </div>
  </button>
  <button class="item-button">
    <div class="item-icon"></div>
    <div class="item-text">
      <p class="item-title">Fourth item</p>
      <p class="item-subtitle">Lorem ipsum dolor sit amet.</p>
    </div>
  </button>
</div>

Usage with dropdown

Check out the example of dropdown with items group mockup, here.

Sizes

To change the button size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<div class="items-group size-xs">...</div>

Colors

There are helper classes for styling elements, first read about color setter classes, you can add classes to the wrapper element or each item separately.

index.html

<!-- First example: Styling the wrapper -->
<div class="items-group style-dark">...</div>

<!-- Second example: Styling each item -->
<div class="items-group">
  <button class="item-button style-pink">...</button>
  <button class="item-button style-purple">...</button>
  <button class="item-button style-green">...</button>
  <button class="item-button style-orange">...</button>
</div>

Customization

Use CSS variables for customization, they can be set as :root for all buttons default style or just for a specific selector.

--flatify__item-group-bg-color
--flatify__item-group-txt-color