Introduction

Introducing Minimilist Card (Card feat. Google Fonts and Icons) for Excel

Minimalist, Modern Dialog UserForm Card, with HTML Label Markup for Excel (32bit or 64bit, Version 16) · Build Beautiful, Modern UserForms for Excel

Card (feat. Google Fonts and Icons) is a modern interface using 4 Colours, created using a Bitmap image loaded directly into a UserForm Picture member together with tiny WebBrowser Controls that serve as HTML WebLabels/Psuedo Labels. This allows you to pull Google Fonts and Icons using any Font or Icon that you like for Text or Graphics for each WebLabel. It also means that these Fonts will follow the Excel Workbook as they will be dynamically downloaded wherever the Workbook goes or to whoever the Workbook is sent. Card (feat. Google Fonts and Icons) uses my minified Extensibility Class for Excel (redacted from my UserForm-Extensibility Class) to make some aspects of interactivity easier like adding a Hand Cursor to a UserForm or parts of a UserForm to be transparent and / or dragged by the Mouse. All of the Credits for Images are in the Download File together with links for Purchasing Vectors (where I have used Free or Pro licenses myself) to enable you to develop this Software further should you so wish

You are purchasing Minimilist Card (Card feat. Google Fonts and Icons) v1 which includes a 450px Dialog, the Extensibility Class and a single '.BMP' Image. You also get a method using my Code to download and create Dialogs using any Google Fonts for your WebLabels/Psuedo Labels. You can also purchase forks of this Software #forks


 

If you love Card (feat. Google Fonts and Icons), you may also like any of the following Software. Boho MP3 Player uses my UserForm Extensibility Software as the interface for all of its dialogs


WebLabelDialog ·  RetroDialog ·  DialogBox ·  LogoBox ·  Speech Bubbles ·  Info Bubble ·  Warning Msg ·  Info Msg ·  Question Msg ·  Error Msg ·  Userform Extensibility ·  Boho MP3 Player ·  Mint UserForm ·  Slate UserForm ·  Lightbox UserForm ·  Dark UI ·  Blue UI ·  Carbon UI ·  UserFOrm UI ·  BoX ·  Flat UI ·  UserForm Slider Buttons

Prerequisites

  • Microsoft Excel 2016 Version 16 (32bit or 64bit) · designed for Office 365 Windows 11
  • Basic to moderate Excel Skills and some basic VBA skills
  • Windows PC · NOT a Mac!
  • No support is provided for customization of this Software

Features

  • Google Fonts used are dynamically pulled, so that all of them will travel with your Workbook so your beautiful UserForms will always look the same as you designed them
  • Use Google Icons to display a variety of Icons in different sizes on your UserForm
  • Use HTML Tags like <b>, <u> and <i> to apply Bold, Underline or Italic formatting to the WebLabels
  • Create Low/High, rounded background shading, as emphasis for any Message Text that you want to bring to the users attention
  • Use Green/Red underline on the Message Text via <span> Classes
  • Capture the return values of a Modal Dialog and then respond accordingly with another Card (Example 4)
  • Prime the Card using a method in the Workbook_Open() Subroutine, so as to pre-load the Controls with the HTML Markup to speed up loading time and screen rendering
  • Two styles of WebLable are included in this Software, a standard call to the '.CreateWebLabel' UserForm Subroutine will create the HTML Markup for a normal WebLabel and a call to '.CreateMouseOverWebLabel' will create a WebLabel with a Mouse over effect
  • Self.RemoveCaptionBordersAndSetTransparency - remove the Caption, Borders from a UserForm and sets the Transparency so that you can use a .BMP and make the White parts transparent in Excel. Using this extra invisible White part allows you some freedom when designing the Dialog as you can display the UserForm much bigger and this part will always be hidden
  • Self.AllowDrag - creates a draggable UI Interface, move the UserForm (or other Controls on the UserForm) around with the Mouse. For this Project I had to adjust slightly so as to enable the usage with the WebLabels/Psuedo Labels
  • Use with both Modal or Modeless UserForms
  • Use the Escape Key {ESC} to cancel a Card (using WebBrowser controls take away the standard method using the UserForm so this also needed to be adapted via the use of a DummyFocus Frame Control hidden within the UserForm)
  • Title, Message and two hoverable WebLabels/Psuedo Labels - Change the Font and Rollover Font Colours
  • Two isolated, extracted and manipulated Bitmaps that can be loaded directly into a UserForm
  • Irregular UserForm with their Captions or Titlebars removed and containing images using a special Transparency Colour, ie. White, RGB(255, 255, 255), to hide parts that should be transparent
  • Use one of the MouseOver WebLabels as a Psuedo Close Cross
  • Looks great on any Colour Background in the Excel Workbook

Credits

Minimalist Simple Modern Name Card Vector by heyanarda purchased under a Vecteezy Pro license. You can view and purchase the file here. Single isolated image used as the Blank Interface and loaded as a Bitmap directly into the UserForm. Please note: the original Vector is NOT included with this Software, only modified 'lower' resolution parts are used for loading into the Excel UserForm

Retro Background for Excel Lincung Studio, downloaded under a Free License (one-size, reduced to a much 'lower' resolution image '450px' and embedded directly into the Excel Zip archive File, not for backward dissasembly). Please note: regardless of the license, no attempt should be made to extract this image. You can view and purchase the file here

Extensibility Class, UserForm Enabler for Interactivity by Mark Kubiszyn redacted from UserForm Extensibility for Excel



 

Installation

Right-click and extract the contents of the File Card.zip. Bitmaps are stored in the 'bmps' Folder. Open Card.xlsm and test the Examples

To use Card (feat. Google Fonts and Icons) in your own Projects open Card.xlsm and your own Macro-enabled Project. Then open the VBE (Visual Basic Editor) and drag the Extensibility Class and any of the UserForms into your Project. Add and configure any of the Example Code in the Examples Code Module to use each Card

Take some time to examine how Card works and read the 'Usage' Section in this online documentation before you begin to create your own Card UserForms including the WebLabels/Psuedo Labels for Excel or before turning to Support


Usage

How to use Card (feat. Google Fonts and Icons)


What are Cards and How to Use them in Projects
Cards are Irregular UserForms with a beautiful Bitmap loaded directly into the UserForm, that have their Captions or Titlebars removed and contain a number of tiny WebBrowser Controls that act as Psuedo Labels (or Icons), enabling you to pull Google Fonts and Icons down from Google on-the-fly, to use in your UserForms. You can change the Font, Style, Weight and Colour of each WebLabel (the default Font is called 'Comfortaa' in '16pt'). You can have an Icons style of WebLable. You can also have a MouseOver style of WebLabel. WebLabels allow the UserForm to be dismissed via the Escape '{ESC}' Key or via two specific WebLabels, the 'Okay' and 'Cancel' WebLabel. When calling the WebLabels there are two Subroutines, '.CreateWebLabel' and '.CreateMouseOverWebLabel', that you can use with Named Arguments so as to only specify the arguments that you want or you can mix it up by using both passed Parameters and Named Arguments. To use Card (feat. Google Fonts and Icons) in your own Projects open Card.xlsm and your own Macro-enabled Project. Then open the VBE (Visual Basic Editor) and drag the Extensibility Class and any of the UserForms into your Project. Add and configure any of the Example Code in the Examples Code Module to use each Card Dialog

Example 1, Font, Comfortaa, Lowlight/Highlight/Underline
The first example demonstrates the Card UserForm using the default 'Comfortaa' Font. It asks to 'Update a setting' with the word 'Update' underlined in Red. In the Message itself, the words 'action specified' are also underlined but in Blue. The words 'order' and 'update' have shaded backgrounds with small rounded-corners in two different Colour Fonts, Red and Blue. It displays two psuedo Buttons called 'Yes, go for it' and 'No thanks, abort!'. You can answer by clicking on any of these Buttons (later on I will demonstrate how to capture each Button). You can also dismiss the UserForm via the Escape '{ESC}' key. We trap a repeated press on the Button used for the example by checking if the UserForm is visible - if it already is then we exit the Subroutine

To display the first Card UserForm in your own Excel Workbook simply use Code like this in any standard Code Module (obviously copy across 'Card1' UserForm into your Project as well):
Public Sub Example1()
   With Card1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = True
      
      .CreateWebLabel .Title, "<span id='red_underline'>Update</span> setting", 15
      
      .CreateWebLabel .Message, "In <span id='highlight'>order</span> to complete the <span id='blue_underline'>action specified</span> Excel must <span id='lowlight'>update</span> the user setting.  Confirm?", 14
      
      .CreateMouseOverWebLabel .OkayButton, "Yes, go for it", 15, Tooltip:="Yes, go for it"
      
      .CreateMouseOverWebLabel .CancelButton, "No thanks, abort!", 15, Tooltip:="No thanks, abort!"
      
      ' display the UserForm
      .Show 0
   
   End With
End Sub



Example 2, Rajdhani, Mixed Font Weights
For the second example, I use the Font 'Rajdhani' but with different Font Weights. You can see how I pass in the different weights, 400 and 600, in the FontFamily Parameter in the Code below. I use the heavier 600 weight for the Title and the two MouseOver Buttons/Psuedo Labels. This Font looks great at smaller Font sizes, enabling you to have a really nice looking, sleek Card Dialog which I personally like even better than my favourite 'Comfortaa' Font:
Public Sub Example2()
   With Card1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = True
      
      ' here we use a mixture of Named Arguments and Non-named Arguments to tell the Code which Parameters we want to use
      .CreateWebLabel .Title, "<span id='red_underline'>Update</span> setting", 18, , , , "Rajdhani:wght@400;600&display=swap", "Rajdhani, sans-serif", 600
      
      .CreateWebLabel .Message, "In order to complete the <span id='blue_underline'>action specified</span> Excel <span id='highlight'>must</span> <span id='lowlight'>update</span> the user setting.  Confirm?", , , , , "Rajdhani:wght@400;600&display=swap", "Rajdhani, sans-serif", 400
      
      .CreateMouseOverWebLabel .OkayButton, "Yes, go for it", 18, FontFamily:="Rajdhani:wght@400;600&display=swap", FontName:="Rajdhani, sans-serif", FontWeight:=600, Tooltip:="Yes, go for it"
      
      .CancelButton.Left = .CancelButton.Left - 20
      .CreateMouseOverWebLabel .CancelButton, "No thanks, abort!", 18, FontFamily:="Rajdhani:wght@400;600&display=swap", FontName:="Rajdhani, sans-serif", FontWeight:=600, Tooltip:="No thanks, abort!"
      
      ' display the UserForm
      .Show 0
   
   End With
End Sub



Example 3, Rajdhani, Mixed Font Weights and a Google Icon
In Example 3 I use the second Card Dialog, Card2 which has an additional WebLabel that allows me to pull down a Google Icon. This WebBrowser Control is called 'Icon'. You can see from the Code below how I change what I pass into the Text Parameter to enable me to bring down the 'Settings' Icon from Google sized at '64px' and in the Colour I want ' #EBE8DA'. I also change what I pass into the FontFamily Parameter to setup the Icons. This all looks a little weird but you can simply Copy & Paste this Code directly from the Google site into the Parameters - they give you this Code and you just modify the Text and FontFamily Named Arguments/Parameters yourself to have a nice, bespoke Icon (I think there are over 150 Icons available)
Public Sub Example3()
   With Card2
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = True
      
      ' here we use a mixture of Named Arguments and Non-named Arguments to tell the Code which Parameters we want to use
      .CreateWebLabel .Title, "<span id='red_underline'>Update</span> setting", 18, , , , "Rajdhani:wght@400;600&display=swap", "Rajdhani, sans-serif", 600
      
      .CreateWebLabel .Icon, "<span style=""font-size: 64px; color: #EBE8DA;"" class=""material-symbols-outlined"">settings</span>", _
                      FontFamily:="Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
      
      .CreateWebLabel .Message, "In order to complete the <span id='blue_underline'>action specified</span> Excel <span id='highlight'>must</span> <span id='lowlight'>update</span> the user setting.  Confirm?", , , , , "Rajdhani:wght@400;600&display=swap", "Rajdhani, sans-serif", 400
      
      .CreateMouseOverWebLabel .OkayButton, "Yes, go for it", 18, FontFamily:="Rajdhani:wght@400;600&display=swap", FontName:="Rajdhani, sans-serif", FontWeight:=600, Tooltip:="Yes, go for it"
      
      .CancelButton.Left = .CancelButton.Left - 20
      .CreateMouseOverWebLabel .CancelButton, "No thanks, abort!", 18, FontFamily:="Rajdhani:wght@400;600&display=swap", FontName:="Rajdhani, sans-serif", FontWeight:=600, Tooltip:="No thanks, abort!"
      
      ' display the UserForm
      .Show 0
   
   End With
End Sub




Example 4, Capturing Return Values using a Modal Card Dialog
For example 4, I demonstrate how to capture the return values for the UserForm. I use Card2 again and present the UserForm. I then use the Global Variable 'ReturnValue' and a Local Variable 'ReturnMessage' for the return type and a new Message to configure to enable me to present back another Card Dialog as a response to any Buttons or Escape {ESC} key pressed. Here I will just add the Code to capture the Buttons used to dismiss the UserForm and an image so you get the concept - all the Code is in the Download File so that you can use this method yourself in your Projects (you can see here that I also format my return Message using the <span> Tags:
   ' check the return value
   Select Case ReturnValue
      Dim ReturnMessage As String
   Case vbOK
      ReturnMessage = "The user pressed Yes and the setting was <span id='blue_underline'>updated</span> successfully"
   Case vbCancel
      ReturnMessage = "The user pressed No, therefore the setting was <span id='blue_underline'>NOT updated!</span>"
   Case vbAbort
      ReturnMessage = "The user pressed Escape {ESC}, therefore the setting was <span id='blue_underline'>NOT updated!</span>"
   End Select



Priming the Card
When the Workbook opens, Code will run that 'primes' the Card1 UserForm, loading the HTML WebLabels, navigating to their respective Pages (HTML Markup runs) and then exits, terminating the Extensibility Class. This in effect should speed up any Font loads, kind of like a Font 'pre-load'. I have added an Error skip here and you can simply comment out if not required. When using this technique, you should ideally set the Font Family and Font Name in the Optional Paramaters to the same Font Family and Font Name that you will be using for the HTML WebLabel elements - this will mean that you should have an almost instant rendering of your Font


Extensibility Class
The Extensibility Class is required for Card to remove the Caption and Borders from a UserForm. It also allows the White colour to become transparent so that you can use irregular Window Sizes for the UserForm via a '.BMP' (Bitmap) image. It allows a number of simple ways to extend your UserForms, for example to make them (or any Control) draggable use the following Code:
Option Explicit

Private Self As New Extensibility

' UserForm
Private Sub UserForm_Initialize()
   Set Self.Assign = Me
End Sub

Private Sub UserForm_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   Self.AllowDrag
End Sub
To show a hand Cursor use the following Code:
Option Explicit

Private Self As New Extensibility

' UserForm
Private Sub UserForm_Initialize()
   Set Self.Assign = Me
End Sub

Private Sub Close_Cross_Active_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   Self.AddCursor IDC_HAND
End Sub
To remove the Caption, Borders and allow Transparency of White (a Long Colour Code) use the following Code:
Option Explicit

Private Self As New Extensibility

' UserForm
Private Sub UserForm_Initialize()
   Set Self.Assign = Me
   Self.RemoveCaptionBordersAndSetTransparency 16777215  
End Sub

Modal or Modeless?
To change a Card from a Modeless UserForm to a Modal UserFrom simply change the zero (0) after the Code '.Show' to a 1 like this:
Public Sub Example1()
   With Card1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = True
      
      .CreateWebLabel .Title, "<span id='red_underline'>Update</span> setting", 15
      
      .CreateWebLabel .Message, "In <span id='highlight'>order</span> to complete the <span id='blue_underline'>action specified</span> Excel must <span id='lowlight'>update</span> the user setting.  Confirm?", 14
      
      .CreateMouseOverWebLabel .OkayButton, "Yes, go for it", 15, Tooltip:="Yes, go for it"
      
      .CreateMouseOverWebLabel .CancelButton, "No thanks, abort!", 15, Tooltip:="No thanks, abort!"
      
      ' display the UserForm
      .Show 1
   
   End With
End Sub


Image Processes - The Card (feat. Google Fonts and Icons) Method or 'How I did this'
The Card (feat. Google Fonts) uses images loaded directly into the UserForm for the main Dialog interface. First of all I downloaded the original Vector used for this Project - see the links in the Introduction and/or Credits sections. Then I isolated the Image I needed (the first Card in the Vector design) using Affinity Designer (my go-to image manipulation tool), you can also use PhotoShop. I then Exported out the image as a transparent PNG at '450px'. From here, I opened the image in Photoshop and carefully made a single pixel Border for the Frame and then it out as a BMP (Bitmap). Then I loaded this Bitmap image directly into the Picture member of the UserForm

Image Processes - Loading in a Bitmap to a UserForm or Control
An easy way of getting an image into a UserForm or one of its Controls is to load a transparent '.GIF' or '.BMP' (Bitmap) image directly. Use the 'Picture' member to Browse and load the File. You can create a transparent 'GIF' directly from an art package such as Affinity Designer. To create a Bitmap you can use Photoshop to take any Transparent Image saved as a '.PNG' and convert it by using 'Save As' into a Bitmap, choose Format 'BMP (*.BMP;*.RLE;*.DIB)', File Format 'Windows' and Depth '24 Bit'. Where you need to have the Background Colour a different Colour from standard White '255, 255, 255' for your Bitmap, because for example you are using White as the Transparent Colour, which would cause holes in your image, then use the Paint Bucket Tool, selecting an alternative Colour by entering the RGB Values ie. '254, 254, 254' together with settings, Opacity '100%', Tolerance '30' and tick the Anti Alias checkbox

Image Processes - Loading in a Transparent PNG to a UserForm or Control
A trick I use all of the time is to use my Free ImageTransparency.xlsm Software to load in a Transparent '.PNG' File into a UserForm or one of its Controls - you can download this free here. This technique allows you to load any PNG and then Paste it into the Picture member of the UserForm or Control. You MUST set the background Colour 'BackColor' of the UserForm or Control in the single UserForm within the ImageTransparency.xlsm File first and this should be a VB Hex Colour - use a great Tool like 'InstantEyeDropper' to do this, it's free and can be downloaded from here. Now press the 'Copy to Clipboard' Button in the ImageTransparency.xlsm Software to Browse and load in the PNG File. Switch to Excel and Paste into the Picture member. The PNG image will now be added to the UserForm or Control and the Transparent Colour will be replaced by the VB Hex Colour that you used for the BackColor of the UserFrom or Control

Image Processes - Another Method to Load an Image into a Control
You can load in a transparent 'PNG' image into Affinity and add a Layer that is a Rectangle and set it to the background Colour you want it to have once it is loaded ie. White for the transparency. Export out that image as a '.PNG' image again. Now load it into Photoshop and Save it as a '.BMP' image. Finally load this Bitmap directly into any Image Control and it will sit ontop of the background and appear to blend in perfectly

Screen Shots

A Card (feat. Google Fonts and Icons) with 2 WebLabel/Psuedo Labels and 2 MouseOverWebLabels/Psuedo Labels using the 'Rajdhani' Font on a '450px' Bitmap loaded directly into a UserForm

 

A Card (feat. Google Fonts and Icons) with 2 WebLabel/Psuedo Labels and 2 MouseOverWebLabels/Psuedo Labels using the 'Rajdhani' Font on a '450px' Bitmap loaded directly into a UserForm with the user 'Rolling' over one of the MouseOver Text Psuedo Label/Button

A Card (feat. Google Fonts and Icons) demonstrating how to use the <span> Tags to Underline and shade specific areas of the Message. The Card Dialog also has a Settings, Cog Icon. This Software uses the first image (lower resolution, one size Bitmap, '450px' taken from the first Card in the Vector by heyanarda - you can also purchase the Vector File from the links in the Credits section if required

Capturing Return Values using a Modal Card Dialog

The Card Dialog UserForm in the VBE Editor



FAQ

* There are currently no FAQ for Card




Card (feat. Google Fonts and Icons) Videos

This is a video of the Card Software. Music is 'Desert Planet - Quincas Moreira'. View this video on YouTube or view the YouTube Short

Other forked videos are also available:
Card-fork1



Support

Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful

Support for my Software

  • Responding to questions or problems regarding the Software and its features
  • Fixing valid (replicated) bugs and reported issues for the VERSION I HAVE WRITTEN

Software support does not include

  • Customization and installation services
  • Support for third party software or ANY kind of development whatsoever

Before seeking support

  • Make sure your question is a valid Software Issue and not a customization request
  • Make sure you have read through the FAQ's, online documentation and any related video guides before asking support on how to accomplish a task
  • Ensure that you access to the VBOM is allowed and that Macros can run in Excel
  • Make sure to provide 'proof of purchase' and state the name / version of the Software that you are having issues with when requesting support by Email or via Facebook

How to get Support

Contact Mark Kubiszyn on the Email address provided when you purchased the Software, including the Order Number
Remember to be patient, if there has been an issue with your download, Mark will always respond within 48 hours and will Email you the File directly if neccessary. For other issues the response time may be considerably longer and I may choose to respond to specific questions only (as is my right), depending on what has been asked

Future Builds

* You could hard-code the WebLabels to be created each UserForm Activation. You would need some type of interface for the Code to pickup the HTML Markup settings though, so perhaps an Init() Subroutine to do this and then the WebLabels would simply read from the Property/Properties. Potentially then, any WebLabel with Markup already rendered would remain and you could, for example, say just update the Message instead of all of the WebLabels each time you Show the UserForm

Bug Fixes

* There are currently no bugs identified for Card

Credits

Credits

Minimalist Simple Modern Name Card Vector by heyanarda purchased under a Vecteezy Pro license. You can view and purchase the file here. Single isolated image used as the Blank Interface and loaded as a Bitmap directly into the UserForm. Please note: the original Vector is NOT included with this Software, only modified 'lower' resolution parts are used for loading into the Excel UserForm

Retro Background for Excel Lincung Studio, downloaded under a Free License (one-size, Bitmap reduced to a much 'lower' resolution image '450px' and embedded directly into the Excel Zip archive File, not for backward dissasembly). Please note: regardless of the license, no attempt should be made to extract this image. You can view and purchase the file here

Extensibility Class, UserForm Enabler for Interactivity by Mark Kubiszyn redacted from UserForm Extensibility for Excel

#forks

Additional forks of Card

fork#1

A fork by Paradigm, using a Vector by heyanarda, downloaded under a Pro License (one-size, Bitmap, modified using alternative Colours and a '1px' Border, reduced to a much 'lower' resolution image, '450px' and loaded directly into the Excel UserForm). You can view and purchase the original Vector file here. The image below includes Code to add a Google Icon on the UserForm, a Title, Message and two MouseOver psuedo Buttons - you can also close the UserForm via the Escape {ESC} key if required

Purchase




Changelog

Read more information on the status of each release below. The latest Version including a description of any changes is shown first

26.03.2023 - (Version 1)

General release of Card