Block Description

The BS > Search Block is a versatile component that provides a user-friendly search feature on your webpage. This block allows visitors to search for content across your site, enhancing their navigation and interaction with your content.

Block Features

The BS > Search Block features include:

• A customizable search input box with options for size and placeholder text.
• An optional search button with a customizable title and icon.
• A comprehensive suite of style options for the button, both in normal state and on hover.
• Typography controls to tailor the appearance of text within the block.
• Wrapper styles to further customize the block’s look, such as margins, padding, border color, and shadow.
• An advanced option to apply additional custom CSS classes.

Block Options

Content

• Search Input
  • PLACEHOLDER (Text Input): Define the placeholder text that appears within the search input box until the user starts typing.
  • SIZE (Dropdown): Choose the size of the search input box, impacting its display on the page.
• Search Button
  • Hide Search Button (Checkbox): This option allows you to remove the search button if desired, leaving just the input box.
  • BUTTON TITLE (Text Input): Specify the text that appears on the search button.
  • ICON CLASS (Text Input): Insert a custom icon class to display an icon on the search button.

Style

• Button (Options are available for both Normal and Hover states)
  • COLOR (Dropdown): Select the button’s background color. If “Custom” is selected, a color picker becomes available.
  • TEXT COLOR (Dropdown): Choose the color of the text displayed on the button.
  • Custom Color (Color Picker): Define a custom color for the button when “Custom” is selected in the COLOR dropdown.
  • Color Format (Dropdown): Choose the color format (HEX, RGB, or HSL) for the custom color.
  • Hex Color (Text Input): Input the HEX code for the custom color.
• Typography
  • FONT SIZE (REM) (Dropdown): Choose the size of the font for the text within the block.
  • APPEARANCE (Dropdown): Define the style of the font such as its weight or formatting.
  • LETTER CASE (Dropdown): Select the case for the text (uppercase, lowercase, capitalized).

Advanced

• Wrapper Styles
  • Margins (Input Fields): Adjust the margin values for the top, right, bottom, and left sides of the block.
  • Padding (Input Fields): Modify the padding values for the top, right, bottom, and left sides of the block.
  • BORDER COLOR (Dropdown): Choose the color of the border from a predefined list of color options.
  • SHADOW (Dropdown): Select from a range of shadow intensity options to apply a box shadow to the block.
• Advanced
  • ADDITIONAL CSS CLASS(ES) (Input Field): Apply custom CSS classes to the block for further customization. Enter one or more class names, separated by spaces, in the input field. These custom classes can be used to target the block with additional CSS rules defined in your theme or custom CSS file.