Instructions
This contact information widget allows you to display key details (name, phone, email, address, etc.) in an elegant card layout. You can easily update the data structure to customize the displayed information.
Step 1: Locate the contactInfo Array
The contactInfo array contains the data for the widget. Each item
in the array is an object with the following properties:
-
label: The label for the information (e.g.,"Name","Phone","Email"). -
value: The actual content of the information (e.g.,"Steven","+1 234 567 890"). -
icon: A Bootstrap Icon class for an appropriate icon (e.g.,"bi bi-envelope-fill"for email). -
link: (Optional) A URL for clickable content. For example:- Use
"tel:+1234567890"for phone numbers. -
Use
"mailto:example@example.com"for email addresses.
- Use
Step 2: Customize the Array
Update or add new entries to the contactInfo array. For example:
const contactInfo = [
{ label: "Name", value: "John Doe", icon: "bi bi-person-fill" },
{ label: "Phone", value: "+1 987 654 3210", icon: "bi bi-telephone-fill", link: "tel:+19876543210" },
{ label: "Email", value: "contact@example.com", icon: "bi bi-envelope-fill", link: "mailto:contact@example.com" },
{ label: "Address", value: "123 Main Street, New York, USA", icon: "bi bi-geo-alt-fill" }
];
Step 3: Save and Refresh
- Save the changes to your widget.
- Reload the webpage to see the updated contact information displayed in the card.