EUAA Design System

Panels

Panels are content areas which can include text, buttons, images and other components. These panels are mainly used in dashboard or landing pages but they can also be used in other places as a container. They can be used standalone or they can be placed in a grid layout. Check out the grid setup here.

Standard Panel

Title

This is some text and a link

<div class="euaa-panel">
    <div class="euaa-panel__content">
        <div class="euaa-panel__title">Panel Title</div>
        <div class="euaa-panel__sub-title">Panel Subtitle</div>
        <div class="euaa-panel__description">Panel Description</div>
    </div>
    <div class="euaa-panel__btn">
        <input type="button" class="euaa-btn euaa-btn--primary" value="Panel Button">
    </div>
</div>

Standard Panel with icon

Title

This is some text and a link

<div class="euaa-panel">
    <div class="euaa-panel__icon">
        <i class="fas fa-cogs"></i>
    </div>
    <div class="euaa-panel__content">
        <h3>Title</h3>
        <p>This is some text and a <a href="#">link</a></p>
    </div>
</div>

Coloured Panels

Applications

This is some other text

<div class="euaa-panel euaa-panel--number euaa-panel--coloured-1">
    <div class="euaa-panel__number">25</div>
    <div>
        <h3>Applications</h3>
    </div>
</div>
<div> </div>
<div class="euaa-panel euaa-panel--number euaa-panel--coloured-2">
    <div class="euaa-panel__number">25</div>
    <div>
        <h3>Applications</h3>
        <p>This is some other text</p>
    </div>
</div>

Panels in grid

Title

This is some text and a link

Title

This is some text and a link

Title

This is some text and a link

Title

This is some text and a link

Title

This is some text and a link

<div class="fg-grid-container fg-grid-container--no-pad-firstlast">
    <div class="fg-grid-cell">
        <div class="euaa-panel">
            <div class="euaa-panel__content">
                 <h3>Title</h3>
                 <p>This is some text and a <a href="#">link</a></p>
            </div>
        </div>
    </div>
    <div class="fg-grid-cell">
        <div class="euaa-panel">
            <div class="euaa-panel__content">
                 <h3>Title</h3>
                 <p>This is some text and a <a href="#">link</a></p>
            </div>
        </div>
    </div>
     <div class="fg-grid-cell">
        <div class="euaa-panel">
            <div class="euaa-panel__content">
                 <h3>Title</h3>
                 <p>This is some text and a <a href="#">link</a></p>
            </div>
        </div>
    </div>
</div>
<div class="fg-grid-container fg-grid-container--no-pad-firstlast">
        <div class="fg-grid-cell">
        <div class="euaa-panel">
            <div class="euaa-panel__content">
                 <h3>Title</h3>
                 <p>This is some text and a <a href="#">link</a></p>
            </div>
        </div>
    </div>
    <div class="fg-grid-cell">
        <div class="euaa-panel">
            <div class="euaa-panel__content">
                 <h3>Title</h3>
                 <p>This is some text and a <a href="#">link</a></p>
            </div>
        </div>
    </div>
</div>