Imported Blocks Full-Width Rows
Accessible Figure
This block accommodates charts, graphs, and highly stylized images that present larger blocks of information that cannot be adequately described in ALT text.
Tincidunt Augue Eget Vulputate Adipiscing
<div class="figure-chart figure-chart-left">
Laoreet elit mattis at dui porta amet ultrices. Elit dictum eget tellus etiam lacinia neque nunc.
- Venenatis ut lacinia id
- Mauris sapien vulputate mi
- Eget augue mi pellentesque
-
Nulla
diam
elit
- Facilisis laoreet risus blandit
- Odio elit vulputate augue
- Viverra id tempor
Arcu Ut Tellus Proin Proin
<div class="figure-chart figure-chart-left border p-3">
Tempor odio risus ipsum mattis sapien ut tempor neque urna fringilla porta sit sapien.
- Ante vehicula tellus lacinia
- Nulla vel tincidunt
- Arcu et proin
-
Laoreet
tincidunt
etiam
- Ante mi proin congue
- Elit sed purus
- Suscipit pretium odio pretium
Urna Pellentesque Risus Rhoncus Condimentum
<div class="figure-chart figure-chart-right">
Amet facilisi risus odio etiam tellus congue lacinia curabitur purus risus nunc ante ut. Laoreet pretium pretium at nullam mollis tellus nunc mi facilisi purus purus.
- Eget vulputate suscipit condimentum
- Vel augue vulputate
- Ut vulputate justo
-
Rhoncus
vivamus
sit
- Id blandit aenean
- Venenatis ipsum rhoncus nulla
- Ligula neque vel nunc
Metus Elit Laoreet Mollis Proin
<div class="figure-chart figure-chart-right border p-3">
Eget rhoncus ut sit ultrices enim curabitur lacinia vulputate finibus congue mollis mauris et. Dictum congue curabitur enim ante ac ut purus metus lacinia tempor tempor laoreet tincidunt risus.
- Nullam ligula id tincidunt
- Proin elit rhoncus
- Lorem ultrices lacinia porta
-
Urna
aenean
ante
dui
- Ultrices rhoncus justo
- Lacinia blandit vehicula blandit
- Sit diam ligula
Lacinia Suscipit Urna Ligula Placerat
<div class="figure-chart border p-3">
Consectetur diam fringilla ante et et laoreet ultrices augue purus laoreet odio.
- Adipiscing scelerisque nullam
- Urna vivamus consectetur
- Sed congue odio
-
Odio
pretium
vehicula
- Consectetur facilisis ipsum nullam
- Lacinia facilisis etiam
- Odio vivamus laoreet
Accordion
House and organize large amounts of text in an accordion to help users find content by topic.
Odio mauris scelerisque porta mattis facilisi mauris vel tincidunt ac facilisis ac nullam. Facilisi finibus congue vehicula curabitur mi ac purus purus laoreet metus amet. Tincidunt nulla viverra proin consectetur. Rhoncus adipiscing eget nibh risus rhoncus. Nulla venenatis ac scelerisque purus adipiscing nibh mollis.
- Mollis lacinia vulputate
- Id proin etiam venenatis
- Et tellus nulla aenean
- Id nibh sit
Risus nunc curabitur et et ipsum at condimentum congue facilisis aenean nibh viverra. Facilisis congue sapien fringilla vivamus. Ante placerat porta vivamus congue laoreet elit ac nullam laoreet placerat vel. Scelerisque augue etiam mauris porta vulputate suscipit fringilla urna mollis augue. Risus at pretium dui amet facilisi justo.
- Augue elit vehicula metus
- Sed sed viverra aenean
- Et consectetur sit
- Aenean fringilla proin
Mi congue et metus diam purus venenatis porta mauris. Consectetur nulla purus mauris vulputate nunc placerat augue urna. Neque sed scelerisque tincidunt venenatis neque etiam sed at suscipit. Scelerisque vivamus consectetur mauris fringilla dui finibus. Sit ipsum neque nullam enim.
- Risus mattis venenatis finibus
- Id eget eget
- Suscipit ante nibh
- Eu mattis amet
Alert / Info Box
Call out and mildly highlight important related information.
Facilisis dui mollis proin sed ipsum at lorem amet facilisis pellentesque mauris dolor. Mollis blandit sed odio venenatis laoreet vulputate. Consectetur venenatis consectetur pellentesque mollis ante.
Alternating Image Row
Rows that alternate text alignment and image placement right and left.
Fringilla Tellus Mauris Viverra Venenatis
<div class="row py-4">
At sapien lorem tincidunt adipiscing.
Button Text
Enim Fringilla Venenatis Mauris Ultrices
<div class="row py-4 flex-sm-row-reverse text-sm-right">
Etiam arcu nullam tellus mauris placerat proin id.
Button Text
Metus Scelerisque Et Vulputate Condimentum
<div class="row py-4">
Blandit amet nibh tempor elit. Enim nunc ultrices urna vehicula sed sapien id rhoncus dui proin mattis eu sapien purus.
Button Text
Blockquote
There are two styles to display a quote from a person or organization.
Ante porta amet ac blandit sit et facilisis laoreet placerat. Viverra arcu amet consectetur pellentesque neque suscipit odio finibus ligula enim scelerisque.
Elit et condimentum eget pretium condimentum tincidunt enim congue sed suscipit fringilla mollis venenatis. Ante tincidunt nunc ipsum facilisi justo vulputate justo proin mauris scelerisque. Condimentum fringilla id elit proin laoreet.
Carousel for Interior Page
This carousel goes inside the main content of a page and contains images and captions relevant to that content.
Contact
List names, titles, emails, phones, address, websites, and other information.
John Smith, Titles and Stuff
Jane Doe, Titles and Stuff
Contact Grid
List headshots, names, titles, emails, phones, address, websites, and other information in a grid.
Firstname Lastname Job Title
Jane Doe Instructor
Tommen Baratheon King of the Seven Kingdoms
Ser Pounce Flayer of Varmints
Filter Categories
Filter Results
-
Category 00
Ante amet odio condimentum vel dui condimentum enim porta risus nibh adipiscing dictum id sed.
Category: cat00 -
Category 01
Ac dictum ultrices congue pellentesque metus nullam at lacinia aenean.
Category: cat01 -
Category 02
Rhoncus proin mattis risus curabitur nunc tellus odio.
Category: cat02 -
Category 00 & 01
Justo fringilla risus vel metus dictum ultrices mollis at eget justo tincidunt curabitur facilisi. Sed arcu eu metus mollis. Metus neque dolor vivamus vel risus eget id rhoncus.
Category: cat00,Category: cat01 -
Category 01 & 02
Nullam risus adipiscing scelerisque venenatis blandit ipsum dolor arcu scelerisque mi.
Category: cat01,Category: cat02 -
Category 02 & 00
Lacinia sit sit mi vehicula at rhoncus.
Category: cat02,Category: cat00
Floated Images with Captions
Images with captions can be placed on the left or right side of large blocks of text.
WIDTH: 25% - Sed ultrices rhoncus consectetur placerat condimentum
Arcu blandit dui purus sapien tempor proin pretium id eu ante viverra scelerisque augue. Congue vehicula mollis metus ultrices consectetur at venenatis. Etiam urna enim id vehicula mattis tincidunt vehicula. Arcu lorem tellus vel suscipit vehicula et eget augue ante vel tincidunt tempor risus lacinia.
Vulputate elit venenatis porta mollis urna. Augue nunc fringilla ac facilisis et ac viverra ligula neque nulla adipiscing.
Tempor sed pellentesque mi at rhoncus diam eu. Dictum lacinia etiam amet curabitur rhoncus et metus justo dui. Mattis nibh arcu vulputate dolor. Nullam aenean dolor odio enim.
Rhoncus congue ipsum sapien metus purus condimentum porta mollis mi placerat. Ac vulputate lorem finibus vulputate purus placerat arcu ipsum arcu mollis sed.
WIDTH: 50% - Porta viverra
Vulputate dictum vehicula tincidunt urna venenatis. Vulputate pretium sed elit congue laoreet vulputate ultrices vivamus laoreet. Porta rhoncus rhoncus condimentum augue purus scelerisque elit.
Mollis elit ante suscipit sapien sit neque condimentum et consectetur urna mattis. Facilisi at mattis urna sit adipiscing odio justo odio sed. Vulputate vivamus justo curabitur aenean nunc facilisi tincidunt ultrices purus vivamus. Proin augue proin porta dui ut rhoncus viverra purus odio mattis. Proin nullam fringilla placerat justo ut lacinia finibus tincidunt.
Arcu ligula facilisi amet pretium tellus. Metus nullam urna proin ut pellentesque amet. Arcu rhoncus etiam ligula dui.
Scelerisque rhoncus at porta enim nulla. Scelerisque rhoncus eget pellentesque lorem. Viverra enim lorem risus mattis condimentum mattis dui ligula scelerisque condimentum curabitur mi. Purus condimentum eu blandit porta proin mattis ipsum tincidunt proin lacinia etiam metus vel viverra.
WIDTH: 100% - Et aenean blandit etiam blandit vulputate tincidunt risus porta mollis tincidunt id mollis sed arcu vel blandit fringilla
Tellus mattis pellentesque curabitur suscipit ac sit. Laoreet mollis pellentesque id venenatis dolor curabitur mauris facilisis. At blandit mattis diam fringilla eu at arcu nullam nunc metus. Vehicula rhoncus diam venenatis arcu nunc laoreet tincidunt id ligula at.
Facilisis nunc viverra mollis porta ante curabitur facilisi rhoncus risus tellus etiam sit. Eu urna metus vivamus mi.
Blandit nullam mollis finibus ipsum nullam nibh condimentum. Tellus rhoncus lacinia dictum ultrices tincidunt at mi ut augue nullam. Etiam laoreet mauris diam vulputate risus porta tellus odio laoreet viverra. Finibus finibus rhoncus mauris urna id. Tincidunt tincidunt proin nibh neque.
Diam laoreet mauris mi blandit nulla laoreet nibh dolor aenean aenean elit. Scelerisque elit vivamus venenatis eu blandit elit tincidunt.
View floated-images in Short-Width RowGoogle Calendar Feed
Display a public Google Calendar in a simple feed.
| Key | Values | Default | Behavior |
|---|---|---|---|
| id | string | N/A | Google Calendar ID must be supplied to access calendar data |
| key | string | N/A | Google Calendar public API key must be supplied to access calendar data |
| params | various | N/A | Set parameters for fetching the JSON data, such as limiting the max number of events or display order. List of parameters |
| display.heading | string | "Name of Google Calendar" | Set the name of the calendar which appears above the feed. |
| display.columns | integer 1-4 | 4 |
Choose the column layout. Any number other than 1-3 will result in 4 column layout (default). |
| display.popover.enable | boolean | true |
Enable hover-activated popover containing partial event description. |
| display.popover.maxChar | integer 100-500 | 150 |
Choose the max amount of characters inside the popover. Any number below 100 will default to 100. Any number above 500 will default to 500. |
| display.popover.placement |
top right bottom left auto |
auto |
Determine where the popover appears relative to the calendar entry. |
| button.enable | boolean | false |
Provide a link to the full calendar located to the right of the calendar heading. |
| button.text | string | "Go to Calendar" | Enter custom button text. |
| button.href | string | "Google Calendar Page Link" | Provide a link to the full calendar page. |
| button.class | string | btn btn-link |
Customize the button appearance with a class. |
| button.icon | string | far fa-calendar |
Change the Font Awesome icon inside the button. List of Font Awesome icons |
Google Calendar Full 3rd Party Plugin
Display a public Google Calendar in various formats using FullCalendar.io.
Media Embed
Embed third-party content into the webpage - choose an aspect ratio that best suits the content.
21:9 Ratio Ultrawide
This aspect ratio is typically associated with movies in theater.
16:9 Ratio Standard Monitor
This is the most common TV and computer monitor aspect ratio.
3:2 Ratio Photograph/Film
Many professional photographs are taken in this aspect ratio.
4:3 Ratio Ye olde monitor
Older monitors and TVs use this aspect ratio.
1:1 Ratio Square
View media-gallery in Short-Width Row
Media Gallery - Bootstrap Version Alpha
This uses a combination of the BS4 modal and carousel with a few customizations to make it function as a lightbox photo album.
Twitter Feed Front-end Only
Choose a Twitter user, list, collection, or likes and display the Tweets. Functionally appropriate in a sidebar.
Basic container requires data-twitter="timeline" attribute
<div data-twitter="timeline" ... ></div>
| data-* attribute | Values | Default | Behavior |
|---|---|---|---|
| timeline | timeline | Initialization logic is dependent on this data attribute | |
| source |
|
N/A | Required value and determines requirements of other data-* attributes |
| name | Twitter User Name without @ | N/A | Required when source value is profile, list, or likes |
| slug | Twitter list slug id | N/A | Required when source is list |
| id | Twitter collection ID | N/A | Required when source is collection |
| limit | 1-20 | 5 | Number of tweets to show between 1-20 and default value of 5 |
| layout |
|
null | Determines the final layout of the display. Columns is a CSS based masonary grid and all other values return a single column |
Twitter Feed - Profile Backend
Choose a Twitter user and display their Tweets. Functionally appropriate in a sidebar.
Loading…
Twitter Feed - Columns Backend
Best displayed in a full-width row.
Loading…
Twitter Feed - List Backend
Choose a Twitter user and display their Tweets. Functionally appropriate in a sidebar.
Loading…