This documentation outlines the inbuilt CSS classes provided in our theme. These classes can be used to achieve various effects and layouts without adding extra CSS code. Below is a detailed guide to their usage and functionality.

How to add class name to the block? #

In WordPress block development, you can add a custom class name to a block using the built-in classname attribute. This allows users to apply additional styling and customization to blocks easily.

• Select the block you want to customize.
• In the right-hand sidebar (Block Settings), scroll to the “Advanced” section.
• Find the “Additional CSS class(es)” field.
• Enter your desired class name (e.g., custom-block-style).
• Save or update the post, then use CSS to style the block accordingly.

Header Classes #

header-absolute #

• Description: Makes the header section position absolute.
• Usage: Add header-absolute to the header element.
• Example:
  <header class="header-absolute">Your Header Content</header>

---

Effect Classes #

divider #

• Description: Adds a core block separator with a height of 14px, 60% width, and centers it.
• Usage: Apply to a separator block.
• Example:
  <hr class="wp-block-separator divider">

divider-top-negative-7 #

• Description: Pulls the divider 7px upward (negative top margin).
• Usage: Add alongside the divider class.
• Example:
  <hr class="wp-block-separator divider divider-top-negative-7">

divider-bottom-negative-7 #

• Description: Pulls the divider 7px downward (negative bottom margin).
• Usage:
  <hr class="wp-block-separator divider divider-bottom-negative-7">

width-100 #

• Description: Sets the element’s width to 100%.
• Usage: For blocks like core/image, custom/block
  <div class="width-100">Full-width Content</div>

box-shadow #

• Description: Adds a default box shadow to the element.
• Usage: For blocks where core shadow options are not available
  <div class="box-shadow">Content with Shadow</div>

grey-to-color-mode-effect #

• Description: Makes image grey and color on hover.
• Usage: For blocks like core/image, core/cover
  <div class="wp-block-cover grey-to-color-mode-effect"><img src="example.jpg" alt="Zoom Image"></div>

color-to-grey-mode-effect #

• Description: Makes image grey and color on hover.
• Usage: For blocks like core/image, core/cover
  <div class="wp-block-cover color-to-grey-mode-effect"><img src="example.jpg" alt="Zoom Image"></div>

stroke-text #

• Description: Adds stroke to text and make text color transparent.
• Usage: For blocks like core/heading
  <h1 class="wp-block-heading stroke-text">Transparent Text with Stroke</h1>

Negative Margin Classes #

• Description: Pulls elements upward by the specified value.
  • margin-top-negative-50: 50px upward.
  • margin-top-negative-100: 100px upward.
  • margin-top-negative-150: 150px upward.
• Description: Pulls elements towards left by the specified value.
  • margin-left-negative-50: 50px towards left.
  • margin-left-negative-100: 100px towards left.
  • margin-left-negative-150: 150px towards left.
• Description: Pulls elements towards right by the specified value.
  • margin-right-negative-50: 50px towards right.
  • margin-right-negative-100: 100px towards right.
  • margin-right-negative-150: 150px towards right.
• Usage: For blocks like core/group, core/column, core/image, etc.
  <div class="margin-top-negative-50">Content</div>

---

Animation Classes #

pulse-effect #

• Description: Adds a pulsing effect to child anchor (<a>) tags.
• Usage: For core/image with link, i.e. play button image with link
  <figure class="play-icon pulse-effect"><a href="#"><img src="play-icon.png" /></a></figure>

---

Hover Effect Classes #

img-zoom-on-hover #

• Description: Zooms in on images within a cover or image block.
• Usage: For core/cover, core/image
  <div class="wp-block-cover img-zoom-on-hover"><img src="example.jpg" alt="Zoom Image"></div>

Slide-in Hover Effects #

• Description: Applies sliding effects to child elements within a cover block.
  • slide-in-right-hover: Slides in from the right.
  • slide-in-left-hover: Slides in from the left.
  • slide-up-hover: Slides in from below.
  • slide-down-hover: Slides in from above.
• Usage: For core/cover > core/*(any block)
  <div class="wp-block-cover"><div class="wp-block-group slide-in-right-hover">Content</div></div>

Underline and Overline Effects #

• Description: Adds horizontal lines on hover for links.
  • overline-on-hover: Adds a line above the text.
  • underline-on-hover: Adds a line below the text.
  • no-line-before: Removes the default short line before hover.
  • line-size-3: Increases the line stroke size to 3px.
  • line-size-5: Increases the line stroke size to 5px.
• Usage: For core/heading, core/paragraph, core/navigation, core/list
  <h2 class="underline-on-hover no-line-before"><a href="#">Hover Text</a></h2>

---

Responsive Classes #

Responsive Negative Margin Classes #

• Description: Pulls elements upward for large screens only.
  • margin-top-negative-50-large-screen
  • margin-top-negative-100-large-screen
  • margin-top-negative-150-large-screen
• Description: Pulls elements towards left for large screens only.
  • margin-left-negative-50-large-screen
  • margin-left-negative-100-large-screen
  • margin-left-negative-150-large-screen
• Description: Pulls elements towards right for large screens only.
  • margin-right-negative-50-large-screen
  • margin-right-negative-100-large-screen
  • margin-right-negative-150-large-screen
• Usage: For core/group, core/column, core/image, etc..
  <div class="margin-top-negative-50-large-screen">Responsive Content</div>

Responsive Alignment Classes #

• Description: Adjusts alignment for small screens.
  • responsive-flex-align-center: Centers content using flexbox.
  • responsive-flex-align-left: Aligns content to the left using flexbox.
  • responsive-text-align-center: Centers text alignment.
• Usage: For core/paragraph, core/heading, etc..
  <div class="responsive-flex-align-center">Centered Content</div>