UI Elements

Navigation

Brand Logo, back to home
Produit
FonctionnalitésTarifsNouveautésSignaler un bug
Ressource
Cas clientsCentre d'aideContact
Seran
A proposRecrutementPresskit
Conditions générales
Politique de confidentialité
Communauté
TwitterLinkedIn
Twitter
Signaler un bug
Conditions générales
Politique de confidentialité
Français
©2023 Seran. Tous droits réservés.
Twitter
Signaler un bug
Conditions générales
Politique de confidentialité
Fait par Heka

Buttons

Button Text
.button
Button Text
.button .uc-btn-tiny
north
.button .uc-btn-icon
Button Text
.button .uc-btn-sec
Button Text
.button .uc-btn-sec .uc-btn-tiny
north
.button .uc-btn-sec .uc-btn-icon
Button Text
.button .uc-btn-outline
Button Text
.button .uc-btn-outline .uc-btn-tiny
north
.button .uc-btn-outline .uc-btn-icon
Button TextButton Text
.lt-button-group

Loaders

.loading-circle
.loading-dots

Tags

Tag label
.tag
Tag label
.tag .uc-tag-outline
.wr-tag-cta
.tag-cta-title

Icons

Google Material Icons

These icons are from Google Material Icons Library.
To use an icon type icon name in a text block/text span. Then apply CSS class .material-icons.
You can find icon names full list on the link above.

home
home
menu
menu
close
close
chevron_left
chevron_left
chevron_right
chevron_right
get_app
get_app
west
west
east
east
north
north
south
south
attachment
attachment
shopping_cart
shopping_cart
phone
phone
mail
mail
place
place
domain
domain
more_vert
more_vert
more_horiz
more_horiz
emoji_food_beverage
emoji_food_beverage
share
share

Font awesome

These icons are from Font Awesome Free Icons Library.
To use an icon apply icon name as a combo class to either of the following CSS class.fas for standard icons.fab for brand iconsHere is an example : .fab .fa-facebook-fYou can find icon names full list on the link above.

  • .fas for standard icons
  • .fab for brand icons

Here is an example : .fab .fa-facebook-f.
You can find icon names full list on the link above.

fa-twitter
fa-facebook-f
fa-instagram
fa-linkedin-in
fa-youtube
fa-vimeo-v
fa-pinterest-p
fa-behance
fa-dribbble
fa-artstation
fa-medium-m
fa-tiktok
fa-snapchat-ghost
fa-twitch
fa-discord
fa-slack
fa-whatsapp
fa-facebook-messenger
fa-github
fa-google-play
fa-app-store
fa-cc-mastercard
fa-cc-visa
fa-cc-amex
fa-cc-apple-pay
fa-cc-amazon-pay
fa-google-pay
fa-cc-stripe
fa-cc-paypal
fa-paypal
fa-stripe
fa-amazon
fa-spotify
fa-soundcloud
fa-itunes
fa-itunes-note
fa-imdb
fa-kickstarter-k
fa-unsplash
fa-salesforce
fa-steam
fa-xbox

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich texts

Rich Text

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.

This is an image caption
Static and dynamic content editing

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.

This is an ordered list :

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet

This an unordered list :

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Below is what block quotes will look like in your blog posts -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

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.

This is an image caption

Static and dynamic content editing

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
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.

This is an ordered list :

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet

This an unordered list :

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Below is what block quotes will look like in your blog posts -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

Sliders

Splide slider

This slider use Splide JS library. Follow this sample HTML structure and classes for it to be initialized correctly.