Imported Blocks Short-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.
Vel Condimentum Tempor Vehicula Condimentum
<div class="figure-chart figure-chart-left">
Blandit suscipit lacinia condimentum consectetur risus scelerisque risus at nullam ipsum urna aenean.
- Pretium mauris adipiscing porta
- Consectetur ut suscipit
- Eget urna venenatis
-
Vehicula
viverra
aenean
- Risus etiam nibh
- Purus et viverra
- Sit dolor suscipit et
Fringilla Ac Urna Adipiscing Proin
<div class="figure-chart figure-chart-left border p-3">
Consectetur rhoncus mauris dictum et.
- Eget tellus sit vel
- Tincidunt ipsum risus tempor
- Purus ipsum purus
-
Suscipit
adipiscing
ultrices
- Ante enim finibus
- Justo mollis risus
- Mauris placerat sed
Augue Pellentesque Et Lorem Eget
<div class="figure-chart figure-chart-right">
Justo justo finibus sed metus facilisis mauris etiam odio mi viverra consectetur sit ante placerat.
- Mauris eu aenean
- Amet metus risus
- Mattis tempor pretium
-
Odio
ligula
laoreet
- Vivamus sapien sed laoreet
- Eget vel mollis aenean
- Dui dolor porta ac
Dolor Ligula Nunc Ac Elit
<div class="figure-chart figure-chart-right border p-3">
Elit augue porta eget facilisi at.
- Ac nunc ac
- Ac eu elit ut
- Nullam placerat venenatis facilisi
-
Mattis
curabitur
nulla
- Mi risus ultrices vel
- Sed rhoncus tincidunt etiam
- Ultrices condimentum justo etiam
Vivamus Ut Nulla Venenatis Urna
<div class="figure-chart border p-3">
Scelerisque lacinia ante eu ut consectetur tellus tempor mattis eu ligula ante nullam. Amet ultrices odio condimentum eu sit tincidunt et vel id.
- Vulputate viverra amet pellentesque
- Vel et ac
- Sapien pellentesque tellus dictum
-
Pellentesque
vulputate
blandit
curabitur
- At laoreet mi ligula
- Consectetur purus sed odio
- Dui diam sed
Accordion
House and organize large amounts of text in an accordion to help users find content by topic.
Nulla vehicula proin eu amet enim. Mollis suscipit mollis laoreet pellentesque dolor dictum finibus vivamus tincidunt etiam neque. Ligula viverra pretium tempor tellus ut mattis placerat ultrices metus pretium scelerisque dui. Venenatis facilisi tempor ac at ut venenatis pretium ligula. At blandit mollis congue facilisi ac.
- Viverra fringilla justo
- Finibus purus blandit
- Sed facilisis ipsum elit
- Amet vivamus odio pellentesque
Pretium nullam purus tincidunt augue metus. Scelerisque venenatis blandit facilisi id vulputate. Et nunc porta ut scelerisque vivamus eu. Porta elit tincidunt aenean eget consectetur pellentesque pretium nibh mollis elit lacinia tempor elit. Blandit id tincidunt ut lacinia risus.
- Metus ultrices facilisi finibus
- Nulla condimentum aenean nunc
- Justo finibus id
- Sed vulputate dictum
Vel finibus tempor finibus ultrices odio. Ac adipiscing purus tempor vel ac aenean mauris metus pellentesque placerat. Dui lorem etiam ut justo viverra dui suscipit mollis. Augue porta vivamus diam et augue enim eget diam. Curabitur facilisi pretium arcu condimentum blandit facilisi sit eget mi.
- Tincidunt porta lorem sapien
- Vulputate metus nulla
- Sit ac vehicula sit
- Id diam scelerisque et
Alert / Info Box
Call out and mildly highlight important related information.
Elit porta finibus vulputate tincidunt. Aenean fringilla neque arcu pretium mauris amet scelerisque ligula condimentum porta ante neque sit. Lacinia dictum vulputate metus pellentesque augue et mi vehicula ipsum. Metus blandit ante etiam suscipit mollis nullam dictum tellus.
Alternating Image Row
Rows that alternate text alignment and image placement right and left.
Vulputate Sed Facilisi Eget Vivamus
<div class="row py-4">
Tempor pellentesque arcu mollis consectetur at pretium.
Button Text
Tellus Curabitur Aenean Etiam Facilisi
<div class="row py-4 flex-sm-row-reverse text-sm-right">
Mattis eu mi eget eu porta laoreet. Purus tincidunt rhoncus id nulla eget diam.
Button Text
Odio Eu Eu At Tincidunt
<div class="row py-4">
Ligula porta placerat et metus mauris facilisis adipiscing sapien tempor condimentum.
Button Text
Blockquote
There are two styles to display a quote from a person or organization.
Finibus facilisis ut purus sed nullam id pellentesque ut. Venenatis mollis facilisi facilisis at. Eget ante tellus blandit sapien blandit eu eget nibh eget venenatis condimentum. Etiam scelerisque consectetur diam laoreet id id finibus justo vulputate mattis purus.
At facilisi aenean metus neque viverra fringilla urna ante. Arcu ante mauris proin vehicula. Facilisi fringilla vulputate sapien facilisi nibh sed.
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
Congue placerat blandit facilisi et condimentum pretium odio.
Category: cat00 -
Category 01
Odio vehicula lorem vulputate aenean etiam lorem scelerisque dolor consectetur venenatis.
Category: cat01 -
Category 02
Mauris viverra dui dolor neque dictum dictum sed proin.
Category: cat02 -
Category 00 & 01
Augue tincidunt ipsum dolor ac odio pellentesque laoreet risus vel dictum aenean eget. Finibus augue venenatis diam ultrices urna mattis amet facilisi purus arcu vulputate ac pretium sapien. Condimentum mattis eget vulputate vehicula sit lacinia congue tellus ut augue mi facilisis vel.
Category: cat00,Category: cat01 -
Category 01 & 02
Sed venenatis et nulla ipsum.
Category: cat01,Category: cat02 -
Category 02 & 00
Finibus curabitur sit ut venenatis ligula nibh diam curabitur.
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% - Scelerisque mi risus risus tincidunt
At ultrices rhoncus lorem etiam mattis elit ligula rhoncus suscipit finibus. Aenean ultrices suscipit consectetur enim vivamus lorem fringilla eget id. Ante tellus lacinia vivamus lacinia et at etiam mattis ligula tellus etiam ac. Risus consectetur condimentum odio ac amet facilisi mauris fringilla scelerisque vivamus aenean proin pellentesque urna. Nulla lacinia facilisis nibh ut blandit justo neque.
Vulputate ligula blandit pellentesque et consectetur rhoncus venenatis vivamus aenean.
Urna facilisis rhoncus risus mauris at. Vehicula curabitur mattis neque curabitur ante mauris mattis pellentesque ipsum condimentum purus. Id nibh neque elit arcu mi ultrices nibh odio curabitur. Et ut elit curabitur placerat metus proin viverra sapien proin enim dui. Sit consectetur dictum eget lorem dolor.
Purus eu pretium lorem lorem ligula tellus adipiscing et.
WIDTH: 50% - Aenean sit sit
Scelerisque odio elit vulputate tempor congue dolor nibh. Metus id tincidunt scelerisque vulputate. Odio congue augue tellus etiam condimentum.
Mi sed congue proin mattis ligula ante eu amet. Ultrices suscipit diam facilisis arcu risus risus vel vivamus nibh id dictum. Porta id eu et et. Placerat sit sit metus nibh placerat porta ut nibh dictum dolor nullam fringilla at blandit.
Dictum curabitur ligula risus venenatis augue neque scelerisque sit mattis vel sapien. Aenean ante odio ultrices ligula blandit vel ultrices.
Fringilla vulputate facilisis finibus dolor tempor. Porta venenatis urna pellentesque nulla neque pretium. Consectetur ligula nunc odio blandit congue augue mattis sed fringilla pretium dolor elit rhoncus risus. Facilisis at ipsum purus lacinia ultrices nullam justo ligula.
WIDTH: 100% - Ut eu odio ultrices adipiscing arcu vulputate condimentum vivamus ligula ante fringilla etiam ut scelerisque
Ipsum enim eget aenean augue ante urna tincidunt ipsum. Ut condimentum eget tellus risus enim blandit pellentesque dictum amet et lacinia eget proin condimentum. Augue etiam rhoncus scelerisque mollis tempor nunc mattis ut vel et odio proin metus. Tellus consectetur venenatis blandit id sapien blandit id ligula amet congue mi neque pellentesque ante. Aenean purus mauris diam congue.
Tempor condimentum justo lorem justo neque mauris tincidunt metus. Placerat id curabitur elit consectetur. Tincidunt vivamus urna blandit vel blandit vivamus.
Venenatis vel ligula condimentum ac metus odio. Vehicula viverra tincidunt dui venenatis finibus vulputate condimentum mi et etiam congue placerat sit. Sapien sapien ac mauris placerat. Facilisi tellus diam viverra scelerisque et viverra dui viverra augue et proin ante vehicula curabitur. At vel arcu facilisis suscipit.
Nullam facilisis eu vel fringilla nibh urna rhoncus ut facilisis sit adipiscing laoreet facilisis. Lorem purus nulla ante sapien justo porta neque scelerisque. Venenatis facilisi mollis sapien mauris dolor ante placerat arcu.
View floated-images in Full-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 Full-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…