{"id":74281,"date":"2021-09-08T07:32:00","date_gmt":"2021-09-08T07:32:00","guid":{"rendered":"https:\/\/halalfoundation.org\/blocksc\/"},"modified":"2026-09-10T15:19:39","modified_gmt":"2026-09-10T15:19:39","slug":"blocksc","status":"publish","type":"post","link":"https:\/\/halalfoundation.org\/zh-hans\/blocksc\/","title":{"rendered":"Blocksc"},"content":{"rendered":"\n

cThis post checks every Gutenberg block from the AHF blog reference against the headless article styles. Body copy should be 18.5px with 1.75 line height. Citations render as superscript numbers1<\/a>. <\/p>\n\n

<\/span>01 Headings<\/span><\/h2>\n\n

Heading 3 \u2014 subsection<\/h3>\n\n

Heading 4 \u2014 minor heading<\/h4>\n\n

Heading 5 \u2014 small heading<\/h5>\n\n
Heading 6 \u2014 uppercase label<\/h6>\n\n

<\/span>02 Paragraph and inline formats<\/span><\/h2>\n\n

Bold text<\/strong>, italic text<\/em>, strikethrough<\/s>, highlighted text<\/mark>, H2<\/sub>O, E=mc2<\/sup>, inline code<\/code>, and an inline link<\/a>.<\/p>\n\n

<\/span>03 Lists<\/span><\/h2>\n\n
    \n
  • Unordered item with an orange marker<\/li>\n\n\n\n
  • Second item\n
      \n
    • Nested unordered item<\/li>\n\n\n\n
    • Another nested item<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Third item<\/li>\n\n\n\n
    • Fourth item<\/li>\n\n\n\n
    • Fifth item<\/li>\n\n\n\n
    • Sixth item (mobile Show more should hide from here)<\/li>\n\n\n\n
    • Seventh item<\/li>\n<\/ul>\n\n
        \n
      1. Ordered item with a quiet numeric marker<\/li>\n\n\n\n
      2. Second step\n
          \n
        1. Nested ordered item<\/li>\n<\/ol>\n<\/li>\n\n\n\n
        2. Third step<\/li>\n<\/ol>\n\n

          <\/span>04 Quote and pullquote<\/span><\/h2>\n\n
          \n

          O you who have believed, decreed upon you is fasting as it was decreed upon those before you that you may become righteous.<\/p>\nQur\u2019an 2:183<\/cite><\/blockquote>\n\n

          Pullquotes break long reads with a bold, centered statement.<\/p>Pullquote variant<\/cite><\/blockquote><\/figure>\n\n

          <\/span>05 Table<\/span><\/h2>\n\n
          Category<\/th>Status<\/th>Notes<\/th><\/tr><\/thead>
          Row header<\/td>Yes<\/td>Zebra striping on even rows<\/td><\/tr>
          Second row<\/td>No<\/td>Horizontal scroll on overflow<\/td><\/tr>
          Third row<\/td>Depends<\/td>Compact teal header band<\/td><\/tr><\/tbody><\/table>
          Caption renders below the table.<\/figcaption><\/figure>\n\n

          <\/span>06 Image and alignments<\/span><\/h2>\n\n
          \"Standard
          Standard image with caption.<\/figcaption><\/figure>\n\n
          \"Align
          Left-aligned, text wraps around.<\/figcaption><\/figure>\n\n

          Floated images sit beside the text. Align left floats left with a right margin. Wide and full alignments should extend past the article measure. Text continues to wrap until a clearing element ends the float. <\/p>\n\n

          \n\n

          <\/span>07 Gallery<\/span><\/h2>\n\n
          \n
          \"Gallery<\/figure>\n
          \"Gallery<\/figure>\n
          \"Gallery<\/figure>\n<\/figure>\n\n

          <\/span>08 Columns, Media and Text, Cover<\/span><\/h2>\n\n
          \n
          \n

          Column one<\/h4>\n\n\n\n

          Two equal columns with a gap. Should stack on narrow screens. <\/p>\n<\/div>\n\n\n\n

          \n

          Column two<\/h4>\n\n\n\n

          Each column keeps normal body typography; headings keep their scale.<\/p>\n<\/div>\n<\/div>\n\n

          \"Media<\/figure>
          \n

          Media and Text<\/h4>\n\n\n\n

          Image on one side, content on the other, vertically centered.<\/p>\n<\/div><\/div>\n\n

          <\/span>
          \n

          Cover block<\/h3>\n\n\n\n

          Teal panel for standalone statements or section intros inside a post.<\/p>\n<\/div><\/div>\n\n

          <\/span>09 Embeds<\/span><\/h2>\n\n
          \n