---
title: "Styles"
description: "We build advanced Joomla extensions to help your business grow"
url: "https://www.tassos.gr/styles"
date: "2026-06-24T22:15:56+00:00"
language: "en-GB"
---

# Design System

## Buttons

### Default

#### Small

 <a class="btn btn-sm btn-primary">Button</a> <a class="btn btn-sm btn-success">Button</a> <a class="btn btn-sm btn-error">Button</a> <a class="btn btn-sm btn-default">Button</a> <a class="btn btn-sm btn-gray">Button</a> <a class="btn btn-sm btn-white">Button</a>#### Medium (Default)

 <a class="btn btn-primary">Button</a> <a class="btn btn-success">Button</a> <a class="btn btn-error">Button</a> <a class="btn btn-default">Button</a> <a class="btn btn-gray">Button</a> <a class="btn btn-white">Button</a>#### Large

 <a class="btn btn-lg btn-primary">Button</a> <a class="btn btn-lg btn-success">Button</a> <a class="btn btn-lg btn-error">Button</a> <a class="btn btn-lg btn-default">Button</a> <a class="btn btn-lg btn-gray">Button</a> <a class="btn btn-lg btn-white">Button</a>#### Extra Large

 <a class="btn btn-xl btn-primary">Button</a> <a class="btn btn-xl btn-success">Button</a> <a class="btn btn-xl btn-error">Button</a> <a class="btn btn-xl btn-default">Button</a> <a class="btn btn-xl btn-gray">Button</a> <a class="btn btn-xl btn-white">Button</a>### Outline

#### Small

 <a class="btn btn-outline btn-sm btn-primary">Button</a> <a class="btn btn-outline btn-sm btn-success">Button</a> <a class="btn btn-outline btn-sm btn-error">Button</a> <a class="btn btn-outline btn-sm btn-default">Button</a> <a class="btn btn-outline btn-sm btn-gray">Button</a> <a class="btn btn-outline btn-sm btn-white">Button</a>#### Medium (Default)

 <a class="btn btn-outline btn-primary">Button</a> <a class="btn btn-outline btn-success">Button</a> <a class="btn btn-outline btn-error">Button</a> <a class="btn btn-outline btn-default">Button</a> <a class="btn btn-outline btn-gray">Button</a> <a class="btn btn-outline btn-white">Button</a>#### Large

 <a class="btn btn-outline btn-lg btn-primary">Button</a> <a class="btn btn-outline btn-lg btn-success">Button</a> <a class="btn btn-outline btn-lg btn-error">Button</a> <a class="btn btn-outline btn-lg btn-default">Button</a> <a class="btn btn-outline btn-lg btn-gray">Button</a> <a class="btn btn-outline btn-lg btn-white">Button</a>#### Extra Large

 <a class="btn btn-outline btn-xl btn-primary">Button</a> <a class="btn btn-outline btn-xl btn-success">Button</a> <a class="btn btn-outline btn-xl btn-error">Button</a> <a class="btn btn-outline btn-xl btn-default">Button</a> <a class="btn btn-outline btn-xl btn-gray">Button</a> <a class="btn btn-outline btn-xl btn-white">Button</a>## Tables

| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |

### Table with Vertical Lines

| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |

### Table with Stripes

| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |

### Table with Hover Background

| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |

```
{alert --type=info --text=lorem ipsum}
```

 Need more help setting up your conditional logic rule? See our full tutorial on [conditional logic](#) basics for more details on how to use this feature

```
{alert --type=danger --text=lorem ipsum}
```

 Need more help setting up your conditional logic rule? See our full tutorial on [conditional logic](#) basics for more details on how to use this feature

```
{alert --type=warning --text=lorem ipsum}
```

 Need more help setting up your conditional logic rule? See our full tutorial on [conditional logic](#) basics for more details on how to use this feature

```
{alert --type=success --text=lorem ipsum}
```

 Need more help setting up your conditional logic rule? See our full tutorial on [conditional logic](#) basics for more details on how to use this feature

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Design System",
            "item": "https://www.tassos.gr/styles"
        }
    ]
}
```