For TLISI team: Page patterns

This page is a library of all patterns created, repeated, and re-used throughout this website. This serves both as a repository (to allow for copy/paste of blocks into new pages) and as a documentation of each pattern’s name, description, or other relevant use notes.

If you notice any other pattern, layout, or group of blocks that appears repeatedly as you use/edit this website, please flag it and let me know! New patterns can (and should) be added to this library as necessary


Cards (within Grid layout)*

*Grid pattern used in speaker grid of home page. The layout can be reused with different content!

Speaker Card

FirstName LastName

Session

Wide Card

Title

Itaque earum rerum hic tenetur a sapiente delectus. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Eaque ipsa quae ab illo inventore veritatis et quasi.

Profile Card

Firstname Lastname

Square Card

Title

Itaque earum rerum hic tenetur a sapiente delectus. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Eaque ipsa quae ab illo inventore veritatis et quasi.

Past TLISI Card* **

Title

* Also found unstyled as Clickable Card

** Requires a link to be added. Can be added in the Editor Panel (right side) of the Clickable Card block

Column Layouts

Column Highlight Left

Speaker Block

Firstname Lastname

Nunc tincidunt fermentum ante non cursus. Duis viverra hendrerit augue, eu sollicitudin mauris. Nulla ac lectus id nulla egestas egestas. Morbi et mauris tincidunt, pretium massa ut, ornare tellus. Etiam elementum sit amet sapien in pellentesque. Praesent eget augue non ipsum condimentum tempus. Vestibulum ultrices erat eget dolor egestas, vel imperdiet augue placerat. Pellentesque tempor ipsum purus, ac volutpat neque maximus gravida. Aenean condimentum orci sed urna dictum, vel porttitor sapien finibus. Fusce feugiat molestie lectus et molestie. Curabitur interdum felis sed nisl dapibus porttitor.

Donec et elit lacus. Donec quis magna eu ipsum tincidunt facilisis. Pellentesque ultricies nisl vel neque commodo fringilla. Morbi non pulvinar felis. Nulla sed dignissim nisl, at blandit mauris. Sed at ultrices arcu, quis pretium erat. Phasellus dapibus nibh est, sit amet tincidunt nunc laoreet eu.

About the Speaker

Nulla sagittis nunc vitae lacus fermentum, nec sodales dui luctus. In viverra arcu nec pellentesque bibendum. Vivamus fermentum odio lacinia blandit malesuada. Morbi ex nunc, imperdiet eu mauris at, malesuada porttitor mi. Proin ultrices dolor efficitur nibh tempor iaculis. Praesent ut purus lacus. Maecenas in ornare dolor. Ut mattis, justo nec sodales gravida, nunc tortor cursus libero, a sodales velit est ut lacus. Phasellus dictum fringilla gravida. Sed pulvinar ac ante sed ultrices.

Column Highlight Right

Countdown Block (w/ title)*

* Block is syncronized accross pages (i.e. changes to this block will be reflected in all appearances)

00Days
00Hours
00Minutes
00Seconds

Call to Action Banner

Title

Body

Archive Recorded Sessions

Recorded sessions

Day 1

Session Link

Facilitator[s]

Session Link

Facilitator[s]

Session Link

Facilitator[s]

Day 2

Session Link

Facilitator[s]

Session Link

Facilitator[s]

Session Link

Facilitator[s]

Callout Box*

* Width will adjust to fill space (i.e., it will be as wide as the column it is placed in)

Misc. Text Treatments

Superheading*

* Can also be achieved by editing a Paragraph block and adding the d2 class under Advanced→Additional CSS Class(es)

This is a superheading

Archive Link Block

Session Link

Facilitator[s]

Archive Buttons* **

* Download button requires some setup and should not be removed, but text can (should) be edited. More buttons can be added as needed (though hopefully these two should be sufficient)

** Requires some setup:

  1. A file must be uploaded and linked to the download button
  2. “Jump to Recorded Sessions” requires a heading or block with a #recorded-sessions anchor tag somewhere in the page