Welcome to the widget styling guide! Here you will find all the information you need to style your widgets to match your application's theme.

Getting Started

Before you dive into styling your widgets, it's important to understand the basic structure and classes used in our widgets. This will help you apply styles consistently across your application.

Widget Structure

A typical widget consists of the following elements:

  • Header: Contains the title and any other information you want to display at the top.
  • Body: The main content area where you can add text, images, or other elements.
  • Footer: Optional, used for additional information or actions.

Widget Classes

To style your widgets, we use a set of predefined classes. Here's a list of some common classes:

  • .widget-header
  • .widget-body
  • .widget-footer
  • .widget-title
  • .widget-content

Styling Your Widgets

Now that you understand the structure and classes, let's dive into styling your widgets.

Colors

We provide a set of predefined colors that you can use to style your widgets. You can find the full list of colors here.

Fonts

Our widgets use a default font, but you can override it using the font-family property. For example:

.widget-header {
  font-family: 'Arial', sans-serif;
}

Images

To add images to your widgets, you can use the <img> tag. For example:

<div class="widget-body">
  <img src="/path/to/image.jpg" alt="Image description">
</div>

Links

You can add links to your widgets using the <a> tag. For example:

<div class="widget-body">
  <a href="/path/to/destination">Link text</a>
</div>

Best Practices

Here are some best practices to keep in mind when styling your widgets:

  • Consistency: Use consistent styles across all your widgets.
  • Accessibility: Ensure that your widgets are accessible to all users, including those with disabilities.
  • Responsive: Make sure your widgets look good on all devices.

Additional Resources

For more information on styling your widgets, check out the following resources:

Widget Example