Blocks

DOM Card Block

by CreatorFeb 4, 2021 1

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.

Example #1 – Basics

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

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.