Logo

You can download Alegria's SVG logos right below.

alegria.tech
alegria.group
alegria.org
alegria.network
alegria.academy
alegria.tools

Color

Primary colors

Secondary colors

Status colors

Alegria's Palette

Neutral colors

Typography

Regular Headings

h1

h2

h3

h4

h5
h6

40px

38px

28px

24px

20px
16px

Heading Title

Heading Title

Heading Title

Heading Title

Heading Title

Heading Title

Medium Headings

h1

h2

h3

h4

h5
h6

40px

38px

28px

24px

20px
16px

Heading Title

Heading Title

Heading Title

Heading Title

Heading Title

Heading Title

Bold Headings

h1

h2

h3

h4

h5
h6

40px

38px

28px

24px

20px
16px

Heading Title

Heading Title

Heading Title

Heading Title

Heading Title

Heading Title

Rich Text

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • FIjoejfz
  • ezfipjezf

Static and dynamic content editing

ihbaiuiehfz

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Large Headings

Display headings - 1

Display headings - 2

Display headings - 3

Display headings - 4

Body Text

In ultricies fermentum aliquet. Pellentesque dui magna, condimentum non ullamcorper at, cursus in sem. Nunc condimentum, purus ac sagittis ultricies, metus leo pharetra mi, non vehicula felis elit et nisi. Etiam venenatis commodo libero, vel ullamcorper nibh lobortis vel. Aliquam auctor porta tortor, nec consequat nibh finibus a. Sed ultrices risus eget iaculis luctus. Mauris vel gravida magna.

Lead Text

In ultricies fermentum aliquet. Pellentesque dui magna, condimentum non ullamcorper at, cursus in sem. Nunc condimentum, purus ac sagittis ultricies, metus leo pharetra mi, non vehicula felis elit et nisi. Etiam venenatis commodo libero, vel ullamcorper nibh lobortis vel. Aliquam auctor porta tortor, nec consequat nibh finibus a. Sed ultrices risus eget iaculis luctus. Mauris vel gravida magna.

Font

Regular

Regular

Regular

Regular

Regular

Regular

400

400i

500

500i

700

700i

The spectacle before us was indeed sublime.

The spectacle before us was indeed sublime.

The spectacle before us was indeed sublime.

The spectacle before us was indeed sublime.

The spectacle before us was indeed sublime.

The spectacle before us was indeed sublime.

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as an addition to the document.

This line of text is meant to be treated as fine print.

You can use the mark tag to highlight text.

This line rendered as italicized text.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Naming a source

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous in Source Title

Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous in Source Title

Unstyled

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit

  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at

Description list alignment

Description lists
Euismod
Malesuada porta
A description list is perfect for defining terms.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Etiam porta sem malesuada magna mollis euismod.

Spacing

Spacer

8
16
24
32
48
64
96
192

CARDS

Titles, text and links

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build

Card title

Some quick example text to build

Body

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.

Card link

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

read more

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

read more

Horizontal

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text aside

Last updated 3 mins ago

Expert Cards

Nom
Prénom
Poste
Stack technique

medias

Media Objects

Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.

Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.

Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.

Alignment

Top-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Center-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Order

Media Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.

form Components

These are a few example components.

Input
Select Menu
Text Area
Multi-step form
previous
next
Checkboxes
Checkboxes
Checkboxes Inline
Radios
Radios
Radios Inline
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

badges

Tag Badges

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Button Badges

atom
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Counter Badge

Notifications
2

alerts

Alerts

Alert-atom 33%
A simple primary alert—check it out! Auto
A simple primary alert—check it out!
A simple primary alert—check it out! And what happens if there's more?
A simple primary alert—check it out!
A simple primary alert—check it out!
A simple primary alert—check it out!
A simple primary alert—check it out!
A simple primary alert—check it out!
Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Dismissing

Holy guacamole! You should check in on some of those fields below.

Border

Additive

Additive border
Border Top
Border left
Border right
Border bottom

Subtractive

No border
No border top
No border left
No border right
No border bottom

Color

Additive border
Additive border
Additive border
Additive border
Additive border
Additive border

Border radius

Shadow

buttons

Secondary button

Success button

SuccessOutline

Danger button

Warning button

Info button

Light button

Dark button

TABS

Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williams burg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamc atcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williams burg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamc atcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.

Tab Title

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williams burg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamc atcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.

Last updated 3 mins ago
Primary

Popovers

Popovers

Popover title

With supporting text below as a natural lead-in to additional content.

Popover title

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

Tooltips

Tooltip on right

Tooltip on left

Tooltip on top

Tooltip on bottom

Accordions

Accordions

INNOVATION & CRÉATION - 1 000 000 de logiciels pour 0 ligne de code
INNOVATION & CRÉATION - 1 000 000 de logiciels pour 0 ligne de code
INNOVATION & CRÉATION - 1 000 000 de logiciels pour 0 ligne de code
INNOVATION & CRÉATION - 1 000 000 de logiciels pour 0 ligne de code
INNOVATION & CRÉATION - 1 000 000 de logiciels pour 0 ligne de code
INNOVATION & CRÉATION - 1 000 000 de logiciels pour 0 ligne de code
INNOVATION & CRÉATION - 1 000 000 de logiciels pour 0 ligne de code