Text

These elements are used for text. Things like HTML, lists, accordions, tabbed content, counters, employee profiles, etc.

Accordion 01

  • By default, opening one accordion item will not close other accordion items. This can be adjusted though

Example site: https://answer1.zionandzion.com/pricing/

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Comparison Table 01

  • Can take up to 5 “plans” (could be tiers, levels, account levels, packages, pricing, etc.)
  • Number of Content rows are flexible

Example site: https://www/bank34.com/personal/checking-money-market-savings-accounts/kasasa-accounts/

Plan 1

Plan 2

Plan 3

Plan 4

Plan 5

A plan subtitle

A plan subtitle

A plan subtitle

Get Started
Apply Now
Download
Google
Content 1

No monthly service fee

No minimum balance

1 – 5 users

No monthly service fee

No minimum balance

6 – 10 users

No monthly service fee

No minimum balance

10 – 25 users

No monthly service fee

No minimum balance

26 – 100 users

No monthly service fee

No minimum balance

100+ users

Content 2

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Content 3

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Plan 1

A plan subtitle

Get Started
Content 1

No monthly service fee

No minimum balance

1 – 5 users

Plan 2

Apply Now
Content 1

No monthly service fee

No minimum balance

6 – 10 users

Plan 3

A plan subtitle

Content 1

No monthly service fee

No minimum balance

10 – 25 users

Plan 4

A plan subtitle

Download
Content 1

No monthly service fee

No minimum balance

26 – 100 users

Plan 5

Google
Content 1

No monthly service fee

No minimum balance

100+ users

Comparison Table 02

  • Can take up to 3 “plans” (could be tiers, levels, account levels, packages, pricing, etc.)
  • The 2nd plan will be the larger, emphasized plan (whether there are 2 or 3 plans)

Plan 1

A plan subtitle

No monthly service fee

No minimum balance

1 – 5 users

Plan 2

A plan subtitle

No monthly service fee

No minimum balance

6 – 10 users

Apply Now

Plan 3

No monthly service fee

No minimum balance

11 – 25 users

Anchor Link

Comparison Table 03

This comparison table is created to easily compare features across plans while keeping the titles of the plans sticky.

  • Can only take 2 “plans” (could be tiers, levels, account levels, packages, etc.)
  • Includes a Sign Up button to open a modal to fill out a form
  • Dev note: You will need the “comparison-table-03-modal” files (Twig, SCSS, JS) to make the modal work. Modal is embedded in layout-base.twig

Example site: https://larsonair.zionandzion.com/maintenance-plans/

A table heading intro

Most Popular

Premium

$225

$175/yr if paying in advance

Services included:

Whole Milk

Pumpkin Pie

Sean Connery James Bond

SUV Vehicle

Free Fee

Continental Breakfast

Free Tire Air

Jimmy Johns Smells

Laughs

Black Tie Birthday

Standard

$100

$80/yr if paying in advance

Services included:

Skim Milk

Blueberry Pie

Pierce Brosnan James Bond

Car Vehicle

50% off Fee

Continental Breakfast

Free Tire Air

Jimmy Johns Smells

A table heading intro

Services included:

Standard $100

$100

$80/yr if paying in advance
Most Popular

Premium $225

$225

$175/yr if paying in advance

Milk

 Skim Whole

Pie

 Blueberry Pumpkin

James Bond

 Pierce Brosnan Sean Connery

Vehicle

 Car SUV

Fee

 50% off Free

Continental Breakfast

Free Tire Air

Jimmy Johns Smells

Laughs

Black Tie Birthday

Content + Image 01

  • Layout can either be Content/Image or Image/Content (flipping position)
  • Image can be positioned either within the ~1140px container, or extended to the screen edge (image is within container in example)
Content image

A Content Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis felis augue, condimentum eu posuere ut, eleifend sit amet nisl. Aenean ut cursus mi, iaculis egestas quam. Donec aliquam fringilla pharetra. Mauris mollis, nunc quis aliquet aliquet.

  • Interdum et malesuada
  • Vivamus posuere sollicitudin sapien
  • In bibendum vel justo id pretium

Counter 01

  • Numbers can either count up all at once or delay each (shown with 0.25 sec delay between each)
  • Can append and/or prepend to number (like #1 or 30M)
  • Max of 4 counters

Example site: https://casper.zionandzion.com/~salonsby/

0

This is without anything prepended

~0

This is with prepended content

0%

This is with appended content

$0+

This is with both prepended and appended content

HTML 01

WYSIWYG container that can be used for all sorts of text, such as bold, italic, headings, lists, links, etc.

  • Custom TinyMCE button allow buttons in the middle of the WYSIWYG content
  • Custom TinyMCE button allow for 1-4 columned lists (bulleted or numbered)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H1 heading text

H2 heading text

H3 heading text

H4 heading text

H5 heading text
H6 heading text

I’m a link

I’m some bolded text

I’m some italicized text

Centered text

Right aligned text

Lorem ipsum dolor amet edison bulb forage art party actually wolf kitsch intelligentsia af. Cred selvage austin authentic mlkshk synth scenester. Live-edge mustache 8-bit locavore. Before they sold out vexillologist activated charcoal, sustainable fingerstache glossier flexitarian. Bitters marfa brooklyn banh mi distillery taiyaki. Pickled cliche fingerstache actually scenester typewriter.

Button in the middle of HTML

Blue bottle man braid roof party cred, cloud bread fashion axe man bun chicharrones crucifix helvetica. Flexitarian fashion axe disrupt chia master cleanse ramps palo santo four loko snackwave celiac succulents gentrify. Affogato activated charcoal pork belly, next level church-key you probably haven’t heard of them scenester four loko plaid vegan taxidermy pug. Put a bird on it DIY deep v, YOLO brunch raw denim VHS quinoa thundercats shabby chic succulents pork belly four dollar toast chillwave.

One Column List
  • Lorem ipsum dolor amet hammock
  • Tattooed plaid wayfarers shoreditch brooklyn
  • Beard pinterest fam la croix meh copper mug
  • Mixtape poutine craft beer portland meh kombucha
  • Pabst narwhal knausgaard vice pork belly
  • Fashion axe small batch
Two Column List
  • Lorem ipsum dolor amet austin
  • Bicycle rights drinking vinegar
  • Tilde succulents locavore four loko
  • Meh messenger bag wayfarers vinyl
  • You probably haven’t heard of them
  • Fanny pack iceland messenger bag gluten-free
  • Chicharrones franzen small batch
  • Pour-over yr hell of sustainable messenger bag
  • Tousled man braid m kale chips
Three Column Numbered List
  1. Lorem ipsum dolor amet shoreditch
  2. Copper mug tofu williamsburg
  3. Waistcoat crucifix lo-fi intelligentsia street art
  4. Narwhal farm-to-table whatever
  5. Street art meh deep v ethical flexitarian
  6. Chia mustache poutine. 8-bit gochujang blog
  7. Shabby chic jean shorts messenger bag
  8. Elvage slow-carb activated charcoal
Four Column Numbered List
  1. Lorem ipsum dolor amet prism mixtape
  2. Listicle hammock, flannel chambray glossier
  3. Subway tile asymmetrical chartreuse viral
  4. Chillwave chicharrones keffiyeh hoodie
  5. Vice neutra DIY. IPhone lyft pok pok
  6. Typewriter small batch kickstarter
  7. Polaroid chia copper mug slow-carb cardigan chicharrones

Normcore chambray pickled, kombucha unicorn photo booth scenester 90’s prism knausgaard chillwave paleo. Chicharrones iPhone beard letterpress godard keffiyeh enamel pin. Chartreuse organic twee, readymade brooklyn 3 wolf moon deep v af pabst bespoke gluten-free kogi sartorial. Fam church-key deep v activated charcoal meh tousled swag hot chicken. Art party venmo try-hard iceland, neutra portland normcore ennui occupy biodiesel selfies raclette butcher listicle viral. Actually fashion axe biodiesel meditation kogi salvia artisan YOLO austin scenester health goth helvetica gastropub synth.

CTA Button

Tabbed Content 01

Tabbed content allows you to have multiple pieces of information in a small area, similar to an accordion.

  • These tabs will switch to an accordion on mobile
  • By default, opening one accordion item will close other accordion items

Example site: https://salonsbyjc.com/about-salons-by-jc/

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabbed Content 02

Tabbed content allows you to have multiple pieces of information in a small area, similar to an accordion.

  • These tabs will switch to an accordion on mobile
  • Animation was added to smooth out the transition between tabs, and content direction movement changes depending on direction of next active tab
  • Built for minimum of 2 and maximum of 3 tabs

Example site: https://larsonair.zionandzion.com/

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel condimentum sem, sit amet sollicitudin ex. Duis dictum sit amet elit at mattis. Vestibulum fermentum nulla ac posuere suscipit. Nullam nec eros mauris. Cras ac enim lorem. Vivamus augue quam, tempus quis suscipit nec, scelerisque consectetur turpis. Fusce faucibus augue id purus vestibulum tempus. Sed et aliquam sapien. Phasellus volutpat dui a vestibulum laoreet. Donec aliquam quis dolor id facilisis.

Sed id velit vitae lectus auctor congue a vel arcu. Nunc elementum justo vel urna porttitor efficitur. Aliquam blandit faucibus venenatis. Morbi et ultrices lacus. Morbi facilisis, ex sed pellentesque gravida, mauris lacus egestas quam, in consequat purus mi nec lacus. Nullam viverra tortor vitae sem luctus, a sollicitudin velit aliquet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec molestie mauris. Proin eleifend nulla id nisl pellentesque mollis. Sed ultrices diam dolor, eget venenatis ligula congue efficitur. Curabitur augue tellus, fermentum at ligula nec, egestas consequat orci. Donec sit amet aliquet ante. Donec nec odio imperdiet, accumsan nulla vitae, volutpat nunc. Mauris nec elementum urna, eu euismod tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam tincidunt felis at convallis commodo. Suspendisse tempor, augue vitae ornare tincidunt, quam diam vulputate erat, sed molestie velit magna nec sem. Proin at turpis orci. Donec rutrum mattis metus imperdiet molestie. Donec venenatis mi eget nisi ullamcorper eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et scelerisque nulla, nec rutrum quam. Donec vestibulum eu neque sit amet suscipit. Aliquam suscipit neque quis facilisis luctus. Duis id elit tortor. Vivamus urna massa, accumsan eget varius sed, tempus eu metus. In erat nisl, blandit non enim eu, pellentesque varius lectus. Praesent ex felis, laoreet sed eleifend vitae, volutpat non est. Aliquam vitae libero in neque accumsan fermentum. Nunc eget egestas elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ullamcorper mauris. Ut ut aliquam nisi. Morbi viverra hendrerit tempor. Nullam rutrum porttitor eleifend. Integer egestas quam nisi, sed scelerisque leo dictum sit amet.

Nam elit ante, pharetra at nulla ut, fringilla pellentesque diam. Aenean libero neque, ultrices mattis dictum a, mollis et tellus. Phasellus mattis posuere leo, sed venenatis nisl auctor et.

Tabbed Content 03

Component Details

  • Vertical Tabs with Scrolling details (Heading + Description)
  • Current component has lots of option like selecting post types, gallery, custom background. For the components library, we will setup a basic version.

Example site: https://sierracharlieaviation.com/aviator-career-program-pilot-training/

Image Gallery Heading

Image Heading 1

Image Description 1

Image Heading 2

Image Description 2

Image Heading 3

Image Description 3

Image Heading 4

Image Description 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Tabbed Content 04

“Our Fleet” Table https://flexivan.com/our-fleet/

  • Tabs on left side – Heading
  • Detail on right – 1 Image + Table for Heading + Description (no limits)

Example site: https://flexivan.com/our-fleet/

Main Heading

Tab Title 1
Tab Title 1
Row Heading
Row Description
Row Heading
Row Description
Row Heading
Row Description
Row Heading
Row Description
Row Heading
Row Description
Tab Title 2
Tab Title 2
Row Heading 1
Row Description 1
Row Heading 1
Row Description 1
Row Heading 1
Row Description 1
Row Heading 1
Row Description 1
Tab Title 3
Tab Title 3
Row Heading 2
Row Description 2
Row Heading 2
Row Description 2
Row Heading 2
Row Description 2
Row Heading 2
Row Description 2
Tab Title 4
Tab Title 4
Row Heading 3
Row Description 2
Row Heading 3
Row Description 2

Timeline 01

Timeline with GSAP animation to load the steps and animate the connecting line as you scroll.

  • Minimum of 2 steps

Example site: https://www.bank34.com/mortgage-lending/pre-approval/

World War I

1 Assassination
2 War Begins
3 Invasions Begin
4 Russian Front Begins
5 German Advance Stopped
6 Lusitania Sank
7 Italy Enters War
8 Battle of Verdun Begins
9 Battle of Somme Begins
10 Battle of Verdun Ends
11 Submarine Warfare Resumes
12 U.S. Enters War
13 U.S. Troops Arrive
14 Russia Out
15 Final German Push
16 German Army Stopped
17 Final Offensive
18 Armistice
Step 1

Assassination

July 28, 1914

Archduke Francis Ferdinand is assassinated.

Step 2

War Begins

July 28, 1914

Austria-Hungary declares war on Serbia, beginning World War I.

Step 3

Invasions Begin

August 2-7, 1914

Germany invades Luxembourg and Belgium. France invades Alsace. British forces arrive in France. Nations allied against Germany were eventually to include Great Britain, Russia, Italy, Australia, New Zealand, South Africa, Rhodesia, Romania, Greece, France, Belgium, United States, Canada, Serbia, India, Portugal, Montenegro, and Poland.

Step 4

Russian Front Begins

August 10, 1914

Austria-Hungary invades Russia.

Step 5

German Advance Stopped

September 9, 1914

Allied forces halt German advance into France during First Battle of the Marne.

Step 6

Lusitania Sank

May 7, 1915

German submarine sinks the passenger liner Lusitania during crossing from New York to Liverpool, England, killing 128 Americans.

Step 7

Italy Enters War

May 23, 1915

Italy declares war on Austria-Hungary.

Step 8

Battle of Verdun Begins

February 21, 1916

Germany begins the attack on Verdun.

Step 9

Battle of Somme Begins

July 1, 1916

Allied offensive begins the Battle of the Somme.

Step 10

Battle of Verdun Ends

December 18, 1916

Battle of Verdun ends with 550,000 French and 450,000 German casualties.

Step 11

Submarine Warfare Resumes

February 1, 1917

Germany returns to unrestricted submarine warfare halted after the sinking of the Lusitania.

Step 12

U.S. Enters War

April 6, 1917

The United States declares war on Germany.

Step 13

U.S. Troops Arrive

June 24, 1917

American combat forces arrive in France.

Step 14

Russia Out

December 15, 1917

Russia signs armistice with Germany.

Step 15

Final German Push

March 21, 1918

Germany begins its final offensive of the war.

Step 16

German Army Stopped

June 2, 1918

American forces stop German attempt to cross the Marne River at Chateau-Thierry.

Step 17

Final Offensive

September 26, 1918

Allied forces begin the attack at Meusse-Argonne, the final offensive of the war.

Step 18

Armistice

November 11, 1918

Germany signs the Armistice at Compiègne, ending World War I.

Tooltips 01

Tooltips that have a symbol that can be hovered to activate and read more

Example site: https://answer1.zionandzion.com/pricing/

Tooltip1

Tooltip2

Tooltip3

We use uses cookies to enable essential functions and help us deliver a meaningful online experience. Read our Privacy Policy here.