CODEWITHSUNDEEP
htmlcssflexbox
markthekoala
markthekoala

Reputation: 1085

Flexbox styling some callout text

I am trying to style some callout text using Flexbox.

Hopefully, the following words can describe the visual intent.

I have a mobile layout which is going to be a blog post.

The typical text is just a standard style.

For certain portions of text (perhaps an important paragraph) I want to style this differently -- I am calling this style "callout"

I want this style to have a thin blue vertical line (about 10px) - flush with the left hand side.

Then to the right of this thin blue line, I want the callout text which be in a slightly different style.

The vertical height of the blue line would be equal to the height of the accompanying callout text.

I have an example of my best effort see codepen link (which looks horrible). It contains a few comments in the example, which hopefully makes my intent clear.

https://codepen.io/snowman8003/pen/vPrEzJ

The following is a copy of the relevant CSS flex style:

div .call-out {
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: nowrap;
justify-content:space-evenly;
}

div .call-out-bar {
flex: 1;
width: 10px;
background: blue;
}

div .call-out-text {
flex: 1;
width: 100%;
}

The image below. Hopefully makes things clear.

This is an image of what I am basically trying to achieve:

Thanks for any input,

Mark

Upvotes: 0

Views: 749

Answers (2)

0stone0
0stone0

Reputation: 43934

padding-left should do the trick!

EDIT: As @arieljuod mentioned, <em> could be used as well. This way the 2 <div>'s are no longer needed. 

.call-out-text {
  flex 1;
  width: 100%;

  padding-left: 10px;
  border-left: 5px solid blue;
}

// EDIT
em {
  padding-left: 10px;
  border-left: 5px solid blue;
}


html, body {
 /*  https://material.io/design/typography/the-type-system.html# */
/* light: 300; regular: 400; medium: 500*/

  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  font-weight: normal;

/*  this sets 1rem = 16px*/
  font-size: 16px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
  height: 100%;
/*  border:1px solid rgba(250,0,0,1);*/
}

p {
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.5px;
}

div .call-out {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content:space-evenly;
  
}

em {
  padding-left: 10px;
  border-left: 5px solid blue;
}

.call-out-text {
  flex 1;
  width: 100%;
  
  padding-left: 10px;
  border-left: 5px solid blue;
}
<head>
  <meta charset="UTF-8">
  <title>FlexBox Nav</title>

  <!-- light: 300; regular: 400; medium: 500 -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>

<div class="wrap">
  <article>
    <p>ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, beatae?</p>

    
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <!-- EDIT -->
    <em>Qwerty!</em>
    
    <!-- Original option -->
    <div class="call-out">
      <div class="call-out-text">
        <p><i>This is a callout bar. It displays something important or unusual that should provide the user with some extra information</i></p>
      </div>
    </div>

    <p>Now we are back to normal text...</p>
  </article>
</div>

Upvotes: 1

arieljuod
arieljuod

Reputation: 15838

It looks like you can achieve that using only CSS (a border-left and a padding-left) Any reason to use that flex hack?. And I'd recommend you to use the "EM" tag used to emphazise parts of the text, it will be semantically better.

<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

<p><em>This is a callout bar. It displays something important or unusual that should provide the user with some extra information</em></p>

<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

And then just padding and border

p em {
  padding-left: 10px;
  border-left: 10px solid blue;
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

Upvotes: 0

Related Questions