Heading

Description

Defines and styles text elements to create structured and visually appealing headings.

FREE

This component is available for free. It implements the Bootstrap Heading component. See the installation instructions below for more details.

Arguments

Name	Default	Type	Description
`tag`	`h1`	`String`	Define the html heading tag Options: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `div`, `span`
`text`		`String`	The headline itself. If not set the content block of the component will be rendered.
`size`		`String`	Define a size class, defaults to nil Options: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
`display`		`String`	Define a heading display class for a different styling Options: `1`, `2`, `3`, `4`, `5`, `6`
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<%= render Railsboot::HeadingComponent.new.with_content("h1 Heading") %>
<%= render Railsboot::HeadingComponent.new(tag: "h2").with_content("h2 Heading") %>
<%= render Railsboot::HeadingComponent.new(tag: "h3").with_content("h3 Heading") %>
<%= render Railsboot::HeadingComponent.new(tag: "h4").with_content("h4 Heading") %>
<%= render Railsboot::HeadingComponent.new(tag: "h5").with_content("h5 Heading") %>
<%= render Railsboot::HeadingComponent.new(tag: "h6").with_content("h6 Heading") %>

<h1>
  h1 Heading
</h1>
<h2>
  h2 Heading
</h2>
<h3>
  h3 Heading
</h3>
<h4>
  h4 Heading
</h4>
<h5>
  h5 Heading
</h5>
<h6>
  h6 Heading
</h6>

Sizes

<%= render Railsboot::HeadingComponent.new(tag: "div", size: "h1").with_content("h1 Size") %>
<%= render Railsboot::HeadingComponent.new(tag: "div", size: "h2").with_content("h2 Size") %>
<%= render Railsboot::HeadingComponent.new(tag: "div", size: "h3").with_content("h3 Size") %>
<%= render Railsboot::HeadingComponent.new(tag: "div", size: "h4").with_content("h4 Size") %>
<%= render Railsboot::HeadingComponent.new(tag: "div", size: "h5").with_content("h5 Size") %>
<%= render Railsboot::HeadingComponent.new(tag: "div", size: "h6").with_content("h6 Size") %>

<div class="h1">
  h1 Size
</div>
<div class="h2">
  h2 Size
</div>
<div class="h3">
  h3 Size
</div>
<div class="h4">
  h4 Size
</div>
<div class="h5">
  h5 Size
</div>
<div class="h6">
  h6 Size
</div>

Display

<%= render Railsboot::HeadingComponent.new(tag: "h2", display: "1").with_content("Display 1") %>
<%= render Railsboot::HeadingComponent.new(tag: "h2", display: "2").with_content("Display 2") %>
<%= render Railsboot::HeadingComponent.new(tag: "h2", display: "3").with_content("Display 3") %>
<%= render Railsboot::HeadingComponent.new(tag: "h2", display: "4").with_content("Display 4") %>
<%= render Railsboot::HeadingComponent.new(tag: "h2", display: "5").with_content("Display 5") %>
<%= render Railsboot::HeadingComponent.new(tag: "h2", display: "6").with_content("Display 6") %>

<h2 class="display-1">
  Display 1
</h2>
<h2 class="display-2">
  Display 2
</h2>
<h2 class="display-3">
  Display 3
</h2>
<h2 class="display-4">
  Display 4
</h2>
<h2 class="display-5">
  Display 5
</h2>
<h2 class="display-6">
  Display 6
</h2>

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
The desired component itself (app/components/railsboot/heading_component.rb).
A view template (app/components/railsboot/heading_component.html.erb) for the component unless it's rendered inline.
Any other dependent components such as Slots (just if the component needs those)
Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
A test file for the components (test/components/railsboot/heading_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Header Heading with Anchor