Blog - Blocks - DOM Card Block

DOM Card Block

The DOM Card block displays a structured object with a title, tab and content area. This allows you to easily create side-by-side options, information, and data comparisons. When used in a DOM Object block, you may set parameters from the parent that affect all cards it contains.

Settings Overview

  • Card Style
    • Card Top Color : Choose a color for the card top, tab and content border. [tutorial] You may override this setting and color each node individually.
    • Card Top Font Color : Choose a font color to be used for both the tab text and title text. You may also color the tab and title text individually.
    • Box Shadow : Apply a box shadow to the tab, title and content. [tutorial] Each node gets the shadow with this setting, or you may give them shadows individually.
  • Tab
    • Stretch Tab to Shoulders : By default the tab width will be set to fit the text, out to the “shoulders”, which is the marginal inset that make it a “tab”. Turn this setting on to display the tab “full-shoulder”.
  • Styled Nodes : Object nodes within the block DOM with styling settings. [tutorial]
    • root object : Block Settings panel
      • tab : Tab panel
      • title : Title panel
      • content : Content panel

Object Map (DOM)

  • root object (div) targeted node from Block Settings panel : You may assign style settings that apply to this entire block.
    • tab (span) targeted node from the Tab panel : Single text field, text is edited in the block not in the panel. Styles targeting this node only apply to the tab, and will override the same style applied to the block and/or assigned to children from the parent block.
    • title (div) targeted node from Title panel : Single text field, just like the tab. The title comrises the “top” of the card, where the tab is a “protrusion” from the top of the card.
    • content (div) targeted node from Content panel : This node is where you may enter basic text as paragraph blocks (just type) or insert other blocks. Styles applied to this node are inherited by it’s children and it follow suit with previously explained cascading.
      • wp nested wrapper (div) untargeted node : This node is generated by Gutenberg around nested content, we sometimes use it when layout rules need to be applied. Follow suit with the internal wrapper.
        • nested blocks (?) untargeted nodes : Anything put into the nested content area. Each block may have it’s own style rules, some core blocks do. Styles applied to a child “should” be able to override the same style cascaded to it from above. I use the word “should” because we only have control over our own blocks and how styles are applied to them, core and outsider blocks have their own methods.

Example #1 – Basics

Tabbed
Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus.

Card 2

Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti. Sed ac augue quis arcu mattis rutrum.

Tabbed
Card 3

Quisque commodo, risus ac accumsan viverra, justo ex ultrices augue, ut semper nulla erat vitae metus. Vivamus vehicula lacus a ullamcorper consectetur. Vivamus vel vulputate urna, consectetur ultricies justo. Quisque cursus pharetra vulputate.

The DOM Card block is designed to be used as children of a DOM Object block. It will work on the root level, but aligning them side-by-side requires the DOM Object flexbox functionality. Whether or not a card has a tab there will be space left for a tab at the top of the card. This allows you to have cards that are aligned with any/all of the using tabs for any purpose you need.

  • Insert a DOM Object block into the page.
  • Turn on flex mode by clicking the Flex toolbar button.
  • Open the Flexbox panel in the block inspector (sidebar).
    • You may also turn on/off flex mode from the Display as Flexbox setting in the Flexbox panel.
    • Set the Column Limit / Width % Divisor to 3 with the slider or by entering 3 in the number field.
    • Set the Item Spacing to 10px. This create a 10px space between the flex-items (child blocks) both horizontally and vertically.
    • Set the Rounded Corners by Pixels to 10px. This will affect all child objects, DOM Cards use it to round both the tab and shoulders at the top of the card.
    • Choose a new Border Color. In this example we choose a dark blue.
      • The cards use the parent’s border settings to determine color, thickness and style used by the card for it’s border, title and tab. These styles can be overrided individually in the cards themselves.
  • Insert a DOM Card block into the nested content area by clicking on the block insert button within the block editor. When the insert window opens, enter “dom” to narrow the search to the DOM blocks.
    • Enter text into each section of the card in the block editor: Tab, Title and Content. The content area of the card is also a nested content area in which you can enter text and/or insert blocks.
    • In this example we enter “Tabbed” into the Tab field, “Card 1” into the Title field, and some latin into the Content area.
  • Insert a 2nd DOM Card, it should line up beside sharing the area (up to 3 blocks).
    • Enter some text into the title and content, but leave out the tab. In this example we enter “Card 2” into the Title field and some latin into the Content area.
  • Insert a 3rd and final DOM Card block, if you were to enter a 4th it would drop to the next row unless you change the Column Limit to suit.
    • Repeat the steps you did in the first example, except in this example we entered “Card 3” as the Title.

Example #2 – Various Style Options

Tabbed
Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus.

Card 2

Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti. Sed ac augue quis arcu mattis rutrum.

Tabbed
Card 3

Quisque commodo, risus ac accumsan viverra, justo ex ultrices augue, ut semper nulla erat vitae metus. Vivamus vehicula lacus a ullamcorper consectetur. Vivamus vel vulputate urna, consectetur ultricies justo. Quisque cursus pharetra vulputate.

This second example just takes the work you did in the first example and adds some custom styling to each card.

  • Using the block from example #1, select the base DOM Object block that is now labeled as “DOM Flexbox”.
  • Open the Flexbox panel.
    • Set Item Contents Vertical Align to middle. This will center the text vertically within each card while the cards all expand their height to match the tallest card in the row.
  • Select the first card.
    • Open the Content panel.
      • Set the Border Width to 3px.
      • Choose a Box Shadow Color, in this example we use the same dark blue as we used for Border Color in the first example.
      • Turn on the Inset Shadow setting.
  • Select the second card.
    • Open the Card Style panel.
      • Choose a Card Top Color, in this example we use purple. If you choose a light color, be sure to choose a complimentary Card Top Font Color.
    • Open the Content panel.
      • We want to create a double border, but to access border options for this card you must assign a Border Color first. Use the same color you chose for the Card Top to keep it consistent.
      • Set the Border Width to 5px, this will allow the next setting to do it’s job.
      • Set the Border Style to “Double”. This will result in border lines with 2px thickness and 1px space beteen them.
  • Select the third card. This one will get the most radical changes… not to make it look good, just to hilight it’s capabilities.
    • Open the Card Style panel.
      • Choose a Card Top Color, in this example we use a light blue.
      • Choose a Card Top Font Color, in this example we use a dark blue.
      • Choose a Box Shadow Color, in this example we use black.
        • You can see that each part of the card gets the shadow, giving a stepped effect from tab to content. You can adjust the shadows at the card level or for each node to achieve the look you want.
    • Open the Tab panel.
      • Turn on the Stretch Tab to Shoulders setting, this pushes the tab left and right edges to the “shoulders” which allows enough space to round the card corners while still adjoining the tab correctly.
    • Open the Title panel.
      • Choose a Font Color, in this example we use white because we want to nice text shadow.
      • Choose a Text Shadow Color, in th8is example we use block, which is usally the best choice for text shadows.
      • Set the Font Size to 24px, just for the sake of changing something else.
      • Set the Font Style to “Italic”, again just to set it apart.
    • Open the Content panel.
      • Choose a Font Color, in this example we use white.
      • Choose a Background Color, in this example we use black.

Example #3 – Product Comparison Cards

View the DOM Blocks page for a tutorial on recreating this example.

Accelerate Pro
Accelerate Pro comes packaged with the AMP Publisher Blocks plugin, and allows access to import the demo site blocks from the API .
Demo Site
Learn More
WooCommerce
Accelerate Pro Woo
Accelerate Pro Woo extends Pro by including the AMP Publisher Woo plugin, bridging the gap between AMP and WooCommerce.
Demo Site
Learn More
WooCommerce
CBD Serenity
CBD Serenity includes the same plugins as Pro Woo, but with CBD / Cannabis themed pages, content and blocks.
Demo Site
Learn More

Comments are closed.