2019-01-08 17:33:28 +01:00
---
layout: single
title: Examples
description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
aliases: "/examples/"
---
2019-09-01 12:37:24 +02:00
{{< list-examples.inline > }}
{{ range $entry := $.Site.Data.examples -}}
2020-06-09 15:44:20 +02:00
< h2 id = "{{ $entry.category | urlize }}" > {{ $entry.category }}< / h2 >
2019-09-01 12:37:24 +02:00
< p > {{ $entry.description }}< / p >
2020-06-09 15:44:20 +02:00
{{ if eq $entry.category "RTL" -}}
< div class = "bd-callout bd-callout-warning" >
< p > The RTL feature is still < strong > experimental< / strong > and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? < a href = "{{ $.Site.Params.repo }}/issues/new" > Open an issue< / a > , we'd love to get your insights.< / p >
< / div >
{{ end -}}
2019-09-01 12:37:24 +02:00
{{ range $i, $example := $entry.examples -}}
{{- $len := len $entry.examples -}}
{{ if (eq $i 0) }}< div class = "row" > {{ end }}
< div class = "col-sm-6 col-md-4 col-xl-3 mb-3" >
2021-03-22 21:59:14 +01:00
< a class = "d-block" href = "/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/" { { if in $ example . name " RTL " } } hreflang = "ar" { { end } } >
2019-09-01 12:37:24 +02:00
< img class = "img-thumbnail mb-3" srcset = "/docs/{{ $ . Site . Params . docs_version } } / assets / img / examples / { { $ example . name | urlize } } . png ,
/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
2020-03-05 09:12:59 +01:00
src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
2020-06-10 10:05:48 +02:00
alt=""
2020-03-05 09:12:59 +01:00
width="480" height="300"
loading="lazy">
2020-06-10 10:12:09 +02:00
< h3 class = "h5 mb-1" > {{ $example.name }}< / h3 >
2019-09-01 12:37:24 +02:00
< / a >
< p class = "text-muted" > {{ $example.description }}< / p >
< / div >
{{ if (eq (add $i 1) $len) }}< / div > {{ end }}
{{ end -}}
{{ end -}}
{{< / list-examples.inline > }}