Notification bell

Here it is

a!localVariables(
  local!notifications: {
    {
      name: "Sanchit Gupta",
      eventName: "Case Progress",
      eventDetails: "Still waiting for Review",
      date: today(),
      time: time(now()),
      
    },
    {
      name: "Alberto",
      eventName: "New Request",
      eventDetails: " How much time it takes approximately for request to be completed?",
      date: today() - 1,
      time: time(now()),
      
    }
  },
  a!sectionLayout(
    label: "Notification",
    labelIcon: "bell",
    iconAltText: "Bell Icon",
    labelSize: "MEDIUM_PLUS",
    labelHeadingTag: "H2",
    labelColor: "#147E82",
    contents: {
      a!forEach(
        items: local!notifications,
        expression: a!cardLayout(
          contents: {
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextIcon(icon: "calendar"),
                      a!richTextItem(
                        text: concat(" ", property(fv!item, "date", null))
                      )
                    }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextIcon(icon: "clock-o"),
                      a!richTextItem(
                        text: concat(" ", property(fv!item, "time", null))
                      )
                    }
                  ),
                  width: "MINIMIZE"
                )
              }
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!stampField(
                    text: left(property(fv!item, "name", null), 1),
                    backgroundColor: "#0C5659",
                    size: "TINY"
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: property(fv!item, "name", null),
                        size: "MEDIUM",
                        style: "STRONG"
                      ),
                      char(10),
                      a!richTextItem(
                        text: property(fv!item, "eventName", null),
                        style: "STRONG"
                      ),
                      a!richTextItem(
                        text: concat(
                          " ",
                          property(fv!item, "eventDetails", null)
                        )
                      )
                    }
                  ),
                  width: "10X"
                )
              }
            )
          },
          style: "#E9F5FE",
          shape: "SEMI_ROUNDED",
          showBorder: false()
        )
      )
    },
    isCollapsible: true
  )
)