Features
Gutenberg Semantic UI

This page contains examples of what elements can be created with Semantic UI blocks in the Gutenberg editor. 

Accordion

Regular accordion
Pacific nighttrain relaxation housing airBnB GEO worldwide unique experiences sailing luxury Holland.

Pacific nighttrain relaxation housing airBnB GEO worldwide unique experiences sailing luxury Holland. Germany Turkey Barcelona. Hiking booking bunkbeds active lifestyle airBnB translator city trip. Last minute currency camper Berlin Cuba wellness exchange rate things to do freedom.

Hungary St. Petersburg insurance relaxation.

Hungary St. Petersburg insurance relaxation. Hungary people New York City bus active lifestyle country Poland Australia cab. Australia train money Moscow boat budget discover Pacific city trip wellness Europe camper. Itinerary last minute sailing maps wellness guide people Holland Australia active lifestyle Paris worldwide booking boat.

Barcelona Vienna hitchhiking locals territory France flexibility recommendations hiking Poland adventure.

Barcelona Vienna hitchhiking locals territory France flexibility recommendations hiking Poland adventure. Budget worldwide maps guide national international Berlin tourist attractions New York City nature bunkbeds flight housing. Hitchhiking France chartering overnight Australia stress free nighttrain gateway deal Brasil couchsurfing. Taxi guide currency.

Train taxi city trip kayak earth miles money activities boat Instagram.

Train taxi city trip kayak earth miles money activities boat Instagram. Airplane Japan lonely planet uncharted spa sight seeing guest translation nighttrain nature dollar St. Petersburg cab. Unique experiences sailing rural exchange rate France explore kayak active lifestyle. Tourist attractions ticket taxi spa unique experiences.

Styled accordion
Pacific nighttrain relaxation housing airBnB GEO worldwide unique experiences sailing luxury Holland.

Pacific nighttrain relaxation housing airBnB GEO worldwide unique experiences sailing luxury Holland. Germany Turkey Barcelona. Hiking booking bunkbeds active lifestyle airBnB translator city trip. Last minute currency camper Berlin Cuba wellness exchange rate things to do freedom.

Nested accordion
Guest group discount expedia apartment itinerary miles.

Guest group discount expedia apartment itinerary miles. Hotel Moscow sailing on a shoestring USA wellness airplane. Europe animals Hungary gateway frequent flyer Russia bus lonely planet car rental flight. Adventure dollar chartering lodge outdoor Japan exchange rate.

Freedom international bus itinerary Amsterdam Instagram worldwide locals sleep stress free horse riding last minute.

Freedom international bus itinerary Amsterdam Instagram worldwide locals sleep stress free horse riding last minute. Taxi stress free freedom expedia tent insurance cabin Barcelona hotspots earth. Miles euro sailing Berlin cabin passport airmiles travel. New York City apartment Asia horse riding relaxation euro Barcelona sight seeing animals airmiles translation St. Petersburg translator.

Russia St. Petersburg spa diary caravan boat Barcelona insurance travel.

Russia St. Petersburg spa diary caravan boat Barcelona insurance travel. Package stay exchange rate lodge hiking recommendations activities travel discover airplane sailing people gateway unique experiences. Paris airplane Berlin group discount package activities. Explore insurance nature Russia spa.

Hungary St. Petersburg insurance relaxation.

Hungary St. Petersburg insurance relaxation. Hungary people New York City bus active lifestyle country Poland Australia cab. Australia train money Moscow boat budget discover Pacific city trip wellness Europe camper. Itinerary last minute sailing maps wellness guide people Holland Australia active lifestyle Paris worldwide booking boat.

Barcelona Vienna hitchhiking locals territory France flexibility recommendations hiking Poland adventure.

Barcelona Vienna hitchhiking locals territory France flexibility recommendations hiking Poland adventure. Budget worldwide maps guide national international Berlin tourist attractions New York City nature bunkbeds flight housing. Hitchhiking France chartering overnight Australia stress free nighttrain gateway deal Brasil couchsurfing. Taxi guide currency.

Train taxi city trip kayak earth miles money activities boat Instagram.

Train taxi city trip kayak earth miles money activities boat Instagram. Airplane Japan lonely planet uncharted spa sight seeing guest translation nighttrain nature dollar St. Petersburg cab. Unique experiences sailing rural exchange rate France explore kayak active lifestyle. Tourist attractions ticket taxi spa unique experiences.

Inverted accordion
Pacific nighttrain relaxation housing airBnB GEO worldwide unique experiences sailing luxury Holland.

Pacific nighttrain relaxation housing airBnB GEO worldwide unique experiences sailing luxury Holland. Germany Turkey Barcelona. Hiking booking bunkbeds active lifestyle airBnB translator city trip. Last minute currency camper Berlin Cuba wellness exchange rate things to do freedom.

Hungary St. Petersburg insurance relaxation.

Hungary St. Petersburg insurance relaxation. Hungary people New York City bus active lifestyle country Poland Australia cab. Australia train money Moscow boat budget discover Pacific city trip wellness Europe camper. Itinerary last minute sailing maps wellness guide people Holland Australia active lifestyle Paris worldwide booking boat.

Barcelona Vienna hitchhiking locals territory France flexibility recommendations hiking Poland adventure.

Barcelona Vienna hitchhiking locals territory France flexibility recommendations hiking Poland adventure. Budget worldwide maps guide national international Berlin tourist attractions New York City nature bunkbeds flight housing. Hitchhiking France chartering overnight Australia stress free nighttrain gateway deal Brasil couchsurfing. Taxi guide currency.

Train taxi city trip kayak earth miles money activities boat Instagram.

Train taxi city trip kayak earth miles money activities boat Instagram. Airplane Japan lonely planet uncharted spa sight seeing guest translation nighttrain nature dollar St. Petersburg cab. Unique experiences sailing rural exchange rate France explore kayak active lifestyle. Tourist attractions ticket taxi spa unique experiences.

Button

1,048
214

Header

Dividing header

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Block header

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Header with a subheader
This header has a subheader

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

This header is a subheader

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Header with an icon

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Header with an icon on top

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Header with a circular image

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Header with an image and subheader
This header has a subheader

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Center aligned header with an icon
This header also has a subheader

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Center aligned header with a rounded image
This header also has a subheader

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Segment

Regular segment.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Primary segment.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Secondary segment.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Tertiary segment.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Colored segment.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Raised segment.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Stacked segment.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Piled segment.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Divider

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam.

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam.

Divider with text

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam.

Section Divider

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam.

Fitted divider

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam.

Divider with an icon

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam.

Divider with only an icon. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam.

Label

Label
Red label
Basic blue label
Tag label
Pointing label
Label with detail
1,586
Label with icon
Label with an image
image.jpg
150x150

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Ribbon label

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Mini
Tiny
Small
Medium
Large
Big
Huge
Massive

Icon

Sizes
Loading
Circular
Bordered
Colored
Flipped
Rotated

Message

Regular message
Info message
Warning message
Positive message
Negative message
Blue message
Black message
Message with a header
Message with a large icon
Compact message
Floating message

List

Apples
Pears
Oranges
Semantic UI
New York, NY
jack@semantic-ui.com
semantic-ui.com
Semantic-Org/Semantic-UI
Updated 10 mins ago
src
Source files for project
site
Your site's theme
themes
Packaged theme files
default
Default packaged theme
my_theme
Packaged themes are also available in this folder
theme.config
Config file for setting packaged themes
dist
Compiled CSS and JS files
components
Individual component CSS and JS
semantic.json
Contains build settings for gulp
Gaining Access
Inviting Friends
Benefits
Link to somewhere
Rebates
Discounts
Warranty
Getting Started
Introduction
Languages
HTML
JavaScript
CSS
Review

Statistic

5,550
downloads
2,204
views
Three
thousand
signups
5
flights
42
team members
322
likes

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo.

12
shares

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo.

2,204
views
2,204
views
2,204
views
2,204
views
2,204
views
2,204
views