# Pompiers Bischbrunn : 50 Nouveaux Téléspectateurs Numériques

• Suivre

  Application de construction

This HTML snippet represents a list of “PillModule” items, likely representing keywords or topics a user can follow. Let’s break down the structure and meaning:

Overall Structure:

: An unordered list containing the individual pill items.

• : Each list item represents a single keyword/topic. : Each keyword is wrapped in a button, indicating it’s interactive (likely a checkbox-like functionality).

  button Attributes & Classes:

  data-module-id="PillModule": Identifies this as part of the “PillModule” component.
  data-entryid="9bdc4e12b45264a63495831baac9a198e0f4a20f": A unique identifier for this specific keyword.
  data-entrytype="keyword": Specifies that this entry is a keyword.
  data-popup-title="Themen folgen": The title for a popup that might appear when interacting with this button (likely “Follow Topics” in German). role="checkbox": Indicates that the button behaves like a checkbox for accessibility.
  value="Bauantrag": The actual keyword value (“Bauantrag” which translates to “Building Request” in German).
  aria-checked="false": Indicates the initial state of the checkbox (not checked).
  class="...": A long string of CSS classes that control the button’s appearance and behavior. Let’s break down some key ones:
  aria-[checked=true]:border-cta: when checked, the button gets a “cta” (call to action) border.
  aria-[checked=false]:bg-brand-10: When unchecked, the button has a background color of “brand-10”. aria-[checked=true]:hover:bg-brand-20 / aria-[checked=false]:hover:bg-brand-20: Hover effects with different background colors depending on the checked state.
  group: Likely used for grouping elements together for styling based on the button’s state. disabled:cursor-not-allowed: Changes the cursor to “not-allowed” when the button is disabled.
  h-[32px] / px-3 / py-1.5: Height, horizontal padding, and vertical padding.
  rounded-full: Makes the button have rounded corners.
  whitespace-nowrap: Prevents the text from wrapping to the next line.

  Content within the Button:

  : Contains the keyword text: “Application de construction” (Building Application in French). Note the language mismatch with the popup title. (checkmark circle): An SVG icon representing a checkmark inside a circle. It’s hidden when the button is checked (group-aria-[checked=false]:hidden).
  (plus circle): An SVG icon representing a plus sign inside a circle.It’s hidden when the button is unchecked (group-aria-[checked=true]:hidden).

  SVG Attributes:

  role="img": Indicates that the SVG is an image for accessibility.
  aria-labelledby="iconcheckmarkCircletitle" / aria-labelledby="iconplusCircletitle": Associates the SVG with a descriptive title for screen readers.