{"id":11,"date":"2025-02-01T18:53:48","date_gmt":"2025-02-01T23:53:48","guid":{"rendered":"https:\/\/www.golive.clarku.edu\/jp\/?page_id=11"},"modified":"2025-11-11T13:10:28","modified_gmt":"2025-11-11T18:10:28","slug":"advanced-class-names","status":"publish","type":"page","link":"https:\/\/www.clarku.edu\/wordpress\/components\/advanced-class-names\/","title":{"rendered":"Advanced class names"},"content":{"rendered":"\n
\n
\n

The ClarkU web platform has additional class names that let you customize blocks in ways the editor can’t.<\/p>\n\n\n\n

Color<\/h2>\n\n\n\n
    \n
  • split-background-50<\/code><\/kbd> creates the effect of an image overlapping a colored background. It’ll basically overlay the background color over the bottom 50% of the element. You can also use split-background-25<\/code><\/kbd> and split-background-75<\/code><\/kbd> to change the amount of background cover to 25% and 75% respectively.<\/li>\n\n\n\n
  • pleasantville<\/code><\/kbd> makes images appear black and white, but in color when you hover over them<\/li>\n\n\n\n
  • has-drop-shadow<\/code><\/kbd> adds a slight drop shadow to text. The drop shadow is black; it’s intended to make white text easier to read. There are two progressively darker ones: has-drop-shadow-1<\/code><\/kbd> and has-drop-shadow-2<\/code><\/kbd>.<\/li>\n<\/ul>\n\n\n\n

    Columns and sidebars<\/h2>\n\n\n\n
      \n
    • sidebar<\/code><\/kbd> add to a columns block (with two columns) to create a layout with a main column and a sidebar. On small screens, the sidebar column display above the main column.<\/li>\n\n\n\n
    • sidebar-right<\/code><\/kbd> Like sidebar, but on small screens, the sidebar column display after<\/em> the main column.<\/li>\n<\/ul>\n\n\n\n

      Overlap<\/h2>\n\n\n\n
        \n
      • lifted<\/code><\/kbd> elevates an element 4rem on larger screens<\/li>\n\n\n\n
      • stagger-left<\/code><\/kbd> elevates odd numbered children by 4rem on larger screens (intended for two-column layouts)<\/li>\n\n\n\n
      • stagger-right<\/code><\/kbd> elevates even numbered children by 4rem on larger screens (intended for two-column layouts)<\/li>\n\n\n\n
      • hang<\/code><\/kbd> pushes an element that is aligned left or right slightly out of the text column<\/li>\n<\/ul>\n\n\n\n

        Spacing<\/h2>\n\n\n\n
          \n
        • section<\/code><\/kbd> adds 4.5rem of margin to the top and bottom of an element. <\/li>\n\n\n\n
        • padded<\/code><\/kbd> adds 2-4rem of padding to an element depending on screen size.<\/li>\n\n\n\n
        • padded-inline-sleight<\/code><\/kbd> adds 2.5rem of padding to the left and right.<\/li>\n\n\n\n
        • roomy<\/code><\/kbd> adds 2.5rem-5rem of both margin and padding. Use cautiously.<\/li>\n\n\n\n
        • double-bottom-margin<\/code><\/kbd> doubles the standard bottom margin. <\/li>\n\n\n\n
        • triple-bottom-margin<\/code><\/kbd> triples the standard bottom margin. <\/li>\n\n\n\n
        • no-gap<\/code><\/kbd> removes the default spacing between columns, grid elements, etc.<\/li>\n\n\n\n
        • double-gap<\/code><\/kbd> doubles the default spacing between columns, grid elements, etc.<\/li>\n\n\n\n
        • triple-gap<\/code><\/kbd> triples the default spacing between columns, grid elements, etc.<\/li>\n\n\n\n
        • no-margin<\/code><\/kbd> removes the margin from an element.<\/li>\n\n\n\n
        • no-padding<\/code><\/kbd> removes the padding from an element.<\/li>\n\n\n\n
        • abut-start<\/code><\/kbd> removes the space before an element.<\/li>\n\n\n\n
        • abut-end<\/code><\/kbd> removes the space after an element.<\/li>\n<\/ul>\n\n\n\n

          Typography<\/h2>\n\n\n\n
            \n
          • serif<\/code><\/kbd> displays the element using Loretta, our serif typeface.<\/li>\n\n\n\n
          • sans<\/code><\/kbd> displays the element using Lato, our sans-serif typeface.<\/li>\n\n\n\n
          • display<\/code><\/kbd> displays the element using IvyPresto, our display typeface.<\/li>\n\n\n\n
          • eyebrow<\/code><\/kbd> displays the element in the bold all caps style found frequently above headings.<\/li>\n\n\n\n
          • intro<\/code><\/kbd> intended for introduction paragraphs, increases font size and uses the serif face.<\/li>\n\n\n\n
          • caption<\/code><\/kbd> intended for captions, it has less top margin so it is closer to the preceding element.<\/li>\n\n\n\n
          • arrow-link<\/code><\/kbd> makes all links inside the element appear with arrows.<\/li>\n\n\n\n
          • columns-list<\/code><\/kbd> makes a list appear in up to 3 columns (based on screen width). Add class halves<\/code> to limit it to 2 columns.<\/li>\n<\/ul>\n\n\n\n

            Width<\/h2>\n\n\n\n
              \n
            • element-width<\/code><\/kbd> sets the maximum width of an element to 45 rem. This makes text easier to read, and is the default width for headings and paragraphs.<\/li>\n\n\n\n
            • width-unrestricted<\/code><\/kbd> removes the maximum width from an element.<\/li>\n<\/ul>\n\n\n\n

              Miscellaneous<\/h2>\n\n\n\n
                \n
              • sr-only<\/code><\/kbd> hides an element from visual browser so only assistive technology can find it.<\/li>\n\n\n\n
              • horizontal<\/code><\/kbd> either on a card, or on a card’s parent template wrapper, will force traditional cards to render in a horizontal orientation instead of vertical.<\/li>\n\n\n\n
              • no-border<\/code><\/kbd> removes the border from an element.<\/li>\n<\/ul>\n<\/div>\n\n\n\n
                <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

                The ClarkU web platform has additional class names that let you customize blocks in ways the editor can’t. Color Columns and sidebars Overlap Spacing Typography Width Miscellaneous<\/p>\n","protected":false},"author":13,"featured_media":0,"parent":13,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"yoast_head":"\nAdvanced class names - ClarkU WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clarku.edu\/wordpress\/components\/advanced-class-names\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Advanced class names\" \/>\n<meta property=\"og:description\" content=\"The ClarkU web platform has additional class names that let you customize blocks in ways the editor can’t. Color Columns and sidebars Overlap Spacing Typography Width Miscellaneous\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clarku.edu\/wordpress\/components\/advanced-class-names\/\" \/>\n<meta property=\"og:site_name\" content=\"ClarkU WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-11T18:10:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/advanced-class-names\\\/\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/advanced-class-names\\\/\",\"name\":\"Advanced class names - ClarkU WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\"},\"datePublished\":\"2025-02-01T23:53:48+00:00\",\"dateModified\":\"2025-11-11T18:10:28+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/advanced-class-names\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-json\\\/wp\\\/v2\\\/pages\\\/11#breadcrumbs\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":0,\"name\":\"ClarkU\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/\"},{\"@type\":\"ListItem\",\"position\":1,\"name\":\"ClarkU WordPress\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/\",\"name\":\"ClarkU WordPress\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Advanced class names - ClarkU WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clarku.edu\/wordpress\/components\/advanced-class-names\/","og_locale":"en_US","og_type":"article","og_title":"Advanced class names","og_description":"The ClarkU web platform has additional class names that let you customize blocks in ways the editor can’t. Color Columns and sidebars Overlap Spacing Typography Width Miscellaneous","og_url":"https:\/\/www.clarku.edu\/wordpress\/components\/advanced-class-names\/","og_site_name":"ClarkU WordPress","article_modified_time":"2025-11-11T18:10:28+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.clarku.edu\/wordpress\/components\/advanced-class-names\/","url":"https:\/\/www.clarku.edu\/wordpress\/components\/advanced-class-names\/","name":"Advanced class names - ClarkU WordPress","isPartOf":{"@id":"https:\/\/www.clarku.edu\/wordpress\/#website"},"datePublished":"2025-02-01T23:53:48+00:00","dateModified":"2025-11-11T18:10:28+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clarku.edu\/wordpress\/components\/advanced-class-names\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/11#breadcrumbs","itemListElement":[{"@type":"ListItem","position":0,"name":"ClarkU","item":"https:\/\/www.clarku.edu\/"},{"@type":"ListItem","position":1,"name":"ClarkU WordPress","item":"https:\/\/www.clarku.edu\/wordpress"}]},{"@type":"WebSite","@id":"https:\/\/www.clarku.edu\/wordpress\/#website","url":"https:\/\/www.clarku.edu\/wordpress\/","name":"ClarkU WordPress","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clarku.edu\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":8,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":643,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/11\/revisions\/643"}],"up":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/13"}],"wp:attachment":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}