x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div style="margin-bottom: 20px;">
<h1 class="mb-4 text-gray-900 dark:text-white text-5xl font-extrabold md:text-6xl lg:text-7xl tracking-tighter leading-none">Sample Heading with tighter spacing</h1>
</div>
<div style="margin-bottom: 20px;">
<h1 class="mb-4 text-gray-900 dark:text-white text-5xl font-extrabold md:text-6xl lg:text-7xl tracking-tight leading-none">Sample Heading with tight spacing</h1>
</div>
<div style="margin-bottom: 20px;">
<h1 class="mb-4 text-gray-900 dark:text-white text-5xl font-extrabold md:text-6xl lg:text-7xl tracking-normal leading-none">Sample Heading with normal spacing</h1>
</div>
<div style="margin-bottom: 20px;">
<h1 class="mb-4 text-gray-900 dark:text-white text-5xl font-extrabold md:text-6xl lg:text-7xl tracking-wide leading-none">Sample Heading with wide spacing</h1>
</div>
<div style="margin-bottom: 20px;">
<h1 class="mb-4 text-gray-900 dark:text-white text-5xl font-extrabold md:text-6xl lg:text-7xl tracking-wider leading-none">Sample Heading with wider spacing</h1>
</div>
<div style="margin-bottom: 20px;">
<h1 class="mb-4 text-gray-900 dark:text-white text-5xl font-extrabold md:text-6xl lg:text-7xl tracking-widest leading-none">Sample Heading with widest spacing</h1>
</div>
1
2
3
4
5
<% Fluxbit::Config::HeadingComponent.styles[:spacings].keys.each do |spacing| %>
<div style="margin-bottom: 20px;">
<%= fx_heading(spacing: spacing, with_content: "Sample Heading with #{spacing} spacing") %>
</div>
<% end %>