- Lists
- Lists met icons
- Lists met andere icons
- Lists met gemengde icons
- Lists met icons in kleuren
- Lists met kleinere afstanden
- Checklists
- Relative date
- Blockquotes
- Blockquotes met icons
- Blockquotes als CTA
- Buttons
- Buttons klein
- Popup button
- Gallerijen
- Accordion menu
- Accordion menu met achtergrond
Kies voor een H1 als hoofdtitel van je artikel
De header van je artikel start steeds met een H1 header. Je mag deze maar 1x gebruiken in het artikel. Deze bevat de meest interessante woorden die gerelateerd zijn aan je artikel. Een H1 heading mag nooit langer zijn dan 1 regel.
Snel menu layout voorbeelden: Buldit 1: Asfalt.be – Buldit 2: Printbeton.nl – Buldit 3: crepi.be
Alle buldit theme varianten hebben dezelfde stijlelementen. Onderstaande code kan dus voor allen gekopieerd worden. Styling gaat natuurlijk net iets anders zijn.
Met je H2 kies je de subheaders
Subheaders zijn een belangrijk onderdeel van je tekstopmaak en helpt mensen om sneller te vinden wat ze zoeken. Subheaders zijn een belangrijk onderdeel van je tekstopmaak en helpt mensen om sneller te vinden wat ze zoeken. Subheaders zijn een belangrijk onderdeel van je tekstopmaak en helpt mensen om sneller te vinden wat ze zoeken. Aan de hand van vette markering kan je bepaalde woorden in grote stukken tekst er laten uitspringen. Meestal doen we dit voor gemiddelde prijzen toe te lichten.
Dan zijn er ook nog de H3’s
H3’s en optioneel H4’s zijn de diepste subheaders die we gebruiken voor onze websites.
Ten slotte heb je ook nog de H4
De H4 subheader wordt zelden gebruikt. Enkel bij uitgebreide artikels kan het wel eens handig zijn om deze te gebruiken. Subheaders kleiner dan H4 worden niet gebruikt bij Buldit.
Standaard bullets
Wil je iets duidelijk maken dan kan dit aan de hand van Bullets:
- Overzichtelijker om te lezen. Let er wel op dat je steeds consequent bent en de zinnen beperkt tot 1 lijn ofwel alles op meerdere lijnen zodat het niet te druk overkomt
- Komt professioneel over
- Breekt de tekst
- Is handig bij opsommingen
Vinkjes
Bij de Buldit 1 theme zijn de vinkjes steeds in het geel. Buldit 2 en 3 afhankelijk van het kleurenpallet van de
website.
class: list:fas_fa-check
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
- Benut beschikbare ruimte optimaal.
- Kies uit diverse inrichtingsmogelijkheden.
- Voeg meerwaarde toe aan jouw woning (zeker interessant bij verkoop).
<ul class="list:fas_fa-check">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Opeenvolgende vinkjes
Je kan ook gebruikmaken van opeenvolgende vinkjes. Doorgaans gebruiken we deze niet in de tekst maar wel bij de
intro van de offerteformulieren.
class: list:inline
- Gratis
- Vrijblijvend
- Vergelijk & Bespaar
- Erkende Isolatiespecialisten
<ul class="list:fas_fa-check list:inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Lijsten met andere Font awesome icoontjes
Lijsten zoals hierboven met vinkjes werken ook met alle andere Font Awesome icoontjes, bvb:
fas fa-plus -> list:fas_fa-plus
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
<ul class="list:fas_fa-plus">
<li>Item 1</li>
</ul>
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
<ul class="list:fas_fa-minus">
<li>Item 1</li>
</ul>
Gemengde lijsten
Bij gemengde lijsten moeten de icons manueel in elk list item gestoken worden.
class: list:fa
icon vb: <i class="fas fa-plus"></i>
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
<ul class="list:fa">
<li><i class="fas fa-plus"></i>Item 1</li>
<li><i class="fas fa-minus"></i>Item 2</li>
<li><i class="fas fa-check"></i>Item 3</li>
</ul>
Gemengde lijsten met andere kleuren
Bij gemengde lijsten moeten de icons manueel in elk list item gestoken worden.
class vb: icon-green
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
<ul class="list:fa">
<li class="icon-green"><i class="fas fa-plus"></i>Item 1</li>
<li class="icon-red"><i class="fas fa-minus"></i>Item 2</li>
<li class="icon-yellow"><i class="fas fa-check"></i>Item 3</li>
</ul>
Lijsten met alle Font awesome icoontjes in andere kleuren
class voorbeeld: list:fa-primary
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
<ul class="list:fas_fa-check list:fa-primary">
<li>Item 1</li>
</ul>
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
<ul class="list:fas_fa-plus list:fa-green">
<li>Item 1</li>
</ul>
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
<ul class="list:fas_fa-minus list:fa-red">
<li>Item 1</li>
</ul>
Afstand tussen lijst-items
Werkt in combinatie met alle bovenstaande of solo
class: list:spacing
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
- Benut beschikbare ruimte optimaal.
- Kies uit diverse inrichtingsmogelijkheden.
- Voeg meerwaarde toe aan jouw woning (zeker interessant bij verkoop).
<ul class="list:spacing-none">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
- Vergroot het woonvolume van jouw woning zonder aan- of bijbouw.
- Benut beschikbare ruimte optimaal.
- Kies uit diverse inrichtingsmogelijkheden.
- Voeg meerwaarde toe aan jouw woning (zeker interessant bij verkoop).
<ul class="list:spacing-sm">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Checklist
class: list:rounded
Werken met een checklist (deze h3 titel ≠ verplicht)
- Ook bij de opsomming kan je werken met een titel indien gewenst
Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar. - Vergelijk & Bespaar. Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.. Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.
- Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.
- Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.Hier kan je meerdere opsommingen maken amaar de tekst moet wel lang genoeg zijn anders gat het niet mogen met al die bollen onder elkaar.
<div class="list:rounded">
<h3>Optionele titel</h3>
<ol>
<li><strong>Optionele bold tekst</strong>
Tekst
</li>
<li>Tekst</li>
<li>Tekst</li>
<li>Tekst</li>
</ol>
</div>
Relative date
Toont een datum relatief tegenover vandaag.
Hoe je een datum kiest, lijkt vrij hard op gewoon Engels
Hoe je een datum formatteert, vervangt de symbooltjes door de betekenis. Alle andere tekst wordt gewoon zo getoont.
Er zijn ook presets voor veel voorkomende of complexere structuren (als je 1 wilt toevoegen let me know):
- year-transition: Toont het huidige jaar, vanaf 1 november tot 1 januari toont het het huidige jaar + het volgende jaar
- year-transition-single: Toont het huidige jaar, vanaf 15 november toont het het volgende jaar
- monthly-update: Toont de recentste 1e maandag van de maand
- weekly-update: Toont de recentste maandag
Voorbeelden:
15 Feb 2024
16 Apr 2024
25/04/2024
15-04-2024
2024
2024
2024
01-04-2024
08-04-2024
[relative-date date="2 months ago" format="d M Y"]
[relative-date date="tomorrow" format="d M Y"]
[relative-date date="10 days" format="d/m/Y"]
[relative-date date="today" format="d-m-Y"]
[relative-date format="Y"]
[relative-date preset="year-transition"]
[relative-date preset="year-transition-single"]
[relative-date preset="monthly-update" format="d-m-Y"]
[relative-date preset="weekly-update" format="d-m-Y"]
Blockquotes
De standaard blockquote ziet er zo uit:
Wil je genieten van het verlaagde BTW-tarief, dan moet je dus een beroep doen op een erkende aannemer. Gratis en vrijblijvend prijsvoorstellen op maat aanvragen voor isolatiewerken kan via onze offertepagina. Klik hier om offertes op maat te ontvangen.
<blockquote>
Tekst
</blockquote>
Blockquotes met font awesome iconen
Wil je jouw blockquote meer pit geven, dan kan je gebruikmaken van Font Awesome
iconen.
class: blockquote-fa
Onderstaand vind je de meest toepasselijke voor Buldit:
Optionele titel
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="lightbulb" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="calculator" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="euro-sign" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="hand-point-right" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="info" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="thumbs-up" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="thumbs-down" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="angles-right" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="quote-right" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="exclamation" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="face-smile" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Ontdek alles over de verschillende dakgoten, zoals de levensduur, sterkte van het materiaal en het onderhoud. Twijfel je nog steeds? Laat je dan adviseren door één van de specialisten uit het Buldit netwerk.
<blockquote class="blockquote-fa">
<div class="blockquote-icon">
[icon name="user" prefix="far"]
</div>
<div class="blockquote-content">
<h3>Optionele titel</h3>
<p>Tekst</p>
</div>
</blockquote>
Blockquotes als Call To Action
class: blockquote-cta
Vraag vrijblijvend een offerte aan en vergelijk!
<blockquote class="blockquote-fa blockquote-cta">
<div class="blockquote-icon">
[icon name="calculator" prefix="far"]
</div>
<div class="blockquote-content">
Aandacht trekkende titel
</div>
<div class="blockquote-btn">
<a class="btn btn-primary" href="#">button</a>
</div>
</blockquote>
Buttons
classes: btn btn-primary
Button
<a class="btn btn-primary" href="#">Button</a>
Button
<a class="btn btn-accent" href="#">Button</a>
Button
<a class="btn btn-accent-2" href="#">Button</a>
Button
<a class="btn btn-accent-3" href="#">Button</a>
Kleine buttons
class: btn--small
Button
<a class="btn btn-primary btn--small" href="#">Button</a>
Button
<a class="btn btn-accent btn--small" href="#">Button</a>
Button
<a class="btn btn-accent-2 btn--small" href="#">Button</a>
Button
<a class="btn btn-accent-3 btn--small" href="#">Button</a>
Button
<a class="btn--light" href="#">Button</a>
Popup button code
Widget aan maken in de popup area met naam altijd in lowercase en underscores ipv spaties.
Dan op de button data-popup="widget_naam" zetten. Dit kan ook op andere elementen.
Interessante stuk: data-popup="widget_naam"
<a class="btn btn-primary" data-popup="widget_naam">
Popup button tekst
</a>
Accordion menu
class wrapper: accordion__container
class title: accordion__title
class content: accordion__content
-
Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec consectetur elit, nec pretium dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque volutpat mattis scelerisque. In hac habitasse platea dictumst. Sed pharetra pretium arcu, eu aliquam orci mattis in. Ut libero risus, consectetur sed laoreet vitae, placerat sed eros. Duis vitae euismod risus. Cras felis sapien, suscipit a sapien ut, congue euismod risus. Duis rutrum cursus lectus et finibus. Fusce tincidunt nulla eget diam dapibus, et semper dui suscipit. Suspendisse sit amet gravida ligula. Sed luctus, dui et convallis tristique, arcu tellus mollis quam, quis gravida turpis odio sed diam.
-
Duis rutrum cursus lectus et finibusLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec consectetur elit, nec pretium dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque volutpat mattis scelerisque. In hac habitasse platea dictumst. Sed pharetra pretium arcu, eu aliquam orci mattis in. Ut libero risus, consectetur sed laoreet vitae, placerat sed eros. Duis vitae euismod risus. Cras felis sapien, suscipit a sapien ut, congue euismod risus. Duis rutrum cursus lectus et finibus. Fusce tincidunt nulla eget diam dapibus, et semper dui suscipit. Suspendisse sit amet gravida ligula. Sed luctus, dui et convallis tristique, arcu tellus mollis quam, quis gravida turpis odio sed diam.
-
Fusce tincidunt nulla eget diam dapibusLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec consectetur elit, nec pretium dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque volutpat mattis scelerisque. In hac habitasse platea dictumst. Sed pharetra pretium arcu, eu aliquam orci mattis in. Ut libero risus, consectetur sed laoreet vitae, placerat sed eros. Duis vitae euismod risus. Cras felis sapien, suscipit a sapien ut, congue euismod risus. Duis rutrum cursus lectus et finibus. Fusce tincidunt nulla eget diam dapibus, et semper dui suscipit. Suspendisse sit amet gravida ligula. Sed luctus, dui et convallis tristique, arcu tellus mollis quam, quis gravida turpis odio sed diam.
<ul class="accordion__container">
<li>
<div class="accordion__title">
<i class="fas fa-square-plus accordion__open-icon"></i>
<i class="fas fa-square-minus accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
<li>
<div class="accordion__title">
<i class="fas fa-square-plus accordion__open-icon"></i>
<i class="fas fa-square-minus accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
<li>
<div class="accordion__title">
<i class="fas fa-square-plus accordion__open-icon"></i>
<i class="fas fa-square-minus accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
</ul>
Accordion menu met grijze achtergrond
class: accordion__container--background
-
Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec consectetur elit, nec pretium dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque volutpat mattis scelerisque. In hac habitasse platea dictumst. Sed pharetra pretium arcu, eu aliquam orci mattis in. Ut libero risus, consectetur sed laoreet vitae, placerat sed eros. Duis vitae euismod risus. Cras felis sapien, suscipit a sapien ut, congue euismod risus. Duis rutrum cursus lectus et finibus. Fusce tincidunt nulla eget diam dapibus, et semper dui suscipit. Suspendisse sit amet gravida ligula. Sed luctus, dui et convallis tristique, arcu tellus mollis quam, quis gravida turpis odio sed diam.
-
Duis rutrum cursus lectus et finibusLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec consectetur elit, nec pretium dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque volutpat mattis scelerisque. In hac habitasse platea dictumst. Sed pharetra pretium arcu, eu aliquam orci mattis in. Ut libero risus, consectetur sed laoreet vitae, placerat sed eros. Duis vitae euismod risus. Cras felis sapien, suscipit a sapien ut, congue euismod risus. Duis rutrum cursus lectus et finibus. Fusce tincidunt nulla eget diam dapibus, et semper dui suscipit. Suspendisse sit amet gravida ligula. Sed luctus, dui et convallis tristique, arcu tellus mollis quam, quis gravida turpis odio sed diam.
-
Fusce tincidunt nulla eget diam dapibusLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec consectetur elit, nec pretium dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque volutpat mattis scelerisque. In hac habitasse platea dictumst. Sed pharetra pretium arcu, eu aliquam orci mattis in. Ut libero risus, consectetur sed laoreet vitae, placerat sed eros. Duis vitae euismod risus. Cras felis sapien, suscipit a sapien ut, congue euismod risus. Duis rutrum cursus lectus et finibus. Fusce tincidunt nulla eget diam dapibus, et semper dui suscipit. Suspendisse sit amet gravida ligula. Sed luctus, dui et convallis tristique, arcu tellus mollis quam, quis gravida turpis odio sed diam.
<ul class="accordion__container accordion__container--background">
<li>
<div class="accordion__title">
<i class="fas fa-square-plus accordion__open-icon"></i>
<i class="fas fa-square-minus accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
<li>
<div class="accordion__title">
<i class="fas fa-square-plus accordion__open-icon"></i>
<i class="fas fa-square-minus accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
<li>
<div class="accordion__title">
<i class="fas fa-square-plus accordion__open-icon"></i>
<i class="fas fa-square-minus accordion__close-icon"></i>
Title
</div>
<div class="accordion__content">
Content
</div>
</li>
</ul>