Common frontend components

Layout:

Container – Centers and constrains content width.
Section – Large spacing block for grouping content.
Hero – Full-width banner for headers or landing pages.
Footer – Page footer area.
Columns – Responsive grid system using Flexbox.
Tile – Complex layouts for cards and media objects.

Navigation:

Navbar – Responsive navigation bar with branding and links.
Tabs – Horizontal tab navigation.
Breadcrumb – Hierarchical navigation trail.
Pagination – Page navigation controls.

Forms:

Input – Text fields, email, password, etc.
Textarea – Multi-line text input.
Select – Dropdown menus.
Checkbox & Radio – Form controls.
File Upload – Styled file input.
Buttons – Primary, link, outlined, etc.
Field & Control – Form grouping and alignment.

Content:

Typography – Titles, subtitles, headings, text helpers.
Image – Responsive image container.
Icon – Font Awesome or custom icons.
Media Object – Layout for image + text.
Notification – Alert messages.
Tag – Small label elements.
Progress Bar – Loading indicators.

Cards & Panels:

Card – Content container with header, body, footer.
Panel – Sidebar-like component for menus or lists.
Box – Simple bordered container.

Modals & Interactives:

Modal – Popup dialog.
Dropdown – Interactive menu.
Message – Dismissible alert box.
Tooltip – Hover info (requires JS).

Helpers & Utilities:

Spacing Helpers – Margin/padding classes.
Color Helpers – Text and background colors.
Visibility Helpers – Show/hide on breakpoints.
Flexbox Helpers – Alignment and distribution.

Component Reference Table

Component	Description	Bulma Classes	Sass Customization Tips
Layout
Container	Centers content and sets max width	`.container`	`$container-max-width`
Section	Large spacing block for grouping content	`.section`	`$section-padding`
Hero	Full-width banner for headers or landing pages	`.hero`, `.hero-body`	`$hero-body-padding`, `$hero-background-color`
Footer	Page footer area	`.footer`	`$footer-background-color`, `$footer-padding`
Columns	Responsive grid system using Flexbox	`.columns`, `.column`	`$column-gap`, `$column-padding`
Tile	Complex layouts for cards and media objects	`.tile`	`$tile-spacing`
Navigation
Navbar	Responsive navigation bar with branding and links	`.navbar`, `.navbar-item`	`$navbar-background-color`, `$navbar-height`
Tabs	Horizontal tab navigation	`.tabs`, `.is-active`	`$tabs-border-color`, `$tabs-link-color`
Breadcrumb	Hierarchical navigation trail	`.breadcrumb`	`$breadcrumb-item-color`, `$breadcrumb-separator-color`
Pagination	Page navigation controls	`.pagination`, `.pagination-link`	`$pagination-color`, `$pagination-hover-color`
Forms
Input	Text fields, email, password, etc.	`.input`	`$input-background-color`, `$input-border-color`
Textarea	Multi-line text input	`.textarea`	`$textarea-background-color`
Select	Dropdown menus	`.select`	`$select-background-color`
Checkbox & Radio	Form controls	`.checkbox`, `.radio`	`$control-margin`
File Upload	Styled file input	`.file`	`$file-cta-background-color`, `$file-name-color`
Buttons	Primary, link, outlined, etc.	`.button`, `.is-primary`, `.is-link`	`$button-background-color`, `$button-border-radius`
Field & Control	Form grouping and alignment	`.field`, `.control`	`$field-margin`, `$control-padding`
Content
Typography	Titles, subtitles, headings, text helpers	`.title`, `.subtitle`, `.has-text-*`	`$title-color`, `$subtitle-color`
Image	Responsive image container	`.image`	`$image-radius`
Icon	Font Awesome or custom icons	`.icon`	`$icon-size`
Media Object	Layout for image + text	`.media`, `.media-left`, `.media-content`	`$media-spacing`
Notification	Alert messages	`.notification`	`$notification-background-color`
Tag	Small label elements	`.tag`	`$tag-background-color`, `$tag-radius`
Progress Bar	Loading indicators	`.progress`	`$progress-bar-background-color`
Cards & Panels
Card	Content container with header, body, footer	`.card`, `.card-header`, `.card-footer`	`$card-radius`, `$card-shadow`
Panel	Sidebar-like component for menus or lists	`.panel`, `.panel-block`	`$panel-background-color`, `$panel-border-color`
Box	Simple bordered container	`.box`	`$box-radius`, `$box-shadow`
Interactive
Modal	Popup dialog	`.modal`, `.modal-content`	`$modal-background-color`, `$modal-radius`
Dropdown	Interactive menu	`.dropdown`, `.dropdown-menu`	`$dropdown-background-color`, `$dropdown-radius`
Message	Dismissible alert box	`.message`, `.message-header`	`$message-background-color`, `$message-radius`
Tooltip	Hover info (requires JS)	`.has-tooltip`	`$tooltip-background-color`, `$tooltip-radius`
Helpers
Spacing Helpers	Margin/padding classes	`.m-`, `.p-`	`$spacing-scale`
Color Helpers	Text and background colors	`.has-text-`, `.has-background-`	`$colors` map
Visibility	Show/hide on breakpoints	`.is-hidden-`, `.is-flex-`	`$breakpoints` map
Flexbox Helpers	Alignment and distribution	`.is-flex`, `.is-justify-`, `.is-align-`	`$flexbox-helpers`

9.8 KiB Raw Blame History Unescape Escape

Common frontend components

Component Reference Table

9.8 KiB

Raw Blame History