HTML Code Snippets for the WanChai Template

When creating a new section, please use the code snippets here
to help you create content that is consistent with the WanChai template in terms of style.
Simply copy the snippet you want, paste it into the new section and change its content.

White Background VersionColor Background Version

Snippets

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Slider

Tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, recusandae, iusto, nemo, asperiores minima amet corporis ratione ea cumque sint officia ex necessitatibus dolorem sit repellendus. Dignissimos quae saepe praesentium.
Consectetur adipisicing elit. Dolorum, earum, sequi hic quo dolore tempora fuga atque officia voluptatibus ipsum? Nihil, porro distinctio eligendi inventore placeat totam hic beatae deleniti!
Autem, labore, atque quae inventore repudiandae quo numquam minima quas fugiat animi. Fuga, ipsa natus culpa aperiam mollitia illo molestias consequatur minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, tempore blanditiis repellat perspiciatis eum consectetur ipsam natus non iste sequi optio delectus aut deserunt!

Progress Bar

Project 1 (45%)

45% Complete

Project 2 (65%)

65% Complete

Project 3 (85%)

85% Complete

Text Alignment

Left: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto, labore eveniet numquam debitis beatae enim optio voluptatem earum a iste nulla consequuntur explicabo.

Center: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto, labore eveniet numquam debitis beatae enim optio voluptatem earum a iste nulla consequuntur explicabo.

Right: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto, labore eveniet numquam debitis beatae enim optio voluptatem earum a iste nulla consequuntur explicabo.

Heading

H1: Lorem ipsum dolor sit amet

H2: Lorem ipsum dolor sit amet

H3: Lorem ipsum dolor sit amet

H4: Lorem ipsum dolor sit amet

H5: Lorem ipsum dolor sit amet
H6: Lorem ipsum dolor sit amet

Paragraphs and Links

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, hic ad cum aspernatur architecto.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, hic ad cum aspernatur architecto voluptates odio veritatis. Suscipit, labore, delectus ullam modi doloribus vel ut minima mollitia ad cumque ipsum!

Columns

1/2 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, sint, quam numquam eaque magnam fugiat cumque explicabo! Qui, quo, perferendis similique fugiat necessitatibus eius deserunt veniam ipsam dignissimos quia iure.

1/2 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, facere, atque, veritatis, minima dolor odio eligendi blanditiis veniam obcaecati laudantium saepe dolorem suscipit vel quam nihil delectus natus quos similique.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

2/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, nam, eius quibusdam veniam ducimus cumque pariatur facere quam voluptatibus et! Excepturi maxime ipsa tempora eum. Aspernatur, exercitationem sequi provident ducimus.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, itaque et magni.

3/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, distinctio tempora officiis quas veniam tenetur reiciendis facere molestiae quia nemo provident ipsum veritatis voluptatum numquam accusamus esse incidunt magni dicta!

1/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

Snippets

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Slider

Tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, recusandae, iusto, nemo, asperiores minima amet corporis ratione ea cumque sint officia ex necessitatibus dolorem sit repellendus. Dignissimos quae saepe praesentium.
Consectetur adipisicing elit. Dolorum, earum, sequi hic quo dolore tempora fuga atque officia voluptatibus ipsum? Nihil, porro distinctio eligendi inventore placeat totam hic beatae deleniti!
Autem, labore, atque quae inventore repudiandae quo numquam minima quas fugiat animi. Fuga, ipsa natus culpa aperiam mollitia illo molestias consequatur minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, tempore blanditiis repellat perspiciatis eum consectetur ipsam natus non iste sequi optio delectus aut deserunt!

Progress Bar

Project 1 (45%)

45% Complete

Project 2 (65%)

65% Complete

Project 3 (85%)

85% Complete

Text Alignment

Left: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto, labore eveniet numquam debitis beatae enim optio voluptatem earum a iste nulla consequuntur explicabo.

Center: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto, labore eveniet numquam debitis beatae enim optio voluptatem earum a iste nulla consequuntur explicabo.

Right: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, architecto, labore eveniet numquam debitis beatae enim optio voluptatem earum a iste nulla consequuntur explicabo.

Heading

H1: Lorem ipsum dolor sit amet

H2: Lorem ipsum dolor sit amet

H3: Lorem ipsum dolor sit amet

H4: Lorem ipsum dolor sit amet

H5: Lorem ipsum dolor sit amet
H6: Lorem ipsum dolor sit amet

Paragraphs and Links

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, hic ad cum aspernatur architecto.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, hic ad cum aspernatur architecto voluptates odio veritatis. Suscipit, labore, delectus ullam modi doloribus vel ut minima mollitia ad cumque ipsum!

Columns

1/2 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, sint, quam numquam eaque magnam fugiat cumque explicabo! Qui, quo, perferendis similique fugiat necessitatibus eius deserunt veniam ipsam dignissimos quia iure.

1/2 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, facere, atque, veritatis, minima dolor odio eligendi blanditiis veniam obcaecati laudantium saepe dolorem suscipit vel quam nihil delectus natus quos similique.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

2/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, nam, eius quibusdam veniam ducimus cumque pariatur facere quam voluptatibus et! Excepturi maxime ipsa tempora eum. Aspernatur, exercitationem sequi provident ducimus.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/3 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, itaque et magni.

3/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, distinctio tempora officiis quas veniam tenetur reiciendis facere molestiae quia nemo provident ipsum veritatis voluptatum numquam accusamus esse incidunt magni dicta!

1/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.

1/4 Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut, consequuntur aspernatur dicta.